Flutter：在 Column 中完全包含 ListView（不展开）答案

【问题标题】：Flutter: fully include a ListView inside a Column (no Expanded)Flutter：在 Column 中完全包含 ListView（不展开）
【发布时间】：2019-05-17 22:43:16
【问题描述】：

在滚动视图中，我想显示一个小部件，然后是一个列表，然后是一个小部件。诸如此类的东西：

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: <Widget>[
          Text("Top of ListView"),
          ListView.builder(
              itemCount: 100,
              itemBuilder: (context, index) => Text('Line $index')),
          Text("Below of ListView")
        ],
      ),
    );
  }

SingleChildScrollView 的内容在哪里：

Text("Top of ListView"),
Text('Line 0'),
Text('Line 1'),
...
Text('Line 98'),
Text('Line 99'),
Text("Bottom of ListView")

当然，这段代码不起作用，因为 ListView 的高度是未定义的。用Expanded 包裹ListView 不是解决方案，因为我希望Text("Top of ListView") 在我开始滚动时消失，Text("Bottom of ListView") 仅在到达底部时出现（好像它们是第一项和最后一项列表）。

我的想法：

将Text("Top of ListView") 和Text("Bottom of ListView") ListView 内部：对于这个例子来说很容易做到，但在现实世界中，列表前面或后面不会只有一个小部件。凌乱且难以维护。
将列表项直接添加到Column：也就是重新实现ListView。
将ListView包装成Container，其高度对应于计算出的ListView高度：我不知道如何测量儿童。

有什么想法吗？

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

您必须使用CustomScrollView 来实现此目的：

CustomScrollView(
  slivers: [
    SliverList(
      delegate: SliverChildListDelegate([Text("Top of ListView")]),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => Text('Line $index')
        childCount: 100,
      ),
    ),
    SliverList(
      delegate: SliverChildListDelegate([Text("Below of ListView")]),
    ),
  ],
),

【讨论】：

它解决了问题......除了我使用ListView.separated而不是ListView.builder。我会用分隔符为SliverChildBuilderDelegate 开一个新问题。