如何用 Flutter 处理嵌套的 InkWell？

Posted 2023-02-23

【中文标题】如何用 Flutter 处理嵌套的 InkWell？

【英文标题】：How do deal with nested InkWell with Flutter?

【发布时间】：2019-06-21 19:32:14

【问题描述】：

假设你有几个嵌套的InkResponse，如果你点击里面的那个，所有的父级实际上都会触发飞溅效果，即使它们会在右击小部件的点击区域中松动。效果会是这样的：

如何防止此类行为？如何为点击的小部件显示 only 的启动画面？在此示例图像中，它使用Container > Row（与InkReponse）> Icon（也与InkResponse）。如果您使用材质按钮，也会发生这种情况。

【问题讨论】：

您好，您已经找到答案了吗？请更新。

我创建了InkWell>Container>Row>[Text,IconButton]的demo，墨水飞溅效果单独处理（即点击图标不会触发外部InkWell的飞溅）。可能这在flutter 2中已修复。您可以提供源代码吗？

是的，也许这已经修复了。这件事被报道已经有一段时间了。

【参考方案1】：

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

【讨论】：

那你如何处理图标中的点击呢？

你的意思是 GestureDetectory 拦截儿童点击？那我猜你可以处理其中的图标点击？

不，假设您只想检测图标点击。

想通了吗？我刚才遇到了同样的障碍。

添加 GestureDetector 只会删除第二个 InkResponse，但现在按钮上的 InkResponse 会展开以填充整个卡片。我们需要一些方法来允许嵌套材质处理交互。