Flutter-create listview with multi textEditingController答案

【问题标题】：Flutter-create listview with multi textEditingControllerFlutter-create listview with multi textEditingController
【发布时间】：2021-06-11 11:04:15
【问题描述】：

我想在列表视图中使用动态总项目数创建多输入。我使用文本控制器列表，但是当我输入数据时，所有控制器都显示相同的值。

这是我的控制器：

int totalItem = 15;

List<TextEditingController> _color = List.filled(15, TextEditingController());
List<TextEditingController> _brand = List.filled(15, TextEditingController());

在文本字段中实现：

         Padding(
          padding: const EdgeInsets.only(bottom: 10, left: 20, right: 20),
          child: TextFormField(
            controller: _color[index],
            decoration: InputDecoration(
              hintText: "Color",
              labelText: "Color",
            ),
          ),
        ),
        Padding(
          padding: const EdgeInsets.only(bottom: 10, left: 20, right: 20),
          child: TextFormField(
            controller: _brand[index],
            decoration: InputDecoration(
              hintText: "Brand",
              labelText: "Brand",
            ),
          ),
        ),

当运行应用程序文本控制器时显示相同的值。请帮我解决这个问题？

完整代码：https://github.com/gunartha/listview_with_multi_input

谢谢。

【问题讨论】：

标签： flutter dart

【解决方案1】：

我认为这是因为List.filled 构造函数的工作方式。 In the documentation 它提到：

使用fill 在每个位置创建一个给定长度的列表。

暗示fill（在这种情况下是您的TextEditingController）只初始化一次，然后在每个索引中放入对同一控制器的引用。因此，所有颜色字段都由（引用）同一个控制器实例控制，品牌也是如此。

要解决此问题，您需要使用不同的方式来初始化您的控制器列表。一个简单的循环就足够了，但您也可以想出一个更优雅的解决方案。

下面是一些示例代码，用于在initState 中循环初始化列表：

  List<TextEditingController> _color = [];
  List<TextEditingController> _brand = [];

  @override
  void initState() {
    for (int i = 0; i < totalItem; i++) {
      _color.add(TextEditingController());
      _brand.add(TextEditingController());
    }
    super.initState();
  }

这在我的机器上按预期工作。

【讨论】：