Question

我是新手，在过去的几天里一直在练习UI建设。我的假音乐播放器应用程序的主页是由ListView的部分（新歌，最新的歌曲，命中等）。每个部分都有一个标题和另一个近期音乐列表，如以下链接所示：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
        ],
      )
    );
  }
}

Answer 1

如果查看日志，您可能会看到错误Expanded widgets must be placed inside Flex widgets。

如果您随后删除Expanded窗口小部件，则会收到另一个错误Horizontal viewport was given unbounded height。这是有道理的。您的嵌套列表是水平的，因此它尝试在十字轴上展开，但十字轴是另一个列表，因此它可以无限扩展。

因此您需要约束此水平列表视图的高度。一种方法是通过SizedBox，例如

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)),
    ],
  )

Answer 2

简单的解决方法就是使用SingleChildScrollView。如果您需要一个可滚动列，请用它包装该列。

        SingleChildScrollView(
          child: Column(
            children: <Widget>[

Answer 3

像使用Listview一样

Column(
  children: <Widget>[
    Flexible(
      child: ListView(...), // It will provide scroll functionality with your column
    )
  ],
)

如何在Flutter中的ListView中添加列？

3 个答案: