用列表映射结果填充 GridView

Question

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

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

我想用上面的结果填充 GridView，但是当我使用 List.generate 消息“元素类型 'List<Map<dynamic,dynamic>>' 无法分配给列表类型 'Widget'.dartlist_element_type_not_assignable ” 出现在我面前。

我尝试填充 GridView 的代码

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

有什么办法可以填充这个GridView吗？

Answer 1

您可以采用以下任一方式：

1st: By using the .map() method:

 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()
 )

2nd: By using the List.generate() method

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