如何防止多手指操作Draggable时出现多个feedback组件？

问题场景：使用Draggable组件时，单手指拖动仅显示一个feedback组件符合预期，但多手指同时操作会触发多个拖动实例，出现多个feedback组件（单手指操作时屏幕仅显示一个定位图标；多手指操作时屏幕上出现多个相同的定位图标）。

解决方案 #

核心思路是通过状态变量跟踪当前拖动状态，阻止同一时间触发多个拖动操作。具体实现步骤：

1. 将组件改为StatefulWidget，维护_isDragging状态变量标记是否正在拖动；
2. 在Draggable的onDragStarted回调中标记拖动开始，onDragEnd回调中标记拖动结束；
3. 通过enabled属性或IgnorePointer组件，在拖动过程中阻止Draggable响应新的触摸事件。

修改后的完整代码 #

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

  @override
  State<SingleDragPage> createState() => _SingleDragPageState();
}

class _SingleDragPageState extends State<SingleDragPage> {
  bool _isDragging = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const AppBar(title: Text('AppBar Example')),
      body: Draggable(
        // 拖动时禁用组件，阻止新触摸触发
        enabled: !_isDragging,
        feedback: Icon(
          Icons.my_location_outlined,
          color: Colors.black,
          size: Theme.of(context).iconTheme.size!,
        ),
        data: "",
        dragAnchorStrategy: (draggable, context, position) => const Offset(0, 80),
        onDragStarted: () {
          setState(() => _isDragging = true);
        },
        onDragEnd: (details) {
          setState(() => _isDragging = false);
        },
        child: Center(
          child: Container(
            height: 100,
            width: 100,
            color: Colors.red,
          ),
        ),
      ),
    );
  }
}

代码说明 #

• _isDragging：实时跟踪当前是否有拖动操作在进行；
• enabled: !_isDragging：拖动过程中禁用Draggable，避免多手指触发新的拖动实例；
• onDragStarted/onDragEnd：在拖动生命周期节点同步更新状态，确保逻辑一致性。

也可通过IgnorePointer包裹实现相同效果：

body: IgnorePointer(
  ignoring: _isDragging,
  child: Draggable(
    // 其余代码保持不变
  ),
),

内容的提问来源于stack exchange，提问作者Daniel Roldán