如何在Flutter的ListView中嵌套TextField并获取各字段提交值

原始代码的问题 #

你当前的代码在ListView.builder的itemBuilder里每次调用都往areaController添加控制器，这会导致重复创建控制器（比如组件重建、滚动时itemBuilder会多次执行），不仅会让控制器数量远超预期，还会造成内存泄漏（未释放的控制器占用资源）。

正确实现方案 #

需要在组件初始化时一次性创建所有控制器，在组件销毁时释放资源，同时在Submit按钮点击时遍历控制器获取输入值。

完整代码示例：

import 'package:flutter/material.dart';

class AreaInputPage extends StatefulWidget {
  const AreaInputPage({super.key});

  @override
  State<AreaInputPage> createState() => _AreaInputPageState();
}

class _AreaInputPageState extends State<AreaInputPage> {
  // 定义控制器列表
  List<TextEditingController> areaController = [];
  // 固定输入框数量
  final int inputCount = 5;

  @override
  void initState() {
    super.initState();
    // 在初始化时一次性创建所有控制器
    for (int i = 0; i < inputCount; i++) {
      areaController.add(TextEditingController());
    }
  }

  @override
  void dispose() {
    // 销毁时逐个释放控制器，避免内存泄漏
    for (var controller in areaController) {
      controller.dispose();
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Area Input')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            // 用ListView.builder创建输入框列表
            Expanded(
              child: ListView.builder(
                shrinkWrap: true,
                itemCount: inputCount,
                itemBuilder: (context, index) {
                  return TextField(
                    controller: areaController[index],
                    keyboardType: TextInputType.number,
                    decoration: InputDecoration(
                      labelText: "Area ${index + 1}", // 给每个输入框加序号，方便区分
                      border: const OutlineInputBorder(),
                      margin: const EdgeInsets.symmetric(vertical: 8),
                    ),
                  );
                },
              ),
            ),
            const SizedBox(height: 30),
            ElevatedButton(
              onPressed: () {
                // 遍历控制器获取每个输入框的值
                List<String> areaValues = [];
                for (var controller in areaController) {
                  areaValues.add(controller.text.trim());
                }

                // 这里可以处理获取到的值，比如打印、提交等
                print("所有Area输入值：$areaValues");
                // 示例：弹窗展示结果
                showDialog(
                  context: context,
                  builder: (context) => AlertDialog(
                    title: const Text('输入结果'),
                    content: Text(areaValues.join('\n')),
                    actions: [
                      TextButton(
                        onPressed: () => Navigator.pop(context),
                        child: const Text('确定'),
                      )
                    ],
                  ),
                );
              },
              child: const Text('Submit'),
            ),
          ],
        ),
      ),
    );
  }
}

关键说明 #

• 控制器初始化：在initState中一次性创建对应数量的控制器，确保每个输入框对应唯一的控制器，避免重复创建。
• 资源释放：在dispose方法中遍历释放所有控制器，防止内存泄漏，这是Flutter中使用TextEditingController的标准做法。
• 获取输入值：点击Submit按钮时，遍历areaController列表，通过controller.text获取每个输入框的内容，可根据需求进行后续处理（如验证、提交到服务器等）。

内容的提问来源于stack exchange，提问作者Ravindra S. Patil