如何处理Flutter中的嵌套InkWell？

Question

假设您有几个嵌套的InkResponse，如果您在内部一个上轻敲，所有父级都将触发溅泼效果，即使它们将在正确轻敲的小部件竞技场中输掉。 效果将类似于这样：

如何防止这种行为？ 如何仅为轻敲的小部件显示涟漪效果？ 在此示例图像中，使用了Container> Row（带有InkReponse）> Icon（同样带有InkResponse）。 如果您使用材料按钮，也将发生这种情况。

- Miguel Ruivo

---

你好，你已经找到答案了吗？请更新。 - Huy Tower

我创建了一个 InkWell>Container>Row>[Text, IconButton] 的演示，墨水飞溅效果是单独处理的（即点击图标不会触发外部 InkWell 的飞溅效果）。 也许在 Flutter 2 中已经修复了这个问题。你能提供源代码吗？ - Crizant

是的，也许这个问题已经被修复了。自从这个问题被报告以来已经有一段时间了。 - Miguel Ruivo

Answer 1

我建议您使用Stack小部件，因为您可以将多个小部件组合在一起。这里有一个容器的例子，其中包含内部容器，它们都可以独立点击。

Stack(
  children: [
    InkWell(
      onTap: (){},
      child: Container(
        width: 400,
        height: 400,
        color: Colors.green,
      ),
    ),
    Positioned(
      top: 30,
      left: 20,
      child: InkWell(
        onTap: (){},
        child: Container(
          width: 100,
          height: 100,
          color: Colors.red,
        ),
      ))
  ],
)

- ncutixavier

Answer 2

您可以尝试使用IgnorePointer来解决问题。

- nesimtunc

Answer 3

这对我有用

Center(
            child:Container(
              width: 100,
              height: 100,
              child: Card(
                child: InkWell(
                  splashColor: color3,
                  onTap: () {

                  },
                  child: Column(
                    children: [
                      SizedBox(
                        height: 10,
                      ),
                      IconButton(
                        splashRadius: 7,
                        splashColor: Colors.pink,
                        onPressed: () {},
                        icon: SvgPicture.asset(
                          ImageConst.bellIcon,
                          width: 20,
                          height: 20,
                          color: Colors.black,
                        ),
                      ),
                      SizedBox(
                        height: 10,
                      ),
                      Text("text"),
                    ],
                  ),
                ),
              ),
            ),
          )

- minato

Answer 4

尝试使用空处理程序+填充将图标包装到GestureDetector中。

- Oleg Khalidov

---

你如何处理图标上的点击事件？ - Miguel Ruivo

你的意思是GestureDetector拦截子点击事件吗？那么我猜你可以在其中处理图标的点击事件？ - Oleg Khalidov

不，假设你只想检测图标的点击。 - Miguel Ruivo

搞定了吗？我刚遇到同样的障碍。 - SacWebDeveloper

添加GestureDetector只会删除第二个InkResponse，但现在按钮上的InkResponse会扩展到填充整个卡片。我们需要的是一种允许嵌套材料处理交互的方法。 - SacWebDeveloper