如何在 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');
              });
        });
  }

现在你的问题

I want to put id in onPressed event. How can I implement in the Flutter?

您可以像这样创建一个 POJO class

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

现在创建您的 POJO 列表 class

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很相似，就是

创建自己的小部件并指定我们使用小部件时需要传递的字段
将小部件添加到列表中，并指定要传递的数据
您也可以通过按自己来跟踪 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);
}

With the new flutter in place, you don't need to do new every time while defining a widget. It understands now, so no need of const, new at all

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

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

如何在 Flutter 的列中使用 for 循环创建按钮？

How to create buttons with for loop in a column in Flutter?

flutter

flutter-test

flutter-layout

代码