Flutter中为动态创建的TextField分配TextEditingController并取值

1. 重构MyModel类 #

把原来存储Widget的列表换成存储TextEditingController的列表，直接管理每个输入框的控制器，方便后续获取输入值：

class MyModel {
  List<TextEditingController> controllers;
  bool isShow = false;
  MyModel({required this.controllers, required this.isShow});
}

2. 更新DummyController逻辑 #

添加TextField时，不再直接添加Widget，而是创建新的TextEditingController实例并加入对应Day的控制器列表：

class DummyController extends ChangeNotifier {
  List<MyModel> myModelList = [];

  // 初始化时给每个Day创建空的控制器列表
  void initDays(int count) {
    myModelList = List.generate(count, (index) => MyModel(controllers: [], isShow: false));
    notifyListeners();
  }

  void addTextFieldToDay(int index) {
    final newController = TextEditingController();
    myModelList[index].controllers.add(newController);
    notifyListeners();
  }

  // 销毁时释放所有控制器，避免内存泄漏
  @override
  void dispose() {
    for (var model in myModelList) {
      for (var controller in model.controllers) {
        controller.dispose();
      }
    }
    super.dispose();
  }
}

3. 重构UI层代码 #

遍历每个Day的控制器列表，动态生成绑定好控制器的TextField：

ListView.builder(
  itemCount: vm.myModelList.length,
  itemBuilder: (context, dayIndex) {
    return ExpansionTile(
      title: Text('Day ${dayIndex + 1}'),
      children: [
        IconButton(
          onPressed: () {
            vm.addTextFieldToDay(dayIndex);
          },
          icon: const Icon(Icons.add),
        ),
        Container(
          color: Colors.white,
          height: 150,
          child: ListView.builder(
            itemCount: vm.myModelList[dayIndex].controllers.length,
            itemBuilder: (context, fieldIndex) {
              final controller = vm.myModelList[dayIndex].controllers[fieldIndex];
              return TextField(
                controller: controller,
                decoration: InputDecoration(
                  hintText: '输入内容 ${fieldIndex + 1}',
                  border: const OutlineInputBorder(),
                ),
              );
            },
          ),
        ),
        // 示例：获取当前Day下所有输入值
        ElevatedButton(
          onPressed: () {
            final values = vm.myModelList[dayIndex].controllers
                .map((controller) => controller.text)
                .toList();
            print('Day ${dayIndex + 1} 的输入值：$values');
          },
          child: const Text('获取当前Day输入值'),
        ),
      ],
    );
  },
)

4. 获取指定索引的控制器值 #

• 单个输入值：vm.myModelList[dayIndex].controllers[fieldIndex].text
• 某Day所有输入值：通过map遍历该Day的控制器列表，提取每个的text属性
• 所有Day的输入值：嵌套遍历myModelList和每个controllers列表即可

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