Flutter DragTarget Widget使用详解

Flutter中的DragTarget Widget是一个可以接收拖拽操作的Widget。当一个可拖拽的Widget被拖拽到一个DragTarget Widget的范围内时，DragTarget Widget会调用onWillAccept回调函数来检查是否允许拖拽操作，如果允许，则会调用onAccept回调函数来执行相应的操作。

DragTarget Widget有以下属性：

• onWillAccept: 当一个可拖拽的Widget被拖拽到DragTarget Widget的范围内时要执行的回调函数，用于检查是否允许拖拽操作。如果返回true，则允许拖拽操作，如果返回false，则不允许拖拽操作。
• onAccept: 当一个可拖拽的Widget被拖拽到DragTarget Widget的范围内并且允许拖拽操作时要执行的回调函数，可以在回调函数中更新UI或执行其他操作。
• builder: 一个返回Widget的回调函数，用于构建DragTarget Widget的子Widget。

下面是一个使用DragTarget Widget的例子：

List<String> items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];

List<String> acceptedItems = [];

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('DragTarget Example'),
    ),
    body: Row(
      children: [
        Expanded(
          child: ListView.builder(
            itemCount: items.length,
            itemBuilder: (context, index) {
              return Draggable(
                data: items[index],
                child: ListTile(
                  title: Text(items[index]),
                ),
                feedback: ListTile(
                  title: Text(items[index]),
                  tileColor: Colors.grey[300],
                ),
                childWhenDragging: ListTile(
                  title: Text(items[index]),
                  opacity: 0.5,
                ),
              );
            },
          ),
        ),
        Expanded(
          child: DragTarget(
            onWillAccept: (data) {
              return true;
            },
            onAccept: (data) {
              setState(() {
                items.remove(data);
                acceptedItems.add(data);
              });
            },
            builder: (context, candidateData, rejectedData) {
              return ListView.builder(
                itemCount: acceptedItems.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(acceptedItems[index]),
                  );
                },
              );
            },
          ),
        ),
      ],
    ),
  );
}

在这个例子中，我们使用了Draggable Widget来创建一个可以拖拽的子Widget，并将每个子Widget都包装在一个Draggable Widget中。当子Widget被拖拽时，我们将其数据data设置为子Widget的文本值。

我们还创建了一个DragTarget Widget来接收拖拽操作，并在接收到拖拽操作时将数据添加到acceptedItems列表中。我们使用了builder回调函数来构建DragTarget Widget的子Widget，将acceptedItems列表中的每个数据都显示为一个列表项。

请注意，我们使用setState函数来更新UI。在onAccept回调函数中更新UI时，必须使用setState函数来通知Flutter框架进行重绘。如果没有使用setState函数，UI将不会更新。