Flutter多同类型输入组件键值优化：解决旧值残留与焦点丢失

问题根源 #

• 使用UniqueKey()时，每次父组件setState都会生成新的键，导致子组件被强制重建，TextField因此失去焦点；
• 不使用Key时，Flutter会根据组件在列表中的位置复用状态，删除第一个子组件后，后续组件会前移并复用已销毁组件的状态，从而显示旧值。

正确的键策略 #

采用与数据绑定的稳定键，确保子组件未被销毁时键保持不变，只有当数据项被删除时，对应的键才会消失。具体步骤：

1. 为数据模型添加唯一标识 #

给stateList中的数据项添加一个唯一ID字段，作为键的来源：

class InputItem {
  final String id; // 唯一标识，初始化时生成
  String text;

  InputItem({required this.id, required this.text});
}

初始化列表时，为每个项生成唯一ID（可使用uuid库，或手动生成唯一字符串）：

import 'package:uuid/uuid.dart';

final _uuid = Uuid();
List<InputItem> stateList = [
  InputItem(id: _uuid.v4(), text: ''),
  InputItem(id: _uuid.v4(), text: ''),
];

2. 父组件替换键的实现 #

将UniqueKey()替换为ValueKey(element.id)，绑定到数据的唯一ID：

class _ParentState extends State<ParentWidget> {
  ...

  @override
  Widget build(BuildContext context) {
    return Column(
      children: stateList
          .mapIndexed((index, element) => ChildWidget(
                key: ValueKey(element.id), // 用数据唯一ID作为稳定键
                input: element,
                onChanged: (text) {
                  setState(() {
                    stateList[index].text = text;
                  });
                },
              ))
          .toList(),
    );
  }
}

3. 子组件修复状态同步问题 #

原子组件仅在initState初始化控制器，无法同步父组件更新后的文本，需添加didUpdateWidget方法：

class _ChildState extends State<ChildWidget> {
  final ctrl = TextEditingController();

  @override
  void initState() {
    super.initState();
    ctrl.text = widget.input.text;
  }

  @override
  void didUpdateWidget(covariant ChildWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    // 父组件传入的文本变化时，同步控制器内容
    if (oldWidget.input.text != widget.input.text) {
      ctrl.text = widget.input.text;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          controller: ctrl,
          onChanged: widget.onChanged,
        ),
        ...
      ],
    );
  }

  @override
  void dispose() {
    ctrl.dispose(); // 销毁控制器避免内存泄漏
    super.dispose();
  }
}

方案有效性说明 #

• ValueKey(element.id)与数据项绑定，只要数据项存在，键就不会改变，setState时子组件不会被强制重建，TextField焦点得以保留；
• 当数据项被删除时，对应的键从列表中移除，Flutter会正确销毁对应的子组件，不会复用其状态，彻底解决旧值残留问题。

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