如何在 Flutter 中给带有装饰的容器添加波纹效果？

Question

我想为自定义添加连锁反应Container。我已经使用Inkwell和Material小部件来实现此行为，但它不起作用。代码如下：

@override
  Widget build(BuildContext context) {
    return Center(
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          onTap: (){},
          child: Container(
            width: 150,
            height: 100,
            decoration: BoxDecoration(
              border: Border.all(color: Colors.red, width: 2),
              borderRadius: BorderRadius.circular(18),
              color: Colors.deepPurpleAccent,
            ),
            alignment: Alignment.center,
            child: Text(
              "A box container",
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }

结果是：

我还使用了透明颜色Container和紫色，Material如下所示：

@override
  Widget build(BuildContext context) {
    return Center(
      child: Material(
        color: Colors.deepPurpleAccent,
        child: InkWell(
          onTap: () {},
          child: Container(
            width: 150,
            height: 100,
            decoration: BoxDecoration(
              border: Border.all(color: Colors.red, width: 2),
              borderRadius: BorderRadius.circular(18),
              color: Colors.transparent,
            ),
            alignment: Alignment.center,
            child: Text(
              "A box container",
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }

结果，出现了连锁反应，但Container看起来像这样（不是我想要的）：

我还相互交换了Container和小部件，在其上应用了剪辑，如下所示：MaterialContainer

@override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 150,
        height: 100,
        decoration: BoxDecoration(
          border: Border.all(color: Colors.red, width: 2),
          borderRadius: BorderRadius.circular(18),
          color: Colors.transparent,
        ),
        clipBehavior: Clip.hardEdge,
        child: Material(
          color: Colors.deepPurpleAccent,
          child: InkWell(
            onTap: () {},
            child: Center(
              child: Text(
                "A box container",
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ),
      ),
    );
  }

再次出现波纹效果，但Container看起来并不像我想要的那样（您可以在 的边缘发现下面的照片和第一张照片之间的细微差别）Container：

我希望Container看起来与第一张照片完全相同，并带有涟漪效果。

注意：我想要的行为可以通过使用Ink和Inkwell小部件来精确实现，但是当在 a 中使用时ListView，它会导致项目渲染问题。

Answer 1

你们非常亲密。你需要有borderRadius和 。试试这个方法MaterialInkWell

child: Material(
  color: Colors.deepPurpleAccent,
  borderRadius: BorderRadius.circular(18),
  child: InkWell(
    borderRadius: BorderRadius.circular(18),
    onTap: () {},
    child: Container(
      width: 150,
      height: 100,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.red, width: 2),
        borderRadius: BorderRadius.circular(18),
        color: Colors.transparent,
      ),
      alignment: Alignment.center,
      child: Text(
        "A box container",
        style: TextStyle(color: Colors.white),
      ),
    ),
  ),
),