Flutter 拖拽组件 Draggable 与 DragTarget 基本使用方法详解

2023-12-16 00:23:17

96 图解 Draggable + DragTarget 基本拖拽效果

在 Flutter 中，拖拽功能是通过 Draggable 和 DragTarget 两个小部件实现的。Draggable 小部件允许用户拖动一个可视元素，而 DragTarget 小部件则定义了可视元素的放置位置。

一、Draggable 小部件

创建 Draggable 小部件

Draggable(
  child: Container(
    color: Colors.blue,
    height: 100,
    width: 100,
  ),
  feedback: Container(
    color: Colors.green,
    height: 100,
    width: 100,
  ),
);

child 参数指定了可视元素。
feedback 参数指定了拖动时的反馈元素。

Draggable 小部件的属性

child ：可视元素。
feedback ：拖动时的反馈元素。
onDragStarted ：拖动开始时的回调函数。
onDragEnd ：拖动结束时的回调函数。

二、DragTarget 小部件

创建 DragTarget 小部件

DragTarget(
  builder: (context, candidateData, rejectedData) {
    return Container(
      color: Colors.red,
      height: 100,
      width: 100,
    );
  },
  onWillAccept: (data) {
    return true;
  },
  onAccept: (data) {
    // 处理拖动元素被放置到目标位置的逻辑。
  },
);