Flutter：检测在一个Widget上按下、另一个Widget上释放的手势事件

关于GestureDetector不可用的原因 #

GestureDetector 内部的手势竞技场机制决定了它不支持这类跨Widget的交互场景：当第一个Widget的长按手势竞技胜出后，整个指针事件周期内的所有后续事件只会分发到该Widget的GestureDetector，其余Widget的GestureDetector无法接收事件，所以你遇到的问题不是用法错误，是组件本身的机制限制。

Listener方案可行性说明 #

你想到的用Listener组件监听指针事件、坐标匹配区域的方案是完全可行的，这也是这类自定义跨Widget交互的标准实现思路，没有性能问题，灵活性最高。

具体实现逻辑 #

• 给需要响应交互的所有Widget的父容器套Listener组件，监听全周期的指针事件
• 为第一个、第二个Widget分别绑定GlobalKey，用于后续获取组件的屏幕坐标与尺寸
• 监听onPointerDown事件，启动长按延时计时器，延时触发第一个Widget的指定函数，同时标记长按状态为激活
• 监听onPointerUp事件，先取消未触发的长按计时器避免短按误触，若当前长按状态为激活，则通过GlobalKey获取第二个Widget的绘制区域Rect，判断当前指针抬起坐标是否在Rect范围内，匹配成功则触发第二个Widget的指定函数，最后重置长按状态

最简实现示例 #

import 'dart:async';
import 'package:flutter/material.dart';

class LongPressDragDemo extends StatefulWidget {
  const LongPressDragDemo({super.key});

  @override
  State<LongPressDragDemo> createState() => _LongPressDragDemoState();
}

class _LongPressDragDemoState extends State<LongPressDragDemo> {
  final GlobalKey _firstWidgetKey = GlobalKey();
  final GlobalKey _secondWidgetKey = GlobalKey();
  bool _isLongPressActivated = false;
  Timer? _longPressTimer;

  // 第一个Widget长按触发函数
  void _onFirstLongPress() {
    debugPrint("第一个Widget长按触发");
  }

  // 第二个Widget抬起触发函数
  void _onSecondTrigger() {
    debugPrint("拖动到第二个Widget抬起触发");
  }

  @override
  void dispose() {
    _longPressTimer?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Listener(
          onPointerDown: (event) {
            _longPressTimer = Timer(const Duration(milliseconds: 500), () {
              _onFirstLongPress();
              _isLongPressActivated = true;
            });
          },
          onPointerUp: (event) {
            _longPressTimer?.cancel();
            if (_isLongPressActivated) {
              // 获取第二个Widget的区域
              final RenderBox? secondBox = _secondWidgetKey.currentContext?.findRenderObject() as RenderBox?;
              if (secondBox != null) {
                final secondRect = secondBox.localToGlobal(Offset.zero) & secondBox.size;
                if (secondRect.contains(event.position)) {
                  _onSecondTrigger();
                }
              }
              _isLongPressActivated = false;
            }
          },
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                key: _firstWidgetKey,
                width: 120,
                height: 60,
                color: Colors.blueAccent,
                alignment: Alignment.center,
                child: const Text("第一个Widget", style: TextStyle(color: Colors.white)),
              ),
              const SizedBox(width: 30),
              Container(
                key: _secondWidgetKey,
                width: 120,
                height: 60,
                color: Colors.redAccent,
                alignment: Alignment.center,
                child: const Text("第二个Widget", style: TextStyle(color: Colors.white)),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

优化注意点 #

• 如果父容器是可滚动组件，坐标判断时需要额外加上当前的滚动偏移量，避免坐标错位
• 如需支持多指操作，可以通过event.pointer字段区分不同的指针实例，避免多指操作冲突
• 如果不需要太高的自定义度，也可以直接使用第三方封装好的长按选择类组件，省去坐标计算逻辑

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