如何在Flutter中为带有decoration的Container添加涟漪效果？

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和Material小部件，将剪辑应用于Container，如下所示：

@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小部件来实现，但是当在ListView中使用时，会导致项目渲染问题。

- sm_sayedi

Answer 1

你离正确很近了。你需要在Material和InkWell上添加borderRadius属性。试试这样做：

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),
      ),
    ),
  ),
),

- Yeasin Sheikh