Flutter实现可拖拽操作Draggable

Draggable 是 Flutter 中一个用来实现拖拽功能的控件。它允许用户将一个控件拖动到屏幕的不同位置，并且可以与 DragTarget 控件一起工作来完成拖拽交互。 Draggable 控件不仅可以在应用内拖动控件，还可以处理拖拽反馈、拖拽过程中控件的状态变更等操作。

1. Draggable 控件的构造函数

Draggable<T>({
   
   
  Key? key,
  required T data,  // 传递的拖拽数据
  required Widget child,  // 拖拽控件本身的显示
  Widget? feedback,  // 拖拽过程中展示的控件（通常是透明的）
  Widget? childWhenDragging,  // 拖拽时原控件的替代显示
  Axis? axis,  // 指定拖拽方向（水平或垂直）
  bool? ignorePointer,  // 是否忽略手势
  bool? dragAnchorStrategy,  // 自定义拖拽时锚点位置
  bool? onDragStarted,  // 拖拽开始时的回调
  bool? onDragEnd,  // 拖拽结束时的回调
  bool? onDraggableCanceled,  // 拖拽取消时的回调
})

主要参数：

• data：拖拽的核心数据，当用户拖拽控件时会携带此数据（可以是任意类型）。
• child：正常显示的控件。它是拖拽对象的原始显示（例如，可以是一个文本或图像）。
• feedback：拖拽时展示的控件，通常是半透明的，这个控件在拖拽期间会悬浮在用户的手指上方。
• childWhenDragging：当控件被拖拽时，原控件的替代显示（通常是空白或一个灰色的占位符）。
• axis：控制拖拽的方向，值可以是 Axis.horizontal（水平）或 Axis.vertical（垂直），也可以为 Axis.none（没有方向限制）。
• ignorePointer：是否忽略手势。如果为 true，该控件在拖拽时将无法响应任何手势。
• onDragStarted：拖拽开始时的回调，通常用来更新状态或做一些准备工作。
• onDragEnd：拖拽结束时的回调，通常用来处理拖拽结束后的逻辑。
• onDraggableCanceled：当拖拽被取消时的回调，通常是当控件离开了任何 DragTarget 区域。

---

2. Draggable 的工作原理

Draggable 控件主要通过 data 属性将需要拖拽的数据传递给其他控件，特别是 DragTarget，在用户拖拽控件时，Draggable 控件会自动执行以下操作：

1. 拖拽开始：当用户开始拖拽时，Draggable 控件会展示指定的 feedback，并且显示出原始控件的占位符（childWhenDragging）。
2. 拖拽过程：拖拽过程中，用户可以将控件在屏幕上拖动，通常会通过 onDragStarted 和 onDragEnd 回调来触发相应的逻辑。
3. 拖拽结束或取消：当拖拽对象被放置到 DragTarget 中，或者当用户取消拖拽时，Draggable 会触发 onDragEnd 或 onDraggableCanceled 回调。

---

3. 常见用法

示例 1：基本的拖拽控件

import 'package:flutter/material.dart';

void main() {
   
   
  runApp(MyApp());
}

class MyApp extends