Flutter动态创建TextEditingController后TextField无法输入问题求助

问题根源 #

你遇到的核心问题是每次触发setState时，都会重新创建TextEditingController实例：

• 在build方法里调用_buildSubTextField(TextEditingController())，每次setState（包括TextField的onChanged触发的）都会执行这段代码，生成全新的控制器。
• 旧的控制器被丢弃，新控制器没有保存之前的输入内容，导致输入的字符无法显示。
• 同时affirmationControllers数组会不断添加新的控制器实例，和当前TextField绑定的控制器完全脱节。

修复方案 #

1. 在State类中统一管理控制器列表
   把控制器的创建逻辑从build中移出，在需要添加字段时先创建控制器并加入列表，再触发setState。

2. 修改_buildSubTextField方法
   让它只接收已经初始化好的控制器，不再在调用时临时创建。

3. 添加控制器销毁逻辑
   在组件销毁时，遍历控制器列表调用dispose，避免内存泄漏。

完整代码示例 #

class YourWidgetState extends State<YourWidget> {
  // 初始化控制器列表
  final List<TextEditingController> affirmationControllers = [];

  // 添加新字段的方法
  void _addNewField() {
    final newController = TextEditingController();
    affirmationControllers.add(newController);
    setState(() {});
  }

  Widget _buildSubTextField(TextEditingController fieldController) {
    return TextField(
      onChanged: (value) {
        setState(() {});
      },
      controller: fieldController,
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // 触发添加字段的按钮示例
        ElevatedButton(
          onPressed: _addNewField,
          child: const Text("添加字段"),
        ),
        // 遍历控制器列表生成TextField
        ...affirmationControllers.map((controller) => _buildSubTextField(controller)),
      ],
    );
  }
}

关键说明 #

• 控制器的创建和管理完全由State类控制，不再依赖build方法的执行，确保每个TextField绑定的控制器始终是同一个实例。
• 通过map遍历控制器列表生成TextField，避免在build中临时创建控制器导致的状态丢失问题。

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