Flutter中ReorderableListView在模拟器无法拖拽排序问题求助

核心修复步骤 #

• 实现onReorder的状态更新逻辑
  你的代码里onReorder回调是空的，没有实际更新列表顺序的状态。Chrome浏览器存在调试兼容行为，但模拟器必须通过状态更新触发UI重排，才能完成拖拽排序的交互反馈。

  修改onReorder方法，调整列表项的key顺序并调用setState：

  onReorder: (oldIndex, newIndex) {
    setState(() {
      if (newIndex > oldIndex) {
        newIndex -= 1;
      }
      final item = keys.removeAt(oldIndex);
      keys.insert(newIndex, item);
    });
  },
  

• 确认模拟器的拖拽操作方式
  在模拟器中需要长按列表项，待出现拖拽反馈后再拖动，这是移动端拖拽组件的标准交互逻辑，不要直接点击拖动。

修改后的完整代码 #

class _MyMainAppState extends State<MyMainApp>{
  late List<ValueKey> keys;

  @override
  void initState(){
    super.initState();
    keys = List.generate(10, (index) => ValueKey(index));
  }

  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: const Text('reorder list'),
      ),
      body: ReorderableListView(
        onReorder: (oldIndex, newIndex) {
          setState(() {
            if (newIndex > oldIndex) {
              newIndex -= 1;
            }
            final item = keys.removeAt(oldIndex);
            keys.insert(newIndex, item);
          });
        },
        children: List.generate(
          10,
              (index)=> ListTile(
            key: keys[index],
            title: Text("Name $index"),
            leading: const CircleAvatar(child: Icon(Icons.person)),
          ),
        ),
      ),
    );
  }
}

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