Как визуализировать список внутри списка во флаттере? - PullRequest
0 голосов
/ 20 мая 2019

Я создаю приложение-флаттер, в котором должен отображаться список команд, и каждая команда представляет собой объект с такими элементами, как

name: строка

players: массив

name: строка

, поэтому это выглядит так

List teams = [
      {
        'name': 'Team one',
        'players': [
          {
            'name': 'Team one player one',
          },
          {
            'name': 'Team one player two',
          },
          {
            'name': 'Team one player three',
          },
        ]
      },
      {
        'name': 'Team two',
        'players': [
          {
            'name': 'Team two player one',
          },
          {
            'name': 'Team two player one',
          },
          {
            'name': 'Team two player three',
          },
        ]
      },
    ];

Далее, в моем коде я перебираю все teams с ListView,вот так

  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: renderTeams(teams),
      ),
    );
  }

и renderTeams() выглядит так:

  Widget renderTeams(List teams) {
    return ListView.builder(
      itemCount: teams.length,
      itemBuilder: (context, index) {
        return Padding(
          padding: EdgeInsets.all(10.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(teams[index]['name']),
              Row(
                children: <Widget>[
                  Flexible(
                    child: PlayerCard(
                      player: teams[index]['players'][0],
                    ),
                  ),
                  Flexible(
                    child: PlayerCard(
                      player: teams[index]['players'][1],
                    ),
                  ),
                  Flexible(
                    child: PlayerCard(
                      player: teams[index]['players'][2],
                    ),
                  ),
                ],
              )
            ],
          ),
        );
      },
    );
  }

Это работает хорошо, все отображается соответствующим образом.

Однако я бы хотелвместо того, чтобы добавлять каждого игрока отдельно, перебирайте игроков каждой команды, чтобы мои renderTeams() выглядели так:

  Widget renderTeams(List teams) {
    return ListView.builder(
      itemCount: teams.length,
      itemBuilder: (context, index) {
        return Padding(
          padding: EdgeInsets.all(10.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(teams[index]['name']),
              renderPlayers(teams[index]['players'])
            ],
          ),
        );
      },
    );
  }

и renderPlayers() выглядят так:

  renderPlayers(players) {
    return Row(children: players.map((player) => {
        Flexible(
          child: PlayerCard(
            player: player,
          ),
      )
    }).toList());
  }

Thisвот где начинаются мои проблемы, так как я получаю ошибки вроде

type 'List<dynamic>' is not a subtype of type 'List<Widget>'

И я погуглил, но другие ответы пытались исправить типы, но это приводит меня к бесконечностицикл попыток исправить ошибки, которые я не понимаю.

Кто-нибудь получил какие-либо подсказки?Заранее спасибо

1 Ответ

1 голос
/ 20 мая 2019

Удалить { }

renderPlayers(players) {
  return Row(children: players.map((player) => 
      Flexible(
        child: PlayerCard(
          player: player,
      ),
    )
  ).toList());
}

Объяснение

=> означает return. => { ... } означает возврат функции (динамической). Вот почему это было обнаружено как List<dynamic>

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...