Flutter ReorderableListView.builder 选中拖拽元素的样式修改方法

方案1：使用proxyDecorator参数（官方推荐，仅修改拖拽悬浮元素） #

proxyDecorator是ReorderableListView内置的专门用于定制拖拽过程中悬浮元素样式的参数，无需额外维护状态，性能最优，适合仅需要修改拖拽时悬浮元素样式的场景。

示例代码：

ReorderableListView.builder(
  itemCount: yourDataList.length,
  // 列表项正常状态样式
  itemBuilder: (context, index) {
    return Container(
      key: ValueKey(yourDataList[index]), // 必须设置唯一Key
      decoration: BoxDecoration(
        border: Border.all(color: Colors.grey, width: 1),
        borderRadius: BorderRadius.circular(8),
      ),
      child: const ListTile(title: Text('列表项')),
    );
  },
  // 核心：定制拖拽悬浮元素样式
  proxyDecorator: (child, index, animation) {
    return Container(
      decoration: BoxDecoration(
        border: Border.all(color: Colors.blueAccent, width: 2), // 拖拽时边框改为蓝色加粗
        borderRadius: BorderRadius.circular(8),
        boxShadow: const [BoxShadow(color: Colors.black12, blurRadius: 8, spreadRadius: 2)], // 加阴影增强拖拽感
      ),
      // 配合拖拽动画加缩放效果
      child: ScaleTransition(
        scale: Tween<double>(begin: 1, end: 1.05).animate(animation),
        child: child,
      ),
    );
  },
  onReorder: (oldIndex, newIndex) {
    // 标准重排序逻辑
    if (newIndex > oldIndex) newIndex--;
    final item = yourDataList.removeAt(oldIndex);
    yourDataList.insert(newIndex, item);
  },
)

方案2：跟踪拖拽索引（可同时修改原位置列表项样式） #

如果需要拖拽过程中，原位置的列表项也同步显示特殊样式（比如半透、占位提示），可以配合onReorderStart、onReorderEnd回调维护拖拽状态：

• 定义状态变量存储当前正在拖拽的元素索引
• 拖拽开始时记录索引，拖拽结束时清空索引
• 列表项构建时根据拖拽状态动态修改样式

示例代码：

// State类中定义状态
int? _draggingIndex;

@override
Widget build(BuildContext context) {
  return ReorderableListView.builder(
    itemCount: yourDataList.length,
    // 拖拽开始时记录当前拖拽索引
    onReorderStart: (index) => setState(() => _draggingIndex = index),
    // 拖拽结束时清空状态
    onReorderEnd: (_) => setState(() => _draggingIndex = null),
    itemBuilder: (context, index) {
      final isCurrentDragging = index == _draggingIndex;
      return Container(
        key: ValueKey(yourDataList[index]),
        decoration: BoxDecoration(
          border: Border.all(
            color: isCurrentDragging ? Colors.blueAccent : Colors.grey,
            width: isCurrentDragging ? 2 : 1,
          ),
          borderRadius: BorderRadius.circular(8),
          color: isCurrentDragging ? Colors.grey.shade100 : Colors.white,
        ),
        child: const ListTile(title: Text('列表项')),
      );
    },
    // 可同时搭配proxyDecorator修改悬浮元素样式
    proxyDecorator: (child, index, animation) {
      // 悬浮元素样式逻辑和方案1一致
    },
    onReorder: (oldIndex, newIndex) {
      // 重排序逻辑
      if (newIndex > oldIndex) newIndex--;
      final item = yourDataList.removeAt(oldIndex);
      yourDataList.insert(newIndex, item);
    },
  );
}

注意事项 #

• 所有列表项必须设置唯一的Key，否则重排序逻辑会出现异常
• proxyDecorator仅修改拖拽时悬浮的元素样式，原位置的列表项样式需要通过状态跟踪单独修改
• 仅需要修改悬浮元素样式时优先使用方案1，无需额外触发页面重绘，性能更好

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