flutter - 用列表 map 结果填充 GridView

Question

我正在尝试用列表 map 的结果填充 GridView

  var players = [
    {"Name": "Josh", "Age": "25"},
    {"Name": "Rick", "Age": "26"},
    {"Name": "Michael", "Age": "22"},
    {"Name": "Sander", "Age": "23"},
  ];

我想用上面的结果填充 GridView，但是当我使用 List.generate 消息“The element type 'List >' can't be assigned到列表类型 'Widget'.dartlist_element_type_not_assignable "出现在我面前。

我尝试填充 GridView 的代码

    GridView.count(
      crossAxisCount: 2,
      children: [
        List.generate(players.length, (index) => {
          
        })
      ],
    )

有没有办法填充这个GridView？

Answer 1

您可以采用任何一种方式:

1:通过使用 .map() 方法:

 var players = [
    {"Name": "Josh", "Age": "25"},
    {"Name": "Rick", "Age": "26"},
    {"Name": "Michael", "Age": "22"},
    {"Name": "Sander", "Age": "23"},
 ];

 GridView.count(
    crossAxisCount: 2,
    children: players.map(
      (player) => Column(children: [
        Text(player['Name']),
        Text(player['Age'])
        ])).toList()
 )

第二:通过使用 List.generate() 方法

GridView.count(
    crossAxisCount: 2,
    children: List<Widget>.generate(
      players.length,
      (index) => Column(children: [
        Text(players[index]['Name']),
        Text(players[index]['Age'])
        ])
    )
)