Flutter：如何让GestureDetector仅响应第一个容器的点击事件

要实现仅点击红色背景的最外层容器时触发onTap，核心是让内部的绿色、蓝色容器区域消费点击事件，阻止事件向上冒泡到外层的GestureDetector。这里提供两种可行方案：

方案一：用内部GestureDetector拦截事件 #

给绿色容器套一个空实现的GestureDetector，它会捕获内部区域的点击事件，不会传递到外层：

GestureDetector(
  onTap: () => print('pressed'),
  child: Container(
    padding: const EdgeInsets.all(10),
    color: Colors.red,
    child: GestureDetector(
      // 空实现，消费点击事件，阻止冒泡
      onTap: () {},
      child: Container(
        padding: const EdgeInsets.all(10),
        color: Colors.green,
        child: Container(
          height: 50,
          color: Colors.blue,
        ),
      ),
    ),
  ),
)

方案二：用AbsorbPointer屏蔽内部事件 #

AbsorbPointer会吸收其范围内的所有指针事件，不让它们传递到上层组件，刚好适合这个场景：

GestureDetector(
  onTap: () => print('pressed'),
  child: Container(
    padding: const EdgeInsets.all(10),
    color: Colors.red,
    child: AbsorbPointer(
      child: Container(
        padding: const EdgeInsets.all(10),
        color: Colors.green,
        child: Container(
          height: 50,
          color: Colors.blue,
        ),
      ),
    ),
  ),
)

补充说明 #

你之前尝试IgnorePointer无效，是因为IgnorePointer只是让子组件无法接收事件，但事件仍然会向上冒泡到外层；而AbsorbPointer会直接消费事件，阻止冒泡。把AbsorbPointer放在内部容器外层，就能实现只响应红色区域的点击。

内容的提问来源于stack exchange，提问作者Parlor311