Flutter：将 SliverAppbar 与 Column 小部件相结合答案

【问题标题】：Flutter: combining SliverAppbar with Column widgetFlutter：将 SliverAppbar 与 Column 小部件相结合
【发布时间】：2020-11-03 00:18:12
【问题描述】：

我正在尝试为应用程序创建一个事件页面，用户可以在其中查看具有横幅图像和一些其他有用信息的事件。我真的很喜欢用横幅实现 SliverAppBar 的想法，这样用户可以滚动查看更多信息。为此，我似乎需要一个带有 SliverAppBar 和 FlexibleSpaceBar 的 CustomScrollView。

我在网上看到的所有教程都假设屏幕的其余部分应该是一个排序列表，但我更想要类似 Column 小部件的东西。但是，Column 具有无限的高度，这会导致 CustomScrollView 中的溢出错误。我可以将它包装在一个具有指定高度的容器中，但是主体的内容是可变大小的，所以这并不理想。有没有办法让 SliverAppBar 和 Column 并排工作？

我想要一些类似的东西：

class ActivityPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(slivers: [
          SliverAppBar(
            flexibleSpace: FlexibleSpaceBar(
              background: Image(someImage),
            ),
            expandedHeight: Image,
            floating: false,
            pinned: true,
            snap: false,
          ),
          Column(
            children: [
              someChildren,
            ]
            ),
          )
        ]),
      ),
    );
  }

这应该是可能的，因为在我看来这是一种常见的模式，但我环顾四周，只能找到正文由列表组成的示例......

【问题讨论】：

标签： flutter listview sliverappbar customscrollview

【解决方案1】：

对于任何有同样困难的人：这是我刚刚找到的解决方案：

Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder:
            (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              backgroundColor: this.color,
              flexibleSpace: FlexibleSpaceBar(
              background: YourImage(),
              ),
            )
          ];
          },
        body: Container(
          child: Builder(builder: (context) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  WidgetOne(),
                  WidgetTwo()
                ]);
          })),
        ),
      )),
    );
  }

【讨论】：

【解决方案2】：

使用SliverList 和SliverChildListDelegate 而不是Column。

Widget build(BuildContext context) {
  return Scaffold(
    body: CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          expandedHeight: 200,
          flexibleSpace: FlexibleSpaceBar(
            background: Container(color: Colors.green),
          ),
        ),
        SliverList(
          delegate: SliverChildListDelegate([
            Container(color: Colors.yellow, height: 400),
            Container(color: Colors.red, height: 800),
          ]),
        ),
      ],
    ),
  );
}

【讨论】：

【解决方案3】：

使用 ListView 而不是 Column。 ListView 具有动态大小

【讨论】：

【解决方案4】：

对我来说最好的方法是使用SliverToBoxAdapter。只需将您的 Column 包裹在 Container 中，然后将 Container 包裹在 SliverToBoxAdapter 中，它应该可以正常工作。

【讨论】：