将容器添加到 Sliver答案

【问题标题】：Adding a container to a Sliver将容器添加到 Sliver
【发布时间】：2020-04-19 15:02:35
【问题描述】：

我刚开始了解 slivers，它们似乎不适用于任何其他 Flutter 小部件，除了以“Sliver”开头的小部件。我尝试添加Container，这样我就可以添加BorderRadius 来装饰列表。但是我收到了这个错误：

RenderSliverFillRemaining 需要一个 RenderBox 类型的子级，但是收到一个 RenderSliverToBoxAdapter 类型的子节点。

到目前为止，这是我的代码：

...
SliverFillRemaining(
  child: SliverToBoxAdapter(
    child: Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(36),
          topRight: Radius.circular(36),
        ),
      ),
      child: SliverPadding(
        padding: const EdgeInsets.all(16),
        sliver: SliverFixedExtentList(
          itemExtent: 50.0,
          delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) {
              return Container(
                alignment: Alignment.center,
                color: Colors.lightBlue[100 * (index % 9)],
                child: Text('List Item $index'),
              );
            },
          ),
        ),
      ),
    ),
  ),
),
...

【问题讨论】：

标签： flutter flutter-sliver

【解决方案1】：

我通过使用NestedScrollView 而不是CustomScrollView 解决了我的问题。

return Scaffold(
  body: NestedScrollView(
    headerSliverBuilder: (context, innerBoxIsScrolled) {
      return <Widget>[
        SliverAppBar(
          floating: false,
          pinned: true,
          snap: false,
          elevation: 0,
          expandedHeight: 150.0,
          brightness: DynamicTheme.of(context).brightness,
          flexibleSpace: FlexibleSpaceBar(
            title: Text(assignment.name),
          ),
        ),
      ];
    },
    body: Container(
      decoration: BoxDecoration(
        color: Colors.red,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(36),
          topRight: Radius.circular(36),
        ),
      ),
      child: ListView.builder(
        itemExtent: 50.0,
        itemBuilder: (context, index) {
          return Container(
            alignment: Alignment.center,
            color: Colors.lightBlue[100 * (index % 9)],
            child: Text('List Item $index'),
          );
        },
      ),
    ),
  ),
);

【讨论】：

【解决方案2】：

[更新] 根据您的用例，我认为您甚至不需要 SliverFillRemaining，如果您希望 SliverFillRemaining 中的列表是无限的，只需将 SliverList 与 SliverChildBuilderDelegate 一起使用

...
    SliverFixedExtentList(
      itemExtent: 50.0,
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return Container(
            alignment: Alignment.center,
            color: Colors.lightBlue[100 * (index % 9)],
            child: Text('List Item $index'),
          );
        },
      ),
    ),
    ...

您已经在错误中得到答案，您的 SliverFillRemaining 不使用 sliver，它使用应该是小部件的子项

...
SliverFillRemaining(
    hasScrollBody: true,
    child: Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(36),
          topRight: Radius.circular(36),
        ),
      ),
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: ListView.builder(
          itemCount: 20,
          physics: NeverScrollableScrollPhysics(), //adding this line will disable the scrolling and listview and so the CustomScrollView should work as a single scroll view
          itemBuilder: (_, __) => ListTile(
            title: Text("Item"),
          ),
        ),
      ),
    ),
  ),
...

【讨论】：

我很欣赏这一点，但现在我遇到了有两个列表的问题，当我向下滚动无限列表时，SliverAppBar 保持在同一位置。
签出更新，在 SliverFillRemaining 上将 hasScrollBody 设置为 true
与hasScrollBody 相同的问题默认为true。
尝试最新的修复，只需将容器内的 ListView 的集合物理添加为 NeverScrollableScrollPhysics()，因为我已更新。
现在 SliverAppBar 可以工作了，但是当它应该是无限的时候，列表并没有超过第 15 项。