Flutter 自带拖拽组件DragTarget、LongPressDraggable使用

先看实现效果：

理解使用方法：

Draggable

Draggable 是一个可以被拖动的组件。它的主要功能是让用户通过拖动手势移动组件，并在拖动过程中触发回调。

主要属性

• child: 正常显示的组件。
• feedback: 当拖动时显示的组件（通常是一个类似 child 的 Widget，但可以是不同的）。
• onDragStarted: 开始拖动时的回调。
• onDragEnd: 拖动结束时的回调，包含拖动结束的位置。
• data: 传递给 DragTarget 的数据。
• childWhenDragging: 拖动时替代 child 显示的组件
• maxSimultaneousDrags: 限制同时允许的拖动数量。
• axis: 限制拖动方向（水平或垂直）。

DragTarget

DragTarget 是一个可以接收 Draggable 数据的组件。它的主要功能是定义一个区域，在 Draggable 被释放时接收数据并触发回调。

主要属性

• onWillAccept: 当拖动目标进入该区域时调用，返回 true 表示接受，false 表示拒绝。
• onAccept: 当拖动目标在该区域释放时调用，并接收 Draggable 的 data。
• onLeave: 当拖动目标离开该区域时调用。
• builder: 构建函数，根据拖动目标的状态更新 UI。

类型: `Widget Function(BuildContext, List<Object?>, List<dynamic>)`
   `context`: 构建上下文。
   `candidateData`: 当前被拖动并且可能被接收的数据列表（符合 `onWillAccept` 的数据）。
   `rejectedData`: 当前被拖动但不符合接收条件的数据列表（未通过 `onWillAccept` 的数据）。

上代码：

DragTarget<PicModel>(
  onWillAccept: (data) {
    final accept = data != null;
    if (accept) {
      onDragOver(item);
    }
    return accept;
  },
  onAccept: (data) {
    // 调用接口排序方法
  },
  onLeave: (data) {
    onDragLeave();
  },
  builder: (context, candidateData, rejectedData) {
    return LongPressDraggable(
      data: item,
      maxSimultaneousDrags: 1,
      feedback: _buildItem(item, size: 5),
      onDragStarted: () {
        onDragStart(item);
      },
      onDragEnd: (details) {
        onDragEnd();
      },
      childWhenDragging: Opacity(
        opacity: 0.4,
        child: _buildItem(item),
      ),
      child: _buildItem(item),,
    );
  },
)

剩下的就是根据需求实现排序算法的实现。

源代码地址