Flutter：在onVerticalDragUpdate/onPanUpdate中终止GestureDetector手势

当需要在拖动到特定位置后完全终止手势（模拟用户移开手指的效果），可以用以下两种方案实现：

方案一：通过状态控制手势响应 #

这种方式简单直接，通过状态变量控制GestureDetector是否处理拖动事件，同时在终止时触发结束逻辑。

示例代码：

class DraggableWidget extends StatefulWidget {
  @override
  _DraggableWidgetState createState() => _DraggableWidgetState();
}

class _DraggableWidgetState extends State<DraggableWidget> {
  bool _allowDrag = true;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onVerticalDragUpdate: _allowDrag ? (details) {
        if (details.globalPosition.dy > 100) {
          // 终止手势：停止响应后续拖动，触发结束逻辑
          setState(() => _allowDrag = false);
          _onDragEnd();
        } else {
          // 这里写更新Widget尺寸的逻辑
          // updateWidgetSize(details.delta.dy);
        }
      } : null,
      onVerticalDragEnd: (_) {
        _onDragEnd();
        // 重置状态，允许下次拖动手势
        setState(() => _allowDrag = true);
      },
      child: Container(
        width: 200,
        height: 200,
        color: Colors.blue,
        child: const Center(child: Text('拖动我')),
      ),
    );
  }

  void _onDragEnd() {
    // 处理手势结束的逻辑，比如恢复尺寸、保存状态等
    print('拖动手势已终止');
  }
}

方案二：使用RawGestureDetector直接管理手势识别器 #

如果需要更精准地模拟手指离开的行为，可以用RawGestureDetector直接操作手势识别器，调用stopTrackingPointer方法终止当前手势追踪。

示例代码：

class RawDraggableWidget extends StatefulWidget {
  @override
  _RawDraggableWidgetState createState() => _RawDraggableWidgetState();
}

class _RawDraggableWidgetState extends State<RawDraggableWidget> {
  late VerticalDragGestureRecognizer _dragRecognizer;

  @override
  void initState() {
    super.initState();
    _dragRecognizer = VerticalDragGestureRecognizer()
      ..onUpdate = (details) {
        if (details.globalPosition.dy > 100) {
          // 终止手势：停止追踪当前指针，模拟手指移开
          _dragRecognizer.stopTrackingPointer(details.pointer);
          // 手动触发结束回调
          _dragRecognizer.onEnd?.call(const DragEndDetails());
        } else {
          // 更新Widget尺寸的逻辑
          // updateWidgetSize(details.delta.dy);
        }
      }
      ..onEnd = (_) => _onDragEnd();
  }

  @override
  void dispose() {
    _dragRecognizer.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return RawGestureDetector(
      gestures: {
        VerticalDragGestureRecognizer: GestureRecognizerFactoryWithHandlers<VerticalDragGestureRecognizer>(
          () => _dragRecognizer,
          (_) {},
        ),
      },
      child: Container(
        width: 200,
        height: 200,
        color: Colors.green,
        child: const Center(child: Text('精准终止拖动')),
      ),
    );
  }

  void _onDragEnd() {
    print('拖动手势已终止');
  }
}

两种方案对比：

• 方案一适合大多数场景，代码简洁易维护；
• 方案二更贴近底层手势处理，能完全模拟手指离开的原生行为，适合有特殊需求的场景。

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