Flutter：长按SliverList元素打开ModalRoute后，如何监听抬手关闭弹窗

问题核心：长按触发弹窗后，原界面的长按手势识别器已持有整个触摸序列，新弹出的ModalRoute里的GestureDetector无法接入这个已有的触摸流程，因此抬手动作不会被弹窗捕获。

直接用LongPressGestureRecognizer手动监听长按的开始和结束事件，就能在抬手时直接关闭弹窗，无需依赖弹窗内的手势识别器。

实现步骤 #

1. 自定义列表项，绑定长按识别器 #

在SliverList的子Widget中，创建LongPressGestureRecognizer，分别在onLongPressStart（长按触发时）打开弹窗，onLongPressEnd（抬手时）关闭弹窗。

示例代码：

class SliverListItem extends StatefulWidget {
  final String itemContent;
  const SliverListItem({super.key, required this.itemContent});

  @override
  State<SliverListItem> createState() => _SliverListItemState();
}

class _SliverListItemState extends State<SliverListItem> {
  late final LongPressGestureRecognizer _longPressRecognizer;
  OverlayEntry? _popupEntry;

  @override
  void initState() {
    super.initState();
    _longPressRecognizer = LongPressGestureRecognizer()
      ..onLongPressStart = (_) {
        // 构建弹窗并插入Overlay
        _popupEntry = OverlayEntry(
          builder: (context) => Positioned(
            left: MediaQuery.of(context).size.width / 4,
            top: MediaQuery.of(context).size.height / 3,
            child: Material(
              borderRadius: BorderRadius.circular(8),
              elevation: 8,
              child: Container(
                width: MediaQuery.of(context).size.width / 2,
                padding: const EdgeInsets.all(16),
                child: Text('长按内容：${widget.itemContent}'),
              ),
            ),
          ),
        );
        Overlay.of(context).insert(_popupEntry!);
      }
      ..onLongPressEnd = (_) {
        // 抬手时移除弹窗
        _popupEntry?.remove();
        _popupEntry = null;
      };
  }

  @override
  void dispose() {
    _longPressRecognizer.dispose();
    _popupEntry?.remove();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return RawGestureDetector(
      gestures: {
        LongPressGestureRecognizer: GestureRecognizerFactoryWithHandlers<LongPressGestureRecognizer>(
          () => _longPressRecognizer,
          (_) {},
        ),
      },
      child: Container(
        height: 60,
        alignment: Alignment.center,
        margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
        decoration: BoxDecoration(
          color: Colors.grey[100],
          borderRadius: BorderRadius.circular(8),
        ),
        child: Text(widget.itemContent),
      ),
    );
  }
}

2. 使用showDialog实现弹窗的写法 #

如果用系统showDialog，可在onLongPressEnd中直接调用Navigator.pop()关闭弹窗，注意设置barrierDismissible: false避免空白处误关：

// 修改initState中的长按识别器配置
_longPressRecognizer = LongPressGestureRecognizer()
  ..onLongPressStart = (_) async {
    await showDialog(
      context: context,
      barrierDismissible: false,
      builder: (context) => AlertDialog(
        title: const Text('长按弹窗'),
        content: Text('内容：${widget.itemContent}'),
      ),
    );
  }
  ..onLongPressEnd = (_) {
    Navigator.of(context).pop();
  };

核心原理 #

LongPressGestureRecognizer会全程监听同一个触摸序列的开始、持续、结束事件，不管中间是否打开新路由/弹窗，都能捕获抬手动作，直接在原列表项的逻辑中关闭弹窗，无需依赖弹窗内的手势监听。

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