示例：跨列表拖拽排序

这个示例包含两个列表，用户可以在它们之间拖拽项目。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Drag and Drop',
      home: DragAndDropDemo(),
    );
  }
}

class DragAndDropDemo extends StatefulWidget {
  @override
  _DragAndDropDemoState createState() => _DragAndDropDemoState();
}

class _DragAndDropDemoState extends State<DragAndDropDemo> {
  List<String> listA = ["Item A1", "Item A2", "Item A3"];
  List<String> listB = ["Item B1", "Item B2", "Item B3"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Drag and Drop Between Lists'),
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          buildDragTarget("List A", listA, (item) {
            setState(() {
              listA.add(item);
            });
          }),
          buildDragTarget("List B", listB, (item) {
            setState(() {
              listB.add(item);
            });
          }),
        ],
      ),
    );
  }

  Widget buildDragTarget(String title, List<String> items, Function(String) onAccept) {
    return Container(
      width: 150,
      height: 400,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.black),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Column(
        children: [
          Text(title, style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
          Expanded(
            child: ListView(
              children: items.map((item) {
                return Draggable<String>(
                  data: item,
                  child: ListTile(
                    title: Text(item),
                  ),
                  feedback: Material(
                    child: Container(
                      padding: EdgeInsets.all(8),
                      color: Colors.blueAccent,
                      child: Text(item, style: TextStyle(color: Colors.white)),
                    ),
                  ),
                  childWhenDragging: Container(),
                );
              }).toList(),
            ),
          ),
          DragTarget<String>(
            onAccept: onAccept,
            builder: (context, candidateData, rejectedData) {
              return Container(
                height: 50,
                color: Colors.grey[300],
                child: Center(child: Text('Drop Here')),
              );
            },
          ),
        ],
      ),
    );
  }
}

代码说明

1. 主函数和 MyApp：应用程序的入口，使用 MaterialApp 包裹主页面 DragAndDropDemo。
2. DragAndDropDemo：这是一个状态ful组件，包含两个字符串列表 listA 和 listB，分别表示两个可拖拽的列表。
3. buildDragTarget：这是一个构建每个拖拽目标的方法。它接受标题、项目列表和一个 onAccept 回调函数。Draggable：每个列表项都是一个 Draggable 组件，允许用户拖动它。data 属性设置为要拖动的字符串。feedback：在拖动时显示的内容。childWhenDragging：拖动时显示的占位内容。DragTarget：用于接收拖动的项目。当拖动的项目被放置到目标区域时，调用 onAccept 回调。
4. UI布局：使用 Row 来水平排列两个列表，每个列表都有一个标题和一个可拖拽的项目列表。