如何在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

我的朋友 确实已经给出了相同的描述性答案。在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);
}

有了新的翩翩起舞，你就不需要再去做什么了 new 每次定义一个小组件时，都会有一个新的小组件。现在它明白了，所以不需要 const, new 根本

所以，无论你在哪里填充你的 getTextWidget，它将显示Widgte ButtonForHome，它具有独特的 id和 label. 现在 ButtonForHome，打印的是 id 的那个特定widget的唯一传递。所以现在，你可以看到你的结果发生了。

我希望这就是你要找的东西。试试吧，然后告诉我。

Answer 2

你应该使用 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());
              });
        });
  }