如何在 Future Builder 内的 ListView Builder 中为不同的 TextFormFields 创建和访问控制器的值

Question

我正在创建一个编辑产品表单，其中数据从 api 获取并填充到未来构建器中。 从TextFormField 保存新数据时，我需要不同的Controllers。

Product name Product price 和 Product Description 有不同的 TextFields

所以我想说的是，如果有多个产品，就会有多个Product name TextFields，它会有多个控制器。

所以我想要实现的是，如何在单击按钮时在一个 List 中访问不同 Controllers 的值。

假设如果有 4 种不同的产品，例如 Furniture Window Glass Artificial Grass 和Modular kitchen，当用户点击保存按钮时，所有这些值都应该在一个列表中，然后发送到数据库。

这是我尝试过的

var productNameControllers = [];

我已在 Future Builder 中填充此列表并将控制器分配给文本字段

FutureBuilder(
          future: _showData(),
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            if (snapshot.hasData) {
              return ListView.builder(
                  itemCount: snapshot.data.length,
                  itemBuilder: (BuildContext context, int index) {

                    productNameControllers.add(TextEditingController(
                        text: snapshot.data[index].prodSerName.toString()));
                  
                 return Container(
                    child: TextFormField(
                   controller: productNameControllers[index],
                   decoration: InputDecoration(
                    labelText: "Product Name",
                ),
            ),
                 );
});
}
});

这是访问控制器的代码

  _saveEdits() {
    List savedProds = [];
    for (int i = 0; i < productNameControllers.length; i++) {
      savedProds.add(productNameControllers[i].text);
    }
    print(savedProds);
  }

所以问题是，当调用 _saveEdits 方法时，它只访问前两个控制器值而不是所有值，当我将页面滚动到最后一个产品然后调用 _saveEdits 方法时它工作正常，但为什么不滚动到最后一项就不能访问所有值。

我想要的输出

访问所有值 [Furniture, Window glass, Artificial Grass, Modular Kitchen]

我得到的输出

只有前两个值 [Furniture, Window glass]

那么我该如何实现呢。

将 ListView.builder 替换为 Listview 之后

FutureBuilder(
          future: _showData(),
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            if (snapshot.hasData) {
              return ListView(
                  children: snapshot.data.map((val) {
                final int index = snapshot.data.indexOf(val);
                productNameControllers
                    .add(TextEditingController(text: val.prodSerName));

                return Container(
                  child: TextFormField(
                    controller: productNameControllers[index],
                    decoration: InputDecoration(
                      labelText: "Product Name",
                    ),
                  ),
                );
              }).toList());
            } else if (snapshot.connectionState == ConnectionState.waiting) {
              return Center(
                child: CircularProgressIndicator(),
              );
            } else {
              return Center(child: Text(snapshot.error.toString()));
            }
          },
        ),

Answer 1

ListView.builder 做了一些优化，比如只保存当时在 UI 中显示的对象，而不是所有值，这是一件好事

我建议不要使用构建器，而是使用默认的 ListView 并执行以下操作

ListView(
children: snapshot.data.map(
(val) {
 
 final int index = snapshot.data.indexOf(val);
 productNameControllers.add(TextEditingController(
                    text: val.prodSerName.toString()));
              
             return Container(
                child: TextFormField(
               controller: productNameControllers[index],
               decoration: InputDecoration(
                labelText: "Product Name",
            ),
        ),
             );
}
).toList()