Flutter使用UniqueKey仍触发「多个组件共用相同GlobalKey」报错原因？

问题根源 #

你遇到的报错和key为null的问题来自两个核心错误：

1. 自定义Section组件的key没有正确传递给Flutter框架，框架识别不到你自定义的key属性，所以所有Section组件的key都显示为null
2. ReorderableListView要求所有子组件必须携带唯一key，你循环复用了同一个添加按钮实例，同一个组件的key固定，多次加入列表必然触发key重复报错

修复步骤 #

1. 修正Section组件的key传递逻辑 #

Flutter Widget基类已内置key属性，你在子类中单独声明的key不会被框架识别，必须通过构造函数传递给父类：

class Section extends StatefulWidget {
  final String title;
  // 新增全局唯一的固定ID，不会随重排修改index变化，更适合做key的取值
  final int uniqueId;
  late int index;
  bool selected = false;

  Section({
    super.key, // 必须调用super.key，框架才能识别到组件key
    required this.title,
    required this.index,
    required this.uniqueId,
  });
  
  @override
  SectionState createState() => SectionState();

  void deselect() {
    selected = false;
  }
}

推荐用uniqueId构造ValueKey替代UniqueKey，UniqueKey每次实例化都会生成新值，页面重建/热重载时会丢失组件状态，而基于固定唯一值的ValueKey更稳定

2. 修复添加按钮重复复用的问题 #

不要复用同一个按钮实例，改为每次循环生成新的按钮实例，同时保证每个按钮的key唯一：
首先把添加按钮的声明改为函数，每次调用返回新实例：

Widget buildAddSectionButton(int uniqueSuffix) {
  return Padding(
    // 每个按钮的key用唯一后缀区分
    key: Key("__ADD_SECTION_BUTTON_KEY__$uniqueSuffix"),
    padding: const EdgeInsets.fromLTRB(0, 20, 0, 0),
    child: InkWell(
      onTap: () => setState(() {
        sections.add(Section(
          uniqueId: newKeyConcatter,
          index: sections.length,
          title: "New Section $newKeyConcatter",
        ));
        newKeyConcatter++;
      }),
      child: Container(
        height: 90,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(16), 
          border: Border.all(color: Theme.of(context).primaryColor, width: 2),
        ),
        child: Center(
          child: Icon(Icons.add, color: Theme.of(context).primaryColor, size: 40,),
        ),
      ),
    ),
  );
}

然后修改列表构建逻辑：

List<Widget> sectionsToBeDisplayed = [];
for (var actualSection in sections) {
  sectionsToBeDisplayed.add(actualSection);
  // 每次生成新的按钮实例，用当前Section的uniqueId作为key后缀
  sectionsToBeDisplayed.add(buildAddSectionButton(actualSection.uniqueId));
}

3. 修正初始Section的传参 #

初始化第一个Section时传入uniqueId：

List<Section> sections = [Section(uniqueId: 0, index: 0, title: "First Section")];
int newKeyConcatter = 1;

如果你坚持要用UniqueKey不需要固定唯一值，可以把Section构造函数改成下面的写法，不需要新增uniqueId参数：

Section({
  Key? key,
  required this.title,
  required this.index,
}) : super(key: key ?? UniqueKey());

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