如何从Map列表取数据并在ReorderableListView中展示

先搞懂ReorderableListView的Key逻辑 #

ReorderableListView要求每个子组件的Key必须唯一且稳定，组件通过Key识别子项身份，拖拽重排时才能正确追踪位置变化，避免UI状态混乱。原代码用ValueKey(productName)是因为每个String类型的产品名唯一，刚好满足要求。

适配List

假设你的tasks列表中每个Map包含唯一标识（比如id）和展示内容（比如title），直接修改原代码即可，核心是选Map里的唯一字段作为Key，同时调整数据操作逻辑：

// 替换成你的List<Map>数据
final List<Map<String, dynamic>> _tasks = List.generate(100, (index) => {
  'id': 'task_$index', // 唯一标识，必须保证每个item的id不重复
  'title': '任务 ${index.toString()}'
});

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('可拖拽任务列表'),
    ),
    body: ReorderableListView.builder(
        itemCount: _tasks.length,
        itemBuilder: (context, index) {
          final Map<String, dynamic> task = _tasks[index];
          return Card(
            // 用Map里的唯一id作为Key，确保每个子项Key唯一
            key: ValueKey(task['id']),
            color: Colors.amberAccent,
            elevation: 1,
            margin: const EdgeInsets.all(10),
            child: ListTile(
              contentPadding: const EdgeInsets.all(25),
              title: Text(
                task['title'],
                style: const TextStyle(fontSize: 18),
              ),
              trailing: const Icon(Icons.drag_handle),
              onTap: () {/* 点击逻辑 */},
            ),
          );
        },
        onReorder: (oldIndex, newIndex) {
          setState(() {
            // 重排逻辑和原代码一致，只是操作的是Map元素
            if (newIndex > oldIndex) {
              newIndex = newIndex - 1;
            }
            final element = _tasks.removeAt(oldIndex);
            _tasks.insert(newIndex, element);
          });
        }),
  );
}

关键注意点 #

• 作为Key的字段（比如id）必须在列表中唯一，不能重复，否则拖拽时会出现UI异常。
• 不要用列表索引index作为Key，拖拽后索引会变化，导致Key不稳定，引发组件重建问题。如果没有现成的唯一字段，可以手动生成（比如用uuid库生成唯一ID）。

内容的提问来源于stack exchange，提问作者Asma'a Alndhari