我正在尝试呈现 6 个团队的列表。每支球队有五名球员，设计就是我们有这样的东西
team 1 (column) team 1 name (row) team1-player1, team1-player2, team1-player3, team1-player4, team1-player5 (row),
team 2 (column) team 2 name (row) team2-player1, team2-player2, team2-player3, team2-player4, team2-player5 (row),
等等等等。
我的应用程序如下所示：
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']),
],
),
);
}
有什么建议吗？
谢谢！
该ListView部件有一个scrollDirection指示在其上列表条目中规定的轴属性。默认是Axis.vertical这就是为什么你的内部垂直ListView放置PlayerCard小部件的原因。
如果您希望所有PlayerCard小部件都适合屏幕的宽度，ListView则应将内部小部件替换为Row，并且每个小部件PlayerCard都应使用Flexible或包裹，Expanded以使它们在Row.
相反，如果您想水平滚动团队的PlayerCard小部件，只需更改scrollDirectiontoAxis.horizontal并删除physics属性即可正常滚动。您可能希望将其ListView自身包裹起来，Expanded以免它从Column.
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句