如何为复制的TextFormField动态分配独立的TextEditingController？

当前场景是用ListView.builder渲染包含3个TextFormField的Container，通过List.generate创建控制器列表绑定字段。点击「Duplicate Above」按钮复制容器后，新生成的字段会和原字段共享控制器，导致内容同步显示。

核心思路 #

问题根源是复用了同一个TextEditingController实例，解决关键是给每个新生成的容器组创建独立的控制器，同时复制原组的文本内容。

具体实现步骤 #

1. 调整控制器存储结构
   用二维列表存储每组容器的控制器，每组对应一个容器内的3个字段：

   List<List<TextEditingController>> formGroups = [];
   

2. 初始化第一组控制器
   在initState中添加初始的控制器组：

   @override
   void initState() {
     super.initState();
     // 初始化第一组3个空控制器
     formGroups.add(List.generate(3, (_) => TextEditingController()));
   }
   

3. 实现复制逻辑
   点击按钮时，复制最后一组控制器的文本内容，创建全新的控制器组并添加到列表：

   void duplicateAbove() {
     final lastGroup = formGroups.last;
     // 为新组创建独立控制器，复制原组文本
     final newGroup = lastGroup.map((ctrl) => TextEditingController(text: ctrl.text)).toList();
     setState(() => formGroups.add(newGroup));
   }
   

4. 渲染列表与字段
   在ListView.builder中遍历控制器组，每个组对应一个容器，字段绑定组内的独立控制器：

   ListView.builder(
     itemCount: formGroups.length,
     itemBuilder: (context, groupIdx) {
       final groupCtrls = formGroups[groupIdx];
       return Container(
         margin: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
         padding: const EdgeInsets.all(12),
         decoration: BoxDecoration(border: Border.all(color: Colors.grey)),
         child: Column(
           children: [
             TextFormField(
               controller: groupCtrls[0],
               decoration: const InputDecoration(hintText: '字段1'),
             ),
             const SizedBox(height: 8),
             TextFormField(
               controller: groupCtrls[1],
               decoration: const InputDecoration(hintText: '字段2'),
             ),
             const SizedBox(height: 8),
             TextFormField(
               controller: groupCtrls[2],
               decoration: const InputDecoration(hintText: '字段3'),
             ),
             if (groupIdx == formGroups.length - 1)
               ElevatedButton(
                 onPressed: duplicateAbove,
                 child: const Text('Duplicate Above'),
               ),
           ],
         ),
       );
     },
   )
   

5. 销毁控制器避免内存泄漏
   在dispose方法中遍历所有控制器并销毁：

   @override
   void dispose() {
     for (var group in formGroups) {
       for (var ctrl in group) ctrl.dispose();
     }
     super.dispose();
   }
   

效果说明 #

修改后，每个复制出来的容器都拥有独立的控制器实例，仅复制原容器的文本内容，后续修改新字段的内容不会影响原字段，彻底解决共享控制器的问题。

内容的提问来源于stack exchange，提问作者Mr.Robot