如何将手势穿透传递给下层对象？Flutter手势处理问题

你遇到的问题其实是Flutter手势识别机制的一个常见误区——HitTestBehavior.translucent确实会让上层Widget参与命中测试的同时允许下层也参与，但TapGestureRecognizer是独占式的手势识别器，一旦上层的GestureDetector成功识别了点击事件，下层的识别器就会被系统取消，所以只会打印Top。

为什么你的代码没生效？ #

当你设置上层GestureDetector的behavior: HitTestBehavior.translucent时，这个Widget确实会被加入命中测试列表，同时下层的GestureDetector也会被加入。但Flutter的Tap手势识别是竞争模式：第一个成功识别手势的Recognizer会“抢占”事件，其他Recognizer会收到取消信号，所以只有上层的onTap会触发。

解决方案 #

根据你的需求（点击上层可见区域时触发下层Widget的手势），这里有两种常用的实现方式：

1. 同时触发上层和下层的点击事件（使用Listener）

如果你希望点击上层区域时，上下两层的事件都能响应，用Listener代替GestureDetector是更简单的选择——Listener监听的是原始触摸事件，不存在手势竞争的问题：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Listener(
      onPointerDown: (_) => print("Bottom"),
      child: Container(
        color: Colors.redAccent,
        child: Center(
          child: Listener(
            onPointerDown: (_) => print("Top"),
            child: Container(
              width: 200.0,
              height: 200.0,
              color: Colors.blue.withOpacity(0.3),
            ),
          ),
        ),
      ),
    );
  }
}

点击蓝色区域时，会先打印Top再打印Bottom（触摸事件从上层向下层传递）。

2. 只触发下层的点击事件（忽略上层手势）

如果你希望点击上层区域时，完全穿透到下层，不对上层事件做响应，可以用IgnorePointer包裹上层Widget：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => print("Bottom"),
      child: Container(
        color: Colors.redAccent,
        child: Center(
          child: IgnorePointer(
            ignoring: true, // 让上层Widget不接收手势事件
            child: Container(
              width: 200.0,
              height: 200.0,
              color: Colors.blue.withOpacity(0.3),
            ),
          ),
        ),
      ),
    );
  }
}

这样点击蓝色区域时，只会打印Bottom，上层的Widget完全不拦截手势。

3. 用GestureDetector实现穿透（自定义识别器）

如果一定要用GestureDetector，可以通过RawGestureDetector自定义非独占的手势识别器，但这种方式比较繁琐，一般不推荐，除非有特殊需求。

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