ReorderableListView.builder用提取Widget作为列表项时报缺少key错误怎么办

错误根源 #

ReorderableListView要求自身的直接子组件必须携带Key，报错是因为Key的绑定层级错误：

• 调用MethodList时直接返回带ValueKey(user)的ListTile，ListTile是ReorderableListView的直接子节点，符合校验规则所以运行正常
• 封装的WidgetList本身是ReorderableListView的直接子节点，但你实例化WidgetList时没有给它传入Key，你把Key写在了WidgetList内部的ListTile上，这个内部Key对ReorderableListView不可见，因此触发报错。

修复方法 #

只需要在实例化WidgetList时，给作为直接子节点的WidgetList传入对应Key即可，修改itemBuilder内的代码：

itemBuilder: (context, index) {
  final user = userList[index];
  // 给直接子组件WidgetList传入key
  return WidgetList(key: ValueKey(user), user: user);
}

可选优化 #

已经给外层WidgetList绑定Key后，内部ListTile的Key可以删除，避免无意义的重复绑定，优化后的WidgetList代码如下：

class WidgetList extends StatelessWidget {
  final User user;
  const WidgetList({Key? key, required this.user}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(user.firstName),
    );
  }
}

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