如何在 Flutter 的 ListView 中添加列？

Posted 2023-02-23

【中文标题】如何在 Flutter 的 ListView 中添加列？

【英文标题】：How do I add Columns inside of a ListView in Flutter?

【发布时间】：2018-11-16 08:12:51

【问题描述】：

我是 Flutter 的新手，最近几天一直在练习 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
        ],
      )
    );
  

【参考方案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)),
    ],
  )

【参考方案2】：

解决这个问题的简单方法是使用SingleChildScrollView。如果您需要一个可滚动的列，请将其包裹起来。

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

【讨论】：

最简单的方法是使用 SingleChildScrollView

SingleChildScrollView 文档建议将Column 作为ListView 的孩子之一实际上更有效。 “当您有一个子列表并且不需要跨轴收缩包装行为时，例如始终是屏幕宽度的滚动列表，请考虑 [ListView]，它比包含 [SingleChildScrollView] 的 [SingleChildScrollView] 效率高得多有很多孩子的 [ListBody] 或 [Column]。”来源：api.flutter.dev/flutter/widgets/…

【参考方案3】：

像使用 Listview 一样

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