我是一个新手,最近几天一直在练习UI构建。
我的“假音乐播放器”应用程序的主页是由分区(新歌、最新歌曲、热门歌曲等)的列表视图组成的。每个部分都有一个标题,以及最近音乐的另一个列表视图,如此链接所示:Using Column
这张照片是用列而不是列表拍摄的。但当我到达屏幕的底部时,这个列就不再有用了(正如它本来应该的那样)。所以我需要使用ListView。但是,一旦我这样做,应用程序的主体上就没有显示任何内容。如下:Using List View代码的这一部分:

class PageBody extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new Container(
      alignment: Alignment.center,
      padding: const EdgeInsets.fromLTRB(18.0, 0.0, 0.0, 0.0),
      child: new ListView( // <-- If it's a column, it 'works'
        children: [
          new SectionTitle(title: 'Trending now'), // <-- Makes the section title
          new Padding(padding: new EdgeInsets.all(4.0)), // <-- Add some space
          new Expanded(child: new MusicsListView(musics: _trendingSongsList)), // <-- Makes the music List view
        ],
      )
    );
  }
}

最佳答案

如果您查看日志,您可能会看到一个错误,提示Expanded widgets must be placed inside Flex widgets
如果您随后删除了Expanded小部件,则会得到另一个错误,即说Horizontal viewport was given unbounded height。这是有道理的。嵌套列表是水平的,因此它试图在横轴中展开,但横轴是另一个列表,因此可以无限展开。
所以您需要限制这个水平列表视图的高度。一种方法是通过

ListView(
    children: [
      new SectionTitle(title: 'Trending now'),
      new Padding(padding: new EdgeInsets.all(4.0)),
      new SizedBox(
        height: 300.0 // -> or whatever makes sense for you
        child: new MusicsListView(musics: _trendingSongsList)),
    ],
  )

10-08 18:07