Flutter TextField删除元素后UI状态异常问题求助

现有一个List<MyModel>列表，每个Model对应界面上的一个TextField。在各TextField中输入1、2、3、4后，删除索引1对应的Model（即显示值为2的TextField），列表已正确删除该元素，但UI上的TextField显示值变为1、2、3，而非预期的1、3、4。推测问题出在Widget树，它维持原有序列仅移除最后一项。尝试给每个TextField添加Key后，UI显示正确，但TextField状态丢失，变为1、null、null。请问如何让Widget树正确反映这些变化？

附TextField显示效果图：

状态管理代码如下：

class SsrTableState extends ChangeNotifier {
  var cells = <TableRow>[];

  removeAt(dynamic cardKey) {
    print(cells.map((e) => e.key).toList());
    print(cardKey);

    cells = cells.where((t) => t.key != cardKey).toList();
   
    print(cells.map((e) => e.key).toList());

    notifyListeners();
  }
}

核心问题分析 #

• 未加Key时：Flutter会根据Widget类型和位置复用原有Widget，删除中间元素后，后续Widget会向前复用旧状态，导致显示错误值。
• 添加Key后状态丢失：因为TextField的状态未与MyModel数据绑定，仅依赖Widget自身状态，Key变化后Widget重建，原有状态被清空。

具体解决步骤 #

1. 将TextField状态与MyModel绑定
   给MyModel添加存储输入值的字段，让数据驱动UI，而非依赖TextField内部状态：

   class MyModel {
     final String id; // 唯一标识，用于生成Key
     String inputValue;
   
     MyModel({required this.id, this.inputValue = ''});
   }
   

2. 重构状态管理逻辑
   不要存储TableRow这类Widget实例，状态管理只负责维护数据列表：

   class SsrTableState extends ChangeNotifier {
     var models = <MyModel>[
       MyModel(id: 'model_1'),
       MyModel(id: 'model_2'),
       MyModel(id: 'model_3'),
       MyModel(id: 'model_4'),
     ];
   
     removeModel(String modelId) {
       models = models.where((m) => m.id != modelId).toList();
       notifyListeners();
     }
   }
   

3. 使用唯一Key并绑定数据构建UI
   遍历数据列表时，给每个TextField（或其父Widget）添加基于Model唯一ID的ValueKey，同时将输入值与Model绑定：

   ListView.builder(
     itemCount: provider.models.length,
     itemBuilder: (context, index) {
       final model = provider.models[index];
       final controller = TextEditingController(text: model.inputValue)
         ..addListener(() {
           // 实时更新Model中的输入值
           model.inputValue = controller.text;
         });
   
       return TextField(
         key: ValueKey(model.id),
         controller: controller,
         decoration: InputDecoration(hintText: "输入内容"),
       );
     },
   )
   

关键注意事项 #

• 禁止在状态管理中存储Widget实例，始终遵循数据驱动UI的原则。
• Key必须基于Model的唯一标识（如id），而非列表索引——索引会随元素删除变化，导致Key失效。
• 确保数据更新后调用notifyListeners()触发UI重建。

内容的提问来源于stack exchange，提问作者نعمان منذر محمود الجميلي