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

JPanel小部件具有textArea.setFocusable(false)属性，该属性指示列表项所在的轴。默认值为ListView，这就是内部scrollDirection垂直放置Axis.vertical小部件的原因。

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

如果相反，您想在团队的Expanded小部件中水平滚动，只需将Row更改为PlayerCard并删除scrollDirection属性以使其正常滚动。您可能会想用Axis.horizontal来包装physics本身，以免它从ListView溢出。

如何在ListView（作为列）内渲染ListView（作为行）？

1 个答案: