从 Widget 列表中动态添加和删除元素

Question

我想创建一个小部件列表 (TextFormField)，我可以在其中使用添加按钮添加新元素，并使用该元素旁边的按钮删除任何元素。所以我会在数组中有未知数量的 TextFormField，并且能够添加一个新的，并销毁任何一个 TextFormField。

我能够添加新的 TextFormFields，但只有在我想删除最后一个时才能删除。有没有办法确定被点击的 removeButton 的索引？

List<Widget> proba = new List<Widget>();
List<TextEditingController> _controllers = new List<TextEditingController>();

...

IconButton(
          icon: Icon(Icons.add_circle_outline),
          onPressed: () {
            setState(() {
              _controllers.add(new TextEditingController());
            });
            setState(() {
              proba.add(Row(
                children: [
                  Icon(Icons.radio_button_unchecked),
                  Expanded(
                    child: TextFormField(
                      controller: _controllers[_controllers.length - 1],
                      decoration:
                          InputDecoration(hintText: "Add text..."),
                    ),
                  ),
                  IconButton(
                    icon: Icon(Icons.delete),
                    onPressed: () {
                      setState(() {
                        _controllers.removeAt(_controllers.length - 1);
                        proba.removeAt(proba.length - 1);
                      });
                    },
                  )
                ],
              ));
            });
          },
        ),

添加效果很好。该代码删除了最后一个元素，但我想删除其按钮被单击的元素。

Answer 1

我认为您可以使用 ListView（例如使用构建器构造函数），这样每一行都是一个 ListTile。 itemBuilder 构建项目并且您可以访问索引。它看起来像这样：

int itemCount = 3;
ListView.builder(
  itemCount: _counter,
    itemBuilder: (context, index) {
      return ListTile(
        leading: Icon(Icons.radio_button_unchecked),
        title: TextFormField(),
        trailing: IconButton(
          onPressed: () {
            setState(() {
              _counter--;
            });
          },
          icon: Icon(Icons.delete),
        ),
      );
    },
  ),

在 onPressed 的 setState 方法中属性您可以访问索引。在示例中，ListView 负责根据 itemCount 创建 ListTiles。您可能想要创建一个对象列表，而不仅仅是 int itemCount 来存储数据（可能是 TextFormField 中的文本）。但是您仍然可以从 itemBuilder 中根据索引删除项目：values.deleteAt(index).

查看 ListView 和 ListTile 的文档类:

https://api.flutter.dev/flutter/widgets/ListView-class.html

https://api.flutter.dev/flutter/material/ListTile-class.html

从 Widget 列表中动态添加和删除元素

Dynamic adding and removing elements from Widget list

widget

dart

flutter