如何在Flutter的ListView.builder中为每个TextField设置独立控制器

实现方法 #

你可以通过维护一个TextEditingController列表的方式，和动态新增的TextField一一对应，具体步骤如下：

1. 定义状态变量 #

在当前页面的State类中声明控制器列表和计数变量：

int categoryCount = 1; // 初始默认数量可自行调整
List<TextEditingController> controllerList = [];

2. 初始化控制器 #

在initState生命周期中初始化对应数量的控制器：

@override
void initState() {
  super.initState();
  // 初始时给对应数量的TextField生成控制器
  for (int i = 0; i < categoryCount; i++) {
    controllerList.add(TextEditingController());
  }
}

3. 新增TextField时同步新增控制器 #

在你点击新增按钮的触发方法中，除了修改categoryCount，还要同步往控制器列表添加新的实例：

void addNewTextField() {
  setState(() {
    categoryCount++;
    controllerList.add(TextEditingController());
  });
}

4. 给ListView.builder中的TextField绑定控制器 #

直接通过索引从控制器列表中取对应实例即可：

ListView.builder(
    physics: NeverScrollableScrollPhysics(),
    shrinkWrap: true,
    itemCount: categoryCount,
    itemBuilder: (context, index) {
      return TextField(
        controller: controllerList[index], // 绑定对应索引的控制器
        decoration: InputDecoration(
          hintText: 'Amount',
          border: InputBorder.none,
          focusedBorder: InputBorder.none,
          enabledBorder: InputBorder.none,
          errorBorder: InputBorder.none,
          disabledBorder: InputBorder.none,
        ),
      );
    });

5. 页面销毁时释放所有控制器 #

一定要做这一步，避免内存泄漏：

@override
void dispose() {
  // 遍历释放所有控制器
  for (var controller in controllerList) {
    controller.dispose();
  }
  super.dispose();
}

后续需要获取某个TextField的输入内容，直接用controllerList[index].text即可读取或赋值。
如果需要实现删除单个TextField的功能，也要同步删除controllerList对应索引的控制器并调用其dispose方法释放资源。

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