Flutter组件未更新：删除行后Checkbox值显示异常问题

问题现象 #

删除列表条目后，剩余条目的Checkbox会显示被删除条目的选中状态，但Text组件的名称显示正常。比如有2个条目时，删除第一个条目，剩下的条目移到第一行，Checkbox却保留了原来第一个条目的选中值。

问题代码片段 #

...mountPoints.map((mp) {
  return TableRow(children: <Widget>[
    const Padding(
        padding: EdgeInsets.fromLTRB(4, 0, 8, 0),
        child: Icon(Icons.computer_outlined)),
    Text(mp.name,
        textAlign: TextAlign.left,
        overflow: TextOverflow.ellipsis),
    CheckboxFormField(
        initialValue: mp.sendPosition,
        onSaved: (bool? value) =>
            mp.sendPosition = value ?? false),
    Padding(
        padding: const EdgeInsets.only(right: 4),
        child: ElevatedButton(
          onPressed: () => setState(() {
            mountPoints.remove(mp);
          }),
          style: ElevatedButton.styleFrom(
              backgroundColor: Colors.red),
          child: const Icon(Icons.delete),
        ))
  ]);
})

补充说明 #

使用的CheckboxFormField继承自Flutter的FormField（StatefulWidget），完整代码如下：

class CheckboxFormField extends FormField<bool> {
  CheckboxFormField(
      {Key? key,
      Widget? title,
      FormFieldSetter<bool>? onSaved,
      FormFieldValidator<bool>? validator,
      bool initialValue = false,
      bool autovalidate = false})
      : super(
            key: key,
            onSaved: onSaved,
            validator: validator,
            initialValue: initialValue,
            builder: (FormFieldState<bool> state) {
              return CheckboxListTile(
                dense: state.hasError,
                title: title,
                value: state.value,
                onChanged: state.didChange,
                subtitle: state.hasError
                    ? Builder(
                        builder: (BuildContext context) => Text(
                          state.errorText!,
                          style: TextStyle(color: Theme.of(context).errorColor),
                        ),
                      )
                    : null,
                controlAffinity: ListTileControlAffinity.leading,
              );
            });
}

解决方案 #

问题根源是Flutter的组件状态复用机制：当列表项通过map生成且未指定唯一Key时，Flutter会根据组件在列表中的位置来复用State。删除第一个条目后，原来第二个条目的位置变成第一个，Flutter会把原来第一个组件的State复用过来，导致Checkbox显示旧的状态，而Text是无状态组件会重新渲染，所以显示正常。

解决方法很简单：给每个TableRow或CheckboxFormField添加基于数据唯一标识的Key，确保Flutter能正确识别每个列表项，而不是仅靠位置判断。

修改后的代码示例 #

假设你的mountPoints中的每个对象mp有唯一的id属性（如果没有，可以用name或者其他不会重复的属性）：

...mountPoints.map((mp) {
  return TableRow(
    key: Key(mp.id), // 添加唯一Key
    children: <Widget>[
      const Padding(
          padding: EdgeInsets.fromLTRB(4, 0, 8, 0),
          child: Icon(Icons.computer_outlined)),
      Text(mp.name,
          textAlign: TextAlign.left,
          overflow: TextOverflow.ellipsis),
      CheckboxFormField(
          key: Key('checkbox_${mp.id}'), // 也可以给Checkbox单独加Key，二选一即可
          initialValue: mp.sendPosition,
          onSaved: (bool? value) =>
              mp.sendPosition = value ?? false),
      Padding(
          padding: const EdgeInsets.only(right: 4),
          child: ElevatedButton(
            onPressed: () => setState(() {
              mountPoints.remove(mp);
            }),
            style: ElevatedButton.styleFrom(
                backgroundColor: Colors.red),
            child: const Icon(Icons.delete),
          ))
    ],
  );
})

额外说明 #

如果你的mountPoints对象没有唯一标识，也可以用ObjectKey(mp)作为Key，只要每个mp是不同的实例即可，但推荐使用稳定的唯一标识（比如数据库ID），避免因实例重建导致的Key变化。

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