点击GestureDetector弹出ModalBottomSheet未抬手时如何将手势传递给弹窗内GestureDetector

问题根因 #

Flutter 手势系统采用竞技场分发机制，同一份完整触摸事件序列（从手指按下PointerDownEvent到抬起PointerUpEvent为一个序列），只会被率先在竞技场胜出的手势消费者消费。
你当前的场景中，原GestureDetector触发onTap回调时已经抢占了当前事件序列的消费权，后渲染到视图树的弹窗控件，默认无法接收已经启动的同一份事件序列，所以会出现手指未抬起时弹窗内控件无响应的问题。

可落地解决方案 #

方案1：替换触发侧监听组件为Listener（推荐） #

Listener属于原始指针监听组件，不参与手势竞技场竞争，也不会消费事件序列，弹窗渲染完成后同序列的后续触摸事件会正常分发到弹窗节点：

Listener(
  // 按下就触发弹窗，不用等onTap回调
  onPointerDown: (pointerDownEvent) {
    showModalBottomSheet(
      context: context,
      builder: (context) => const CustomBottomSheet(),
    );
  },
  child: const OriginalButton(),
)

该方案改动最小，不需要修改弹窗侧的逻辑，就能让弹窗内的GestureDetector正常接收未抬起的手势事件。

方案2：手动转发事件（适用于必须保留原GestureDetector逻辑的场景） #

如果不能修改原触发侧的GestureDetector实现，可以通过手动转发事件的方式让弹窗控件拿到触摸事件：

1. 首先定义全局Key定位弹窗内的目标响应控件，同时在触发弹窗时暂存当前的指针事件：

final GlobalKey _targetGestureKey = GlobalKey();
PointerDownEvent? _currentDownEvent;

2. 原触发侧暂存按下事件：

GestureDetector(
  onTapDown: (details) {
    _currentDownEvent = PointerDownEvent(
      position: details.globalPosition,
    );
  },
  onTap: () {
    showModalBottomSheet(
      context: context,
      builder: (context) => CustomBottomSheet(targetKey: _targetGestureKey),
    ).whenComplete(() {
      // 弹窗渲染完成后转发事件
      WidgetsBinding.instance.addPostFrameCallback((_) {
        if (_currentDownEvent == null) return;
        // 找到目标控件的RenderBox
        final renderBox = _targetGestureKey.currentContext?.findRenderObject() as RenderBox?;
        if (renderBox == null) return;
        // 转换事件坐标系后转发
        final localPosition = renderBox.globalToLocal(_currentDownEvent!.position);
        GestureBinding.instance.handlePointerEvent(
          _currentDownEvent!.copyWith(position: localPosition),
        );
      });
    });
  },
  child: const OriginalButton(),
)

3. 弹窗内目标控件绑定Key，同时设置命中测试行为：

GestureDetector(
  key: targetKey,
  behavior: HitTestBehavior.opaque,
  onTap: () => print("弹窗内点击触发"),
  child: const TargetWidget(),
)

方案3：延迟弹窗触发（适用于仅需要响应抬起事件的场景） #

如果不需要响应按下到抬起之间的滑动/拖拽事件，只是希望弹窗弹出后这次点击的抬起动作能被弹窗捕获，只需要给弹窗触发逻辑加100ms左右的延迟，等当前事件序列完全结束后再弹出弹窗即可：

GestureDetector(
  onTap: () {
    Future.delayed(const Duration(milliseconds: 100), () {
      showModalBottomSheet(
        context: context,
        builder: (context) => const CustomBottomSheet(),
      );
    });
  },
  child: const OriginalButton(),
)

注意事项 #

• 弹窗内的GestureDetector建议设置behavior: HitTestBehavior.opaque，避免透明区域出现命中测试失败的问题。
• 如果弹窗设置了isScrollControlled: true，需要确保弹窗渲染完成后目标控件确实在重合位置，避免事件转发失败。

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