Flutter技术需求：实现列表项的点击拖拽排序功能

如果你用的是Flutter，推荐两个靠谱的方案，自带组件和第三方库都能满足需求，还能实现流畅的拖拽动画：

1. 原生组件：ReorderableListView #

Flutter自带的ReorderableListView已经内置了拖拽排序的动画效果，不用额外依赖，上手快：

class DragSortList extends StatefulWidget {
  const DragSortList({super.key});

  @override
  State<DragSortList> createState() => _DragSortListState();
}

class _DragSortListState extends State<DragSortList> {
  final List<String> _items = ['列表项1', '列表项2', '列表项3', '列表项4'];

  void _onReorder(int oldIndex, int newIndex) {
    setState(() {
      if (newIndex > oldIndex) {
        newIndex -= 1;
      }
      final item = _items.removeAt(oldIndex);
      _items.insert(newIndex, item);
    });
  }

  @override
  Widget build(BuildContext context) {
    return ReorderableListView(
      padding: const EdgeInsets.symmetric(horizontal: 40),
      children: <Widget>[
        for (int index = 0; index < _items.length; index++)
          ListTile(
            key: Key('$index'),
            title: Text(_items[index]),
            trailing: const Icon(Icons.drag_handle),
          ),
      ],
      onReorder: _onReorder,
    );
  }
}

拖拽时会自动显示拖拽反馈动画，释放后列表项会平滑过渡到新位置，完全匹配你的需求。

2. 第三方库：flutter_reorderable_list #

如果需要更自定义的动画效果（比如拖拽时缩放、透明度变化），可以用flutter_reorderable_list库，灵活性更高：

先在pubspec.yaml里添加依赖：

dependencies:
  flutter_reorderable_list: ^0.1.5

示例代码（自定义拖拽动画）：

class CustomDragSortList extends StatefulWidget {
  const CustomDragSortList({super.key});

  @override
  State<CustomDragSortList> createState() => _CustomDragSortListState();
}

class _CustomDragSortListState extends State<CustomDragSortList> {
  final List<String> _items = ['自定义项1', '自定义项2', '自定义项3'];

  @override
  Widget build(BuildContext context) {
    return ReorderableList(
      onReorder: (ReorderableListData data) {
        setState(() {
          _items.insert(data.newIndex, _items.removeAt(data.oldIndex));
        });
      },
      child: ListView.builder(
        itemCount: _items.length,
        itemBuilder: (context, index) {
          return ReorderableItem(
            key: Key(_items[index]),
            childBuilder: (context, dragState) {
              final isDragging = dragState == DragState.dragging;
              return AnimatedOpacity(
                opacity: isDragging ? 0.7 : 1.0,
                duration: const Duration(milliseconds: 200),
                child: ListTile(
                  title: Text(_items[index]),
                  trailing: const Icon(Icons.drag_indicator),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

这里通过AnimatedOpacity实现了拖拽时的透明度变化，你还可以结合AnimatedScale实现缩放动画，完全自定义拖拽时的视觉效果。

内容的提问来源于stack exchange，提问作者redDwarf