咨询：如何用Draggable/DraggableTarget实现自定义拖拽排序Text Widget列表？

用Draggable+DragTarget完全可以实现高度定制的拖拽排序效果，比ReorderableListView更灵活，能完全匹配你的视觉原型。下面是具体实现步骤和代码示例：

核心逻辑 #

维护一个可修改的文本数据源，每个列表项同时作为拖拽源（Draggable）和目标接收区（DragTarget）。拖拽时通过Draggable的自定义反馈样式展示拖拽中的元素，DragTarget接收拖拽项后，交换数据源中对应元素的位置并刷新UI，同时可添加过渡动画提升视觉效果。

完整实现代码 #

import 'package:flutter/material.dart';

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

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

class _CustomDragSortListState extends State<CustomDragSortList> {
  // 数据源，可替换成你需要的文本内容
  List<String> _textItems = [
    "第一项文本",
    "第二项文本",
    "第三项文本",
    "第四项文本",
    "第五项文本",
  ];
  // 记录当前拖拽的项索引，用于处理高亮和动画
  int? _draggingIndex;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("自定义拖拽排序列表")),
      body: ListView.builder(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        itemCount: _textItems.length,
        itemBuilder: (context, index) {
          // 每个列表项同时是Draggable和DragTarget
          return LongPressDraggable(
            // 唯一标识拖拽项，用索引即可
            data: index,
            // 拖拽时的反馈样式，完全自定义
            feedback: Material(
              elevation: 4,
              borderRadius: BorderRadius.circular(8),
              child: Container(
                width: MediaQuery.of(context).size.width - 32,
                padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
                decoration: BoxDecoration(
                  color: Colors.grey[100],
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Text(
                  _textItems[index],
                  style: const TextStyle(fontSize: 16, color: Colors.black87),
                ),
              ),
            ),
            // 拖拽时原位置的占位样式
            childWhenDragging: Opacity(
              opacity: 0.4,
              child: _buildListItem(_textItems[index], index),
            ),
            onDragStarted: () {
              setState(() => _draggingIndex = index);
            },
            onDragEnd: (_) {
              setState(() => _draggingIndex = null);
            },
            child: DragTarget<int>(
              // 接收拖拽的索引数据
              onAccept: (int draggedIndex) {
                if (draggedIndex != index) {
                  // 交换数据源位置
                  setState(() {
                    final draggedItem = _textItems.removeAt(draggedIndex);
                    _textItems.insert(index, draggedItem);
                  });
                }
              },
              // 拖拽进入目标区域时的样式变化
              builder: (context, candidateData, rejectedData) {
                final isTarget = candidateData.isNotEmpty;
                return AnimatedContainer(
                  duration: const Duration(milliseconds: 150),
                  // 目标区域高亮效果
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8),
                    color: isTarget ? Colors.blue[50] : Colors.white,
                    border: isTarget ? Border.all(color: Colors.blue, width: 1) : null,
                  ),
                  child: _buildListItem(_textItems[index], index),
                );
              },
            ),
          );
        },
      ),
    );
  }

  // 构建自定义的Text列表项样式，可根据你的视觉原型修改
  Widget _buildListItem(String text, int index) {
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
      margin: const EdgeInsets.only(bottom: 8),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
        boxShadow: [
          BoxShadow(
            color: Colors.grey[200]!,
            blurRadius: 2,
            offset: const Offset(0, 1),
          )
        ],
      ),
      child: Row(
        children: [
          // 可添加拖拽图标，比如三条横线
          const Icon(Icons.drag_indicator, color: Colors.grey),
          const SizedBox(width: 12),
          Expanded(
            child: Text(
              text,
              style: const TextStyle(fontSize: 16, color: Colors.black87),
            ),
          ),
        ],
      ),
    );
  }
}

关键细节说明 #

• 拖拽触发方式：示例用LongPressDraggable，如果需要点击即拖拽，换成Draggable即可。
• 样式定制：feedback（拖拽预览）、childWhenDragging（原位置占位）、_buildListItem（正常列表项）都可以完全按照你的视觉原型修改样式，包括背景、阴影、文字样式、图标等。
• 动画优化：用AnimatedContainer实现目标区域的高亮过渡，让拖拽交互更流畅；也可以添加Hero动画或者自定义动画增强效果。
• 数据源扩展：如果你的Text项有更多属性，把List<String>换成自定义模型类即可，逻辑完全通用。

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