动态添加和删除小部件列表中的元素

问题描述

我想创建一个小部件列表（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);
                      });
                    },)
                ],));
            });
          },

添加工作正常。该代码删除了最后一个元素，但我想删除其按钮被点击的元素。

解决方法

我认为您可以使用 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

dart widget