flutter - 如何在 ListView(作为列)内呈现 ListView(作为行)？

Question

我正在尝试呈现 6 个团队的列表。每个队有五个球员，设计是我们有这样的东西

团队 1(列)团队 1 名称(行)team1-player1, team1-player2, team1-player3, team1-player4, team1-player5 (行),

团队 2(列)团队 2 名称(行)team2-player1, team2-player2, team2-player3, team2-player4, team2-player5 (行),

等等等等

我的应用看起来像这样:

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: <Widget>[
          Text(teams[index]['name']),
          ListView.builder(
            shrinkWrap: true,
            itemCount: teams[index]['players'].length,
            physics: const NeverScrollableScrollPhysics(),
            itemBuilder: (context, playerIndex) {
              return PlayerCard(
                  player: teams[index]['players'][playerIndex]);
            },
          ),
        ],
      ),
    );
  },
);

有了这个设置，我有 6 行而不是 2 行。每个玩家都有自己的行，或者占据行的整个宽度。我不确定。我尝试在 Row 中添加第二个 ListView.builder，但没有成功。某些框约束错误我无法修复。

是的，PlayerCard 的构建

Widget build(BuildContext context) {
return Padding(
  padding: EdgeInsets.all(5.0),
  child: Column(
    children: <Widget>[
      Image.network(
        player['photo'],
        width: 100,
        height: 150,
      ),
      Text(player['name']),
      Text(player['nick']),
    ],
  ),
);

有什么建议吗？

谢谢!

Answer 1

ListView 小部件有一个 scrollDirection 属性，它指示列表条目的布局轴。默认值为 Axis.vertical，这就是为什么您的内部 ListView 垂直放置 PlayerCard 小部件的原因。

如果您希望所有的 PlayerCard 小部件都适合屏幕的宽度，那么内部的 ListView 应该替换为 Row，并且每个 PlayerCard 都应该用 Flexible 或 Expanded 包裹起来，使它们在 Row 中的宽度相等。

如果您想水平滚动团队的 PlayerCard 小部件，只需将 scrollDirection 更改为 Axis.horizo​​ntal 并删除 physics 属性让它正常滚动。您可能希望用 Expanded 包裹 ListView 本身，这样它就不会从 Column 中溢出。