如何阻止点击子Widget时触发父Widget的onTap事件

嗨，这个问题其实是Flutter手势事件的冒泡传递机制导致的——当点击子Widget时，如果子Widget没有消费这个点击事件，事件就会向上传递给父Widget，触发父级的onTap。咱们可以通过让子Widget主动消费点击事件来解决，这里给你两个实用的方案：

方法一：给子Widget套一个空实现的GestureDetector #

这是最常用的解决方案，只要给子Widget外层包裹一个GestureDetector并设置空的onTap，它就会消费掉点击事件，不会再向上传递给父Widget。而且完全不会影响子Widget内部的交互（比如按钮、输入框这些控件的手势依然正常工作）。

修改你的代码如下：

GestureDetector(
  onTap: () {
    print("GestureDetector Outer");
    final isDismissible = ModalRoute.of(context)?.barrierDismissible;
    if (isDismissible == true) {
      Navigator.pop(context);
    }
  },
  child: SizedBox(
    width: double.maxFinite,
    child: Row(
      children: [
        // 新增的GestureDetector，拦截点击事件不向上传递
        GestureDetector(
          onTap: () {}, // 空实现，仅用于消费点击事件
          child: SizedBox(
            width: 400,
            child: _content(),
          ),
        ),
      ],
    ),
  ),
)

方法二：用AbsorbPointer禁用子区域的所有交互（适合无交互场景） #

如果你的_content()本身不需要任何用户交互（比如只是纯展示的文本、图片），可以用AbsorbPointer包裹它。这个组件会阻止所有手势事件穿透到子Widget，同时也会阻止事件向上冒泡到父Widget。

代码示例：

GestureDetector(
  onTap: () {
    print("GestureDetector Outer");
    final isDismissible = ModalRoute.of(context)?.barrierDismissible;
    if (isDismissible == true) {
      Navigator.pop(context);
    }
  },
  child: SizedBox(
    width: double.maxFinite,
    child: Row(
      children: [
        AbsorbPointer(
          child: SizedBox(
            width: 400,
            child: _content(),
          ),
        ),
      ],
    ),
  ),
)

⚠️ 注意：这个方法会禁用子Widget内部所有的交互功能，所以如果_content()里有按钮、可点击卡片这类需要用户操作的控件，一定要用方法一！

备注：内容来源于stack exchange，提问作者Al Ryan Acain