如何在 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和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中使用時，它會導致項目呈現問題。

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