Getx中TextFormField列表删除时UI更新异常问题求助

核心是ListView.builder的组件复用机制加上TextFormField的状态未与数据正确绑定：

• ListView.builder为了优化性能，会复用已创建的列表项组件。当数据列表更新时，它不会重新创建所有条目，而是调整现有组件的位置并更新对应数据。
• TextFormField是有状态组件，它的输入内容、焦点等状态会和组件实例绑定。如果不给列表项指定唯一标识（key），复用组件时旧的状态会被错误附加到新位置的条目上，导致视觉上看起来删除了最后一个条目，但实际数据已经正确更新。
• 右侧的ListTile是无状态组件，没有自身维护的状态，数据更新时会直接刷新UI，因此不会出现异常。

1. 给列表项添加唯一Key（首选方案） #

通过给每个列表项设置唯一Key，让ListView.builder能准确区分不同条目，避免状态复用错误：

• 推荐使用基于数据唯一标识的ValueKey（数据不变时Key也不变，性能更优）；如果数据没有唯一ID，也可以用UniqueKey（每次重建条目都会生成新Key）。

修改左侧列表的条目构建代码：

ListView.builder(
  itemCount: controller.textItems.length,
  itemBuilder: (context, index) {
    final item = controller.textItems[index];
    // 给容器添加基于item内容的唯一Key
    return Container(
      key: ValueKey(item),
      child: Row(
        children: [
          Expanded(
            child: TextFormField(
              initialValue: item,
            ),
          ),
          IconButton(
            icon: const Icon(Icons.delete),
            onPressed: () => controller.removeTextItem(index),
          ),
        ],
      ),
    );
  },
)

2. 绑定独立的TextEditingController（进阶优化） #

如果需要TextFormField的输入内容实时同步到数据列表，建议给每个条目绑定独立的TextEditingController，并在删除时销毁对应控制器，避免内存泄漏：

// Getx Controller代码
class MyController extends GetxController {
  final RxList<String> textItems = ['Item 1', 'Item 2', 'Item 3'].obs;
  final RxList<TextEditingController> controllers = RxList();

  @override
  void onInit() {
    super.onInit();
    // 初始化控制器列表
    textItems.forEach((item) {
      controllers.add(TextEditingController(text: item));
    });
  }

  void removeTextItem(int index) {
    // 先销毁对应控制器再移除
    controllers[index].dispose();
    controllers.removeAt(index);
    textItems.removeAt(index);
  }

  // 同步输入内容到数据列表
  void syncText(int index, String value) {
    textItems[index] = value;
  }

  @override
  void onClose() {
    // 销毁所有控制器
    for (var c in controllers) c.dispose();
    super.onClose();
  }
}

// 列表项构建代码
return Container(
  key: ValueKey(textItems[index]),
  child: Row(
    children: [
      Expanded(
        child: TextFormField(
          controller: controllers[index],
          onChanged: (value) => controller.syncText(index, value),
        ),
      ),
      IconButton(
        icon: const Icon(Icons.delete),
        onPressed: () => controller.removeTextItem(index),
      ),
    ],
  ),
);

3. 禁用组件复用（不推荐，仅适合小列表） #

可以强制ListView.builder不复用组件，但会降低列表性能，只适合条目数量极少的场景：

ListView.builder(
  itemCount: controller.textItems.length,
  addAutomaticKeepAlives: false,
  addRepaintBoundaries: false,
  itemBuilder: (context, index) {
    // 原有条目构建代码
  },
)

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