Flutter中能否让多个Widget同时识别同一点击事件？

默认情况下，Flutter的手势识别会优先让最顶层的Widget消费事件，导致下层Widget无法响应。下面是两种不需要绑定同一回调的解决办法：

方案一：使用Listener监听原始指针事件 #

Listener是监听底层指针事件的组件，不会独占事件，事件会沿着组件树向上冒泡，因此多层Listener可以同时响应点击。

Stack结构示例 #

Stack(
  alignment: Alignment.center,
  children: [
    Listener(
      // 监听指针抬起事件模拟点击
      onPointerUp: (_) => print('red'),
      child: Container(
        color: Colors.red,
        width: 200,
        height: 200,
      ),
    ),
    Listener(
      // 设置behavior为translucent，确保透明区域也能接收事件
      behavior: HitTestBehavior.translucent,
      onPointerUp: (_) => print('green'),
      child: Container(
        color: Colors.green,
        width: 100,
        height: 100,
      ),
    ),
  ],
);

父子结构示例 #

Center(
  child: Listener(
    onPointerUp: (_) => print('red'),
    child: Container(
      color: Colors.red,
      width: 200,
      height: 200,
      child: Center(
        child: Listener(
          behavior: HitTestBehavior.translucent,
          onPointerUp: (_) => print('green'),
          child: Container(
            color: Colors.green,
            width: 100,
            height: 100,
          ),
        ),
      ),
    ),
  ),
);

点击绿色区域时，会同时打印green和red。

方案二：自定义不拦截事件的GestureRecognizer #

如果需要使用GestureDetector的高级手势功能（比如双击、长按），可以自定义一个不会阻止其他手势识别器的TapGestureRecognizer，配合RawGestureDetector使用。

步骤1：定义自定义手势识别器 #

class NonBlockingTapGestureRecognizer extends TapGestureRecognizer {
  @override
  void rejectGesture(int pointer) {
    // 重写rejectGesture，不拒绝其他手势识别器的请求
    // 这样底层的手势识别器也能正常触发
  }
}

步骤2：在RawGestureDetector中使用 #

Stack(
  alignment: Alignment.center,
  children: [
    RawGestureDetector(
      gestures: {
        TapGestureRecognizer: GestureRecognizerFactoryWithHandlers<TapGestureRecognizer>(
          () => TapGestureRecognizer(),
          (recognizer) {
            recognizer.onTap = () => print('red');
          },
        ),
      },
      child: Container(
        color: Colors.red,
        width: 200,
        height: 200,
      ),
    ),
    RawGestureDetector(
      gestures: {
        NonBlockingTapGestureRecognizer: GestureRecognizerFactoryWithHandlers<NonBlockingTapGestureRecognizer>(
          () => NonBlockingTapGestureRecognizer(),
          (recognizer) {
            recognizer.onTap = () => print('green');
          },
        ),
      },
      behavior: HitTestBehavior.translucent,
      child: Container(
        color: Colors.green,
        width: 100,
        height: 100,
      ),
    ),
  ],
);

这种方式既保留了GestureDetector的手势识别能力，又能让多层Widget同时响应点击。

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