Flutter中点击按钮如何获取动态FormFieldWidget的输入值

你当前代码的核心问题是所有TextFormField共用了同一个TextEditingController，这会导致输入内容互相覆盖，根本没法单独获取每个工人对应的工资输入值。下面是具体的解决步骤：

步骤1：定义控制器列表替代单个控制器 #

在你的State类里，把单个控制器改成一个列表，用来存储每个输入框对应的控制器：

List<TextEditingController> _wagesControllers = [];

步骤2：在获取数据后初始化控制器列表 #

当FutureBuilder拿到数据后，根据数据长度初始化控制器列表，同时清理旧控制器避免内存泄漏：

if (snapshot.hasData) {
  var data = snapshot.data['hamal'];
  // 先清理旧控制器
  for (var controller in _wagesControllers) {
    controller.dispose();
  }
  // 初始化新的控制器列表，长度和数据一致
  _wagesControllers = List.generate(data.length, (index) => TextEditingController());
  return ListView.builder(
    itemCount: data.length,
    physics: const NeverScrollableScrollPhysics(),
    shrinkWrap: true,
    itemBuilder: (BuildContext context, int index) {
      return Card(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(children: [
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                const SizedBox(width: 10, height: 50),
                const Icon(FeatherIcons.user),
                const SizedBox(width: 20),
                Text(
                  data[index]['worker_name'],
                  style: const TextStyle(fontSize: 18),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                SizedBox(
                  width: 150,
                  height: 50,
                  child: TextFormField(
                    cursorHeight: 25,
                    // 使用列表中对应index的控制器
                    controller: _wagesControllers[index],
                    decoration: const InputDecoration(
                      border: OutlineInputBorder(),
                      hintText: "Wages",
                      prefixIcon: Icon(Icons.wallet, color: Colors.blue),
                    ),
                  ),
                ),
              ],
            )
          ]),
        ),
      );
    },
  );
}

步骤3：添加按钮并实现批量获取值的逻辑 #

在页面合适位置（比如FutureBuilder外侧）添加按钮，点击时遍历控制器列表获取所有输入值：

ElevatedButton(
  onPressed: () {
    if (_wagesControllers.isEmpty) return;
    // 遍历控制器列表，获取每个输入框的值
    for (int i = 0; i < _wagesControllers.length; i++) {
      String workerName = snapshot.data['hamal'][i]['worker_name'];
      String wages = _wagesControllers[i].text;
      print("$workerName 的工资：$wages");
      // 这里可以将数据收集后提交到服务器或做其他处理
    }
  },
  child: const Text("获取所有工资输入值"),
)

步骤4：清理控制器避免内存泄漏 #

在State类的dispose方法里，销毁所有控制器：

@override
void dispose() {
  for (var controller in _wagesControllers) {
    controller.dispose();
  }
  super.dispose();
}

这样修改后，每个输入框都有独立的控制器，点击按钮就能准确获取每个工人对应的工资输入值了。

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