如何在 Flutter 的列中创建带有 for 循环的按钮？

Question

我需要根据数据条目在列中实现按钮列表。所以，为此我必须使用 for 循环。每个按钮需要两个整体id, text。我可以用 List 做到这一点。但它只接受字符串值而不接受整数。

这是我试过的代码。

代码

Widget getTextWidgets(List<String> strings)
  {
    List<Widget> list = new List<Widget>();
    for(var i = 0; i < strings.length; i++){
        list.add(new ButtonForHome(
          lable: strings[i],
          onPressed: (){},
          ));
    }
    return new Column(children: list);
  }

我想将id 放入 onPressed 事件中。如何在 Flutter 中实现？

Answer 1

您应该使用Listview 而不是Column

示例代码

 getTextWidgets() {
    return ListView.builder(
        itemCount: yourList.length,
        itemBuilder: (context, itemIndex) {
          return MaterialButton(
              child: Text(yourList[itemIndex]),
              onPressed: () {
                debugPrint('Clicked index $itemIndex');
              });
        });
  }

现在你的问题

我想将 id 放入 onPressed 事件中。如何在 Flutter 中实现？

你可以像这样创建一个 POJO 类

class DataModel{
  String name;
  int id;
  DataModel(this.name, this.id);
}

现在创建你的 POJO 类的列表

List<DataModel> list= List<DataModel>();

现在像这样在列表中添加数据

list.add(DataModel("name", 1));
list.add(DataModel("name", 2));
list.add(DataModel("name", 3));

现在可以这样使用了

 getTextWidgets() {
    return ListView.builder(
        itemCount: list.length,
        itemBuilder: (context, itemIndex) {
          return MaterialButton(
              child: Text(list[itemIndex].name),
              onPressed: () {
                debugPrint('Clicked item name '+list[itemIndex].name);
                debugPrint('Clicked item ID '+list[itemIndex].id.toString());
              });
        });
  }

Answer 2

Nilesh Rathod 确实给出了相同的描述性答案。在flutter中也有一种实现方式，和POJO class很相似，就是

• 创建自己的widget并指定使用widget时需要传递的字段
• 将小部件添加到列表中，并指定要传递的数据
• 您也可以通过按下自身来跟踪 id

我可以清楚地看到，您已经创建了自己的小部件，命名为ButtonForHome，它现在接受label。你可以做的是，让你的小部件接受两个参数，你可以这样做：

class ButtonForHome extends StatelessWidget {
  final String label;
  final int id;  // this will save your day

  // @required will not let user to skip the specified key to be left null
  ButtonForHome({@required this.label, @required this.id});

  @override
  Widget build(BuildContext context) {
    return Container(
       child: Center(
        child: RaisedButton(
            color: Colors.blue,
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(18.0),
            ),
            child: Text(this.label),
            onPressed: () => print(this.id) // Here you print your id using your button only
        )
    );
  }
}

现在使用列表创建按钮，或通过列表添加

• 你可以通过ListView.builder()
• 您可以按照自己的方式进行操作，即List<Widget>.add()

我只会以你的方式展示解决方案：

Widget getTextWidgets(List<String> strings){
  List<Widget> list = new List<Widget>();

  for(var i = 0; i < strings.length; i++){
    list.add(ButtonForHome(
      id: i, // passing the i value only, for clear int values
      label: strings[i]
    ));
  }

  return Column(children: list);
}

有了新的 Flutter，您无需在定义小部件时每次都执行new。它现在明白了，所以根本不需要const，new

因此，无论您在哪里填充 getTextWidget，它都会显示具有唯一 id 和 label 的 Widgte ButtonForHome。现在ButtonForHome 打印了唯一传递的特定小部件的id。所以现在，你可以看到你的结果正在发生。

我希望这就是您想要的。试试看，然后告诉我。