flutter - 如何像在 Hamilton flutter 应用程序中一样在 Flutter 中制作自定义 AppBar？

LIke This

我的方法:没有 AppBar 和 body 的 Scaffold:Stack > [image,listview]

最佳答案

Flutter 附带了一堆所谓的“sliver”小部件，可用于根据用户的滚动 Action 实现不同的效果。默认情况下，从 Material Design 指南 ¹ 中可以很容易地实现类似的效果，其中标题从英雄图像的底部开始相当大，然后在用户向下滚动页面时向上移动到顶部。

为了达到这个效果，你可以使用一个 CustomScrollView ，上面有一个 SliverAppBar ，下面有一些其他的 sliver 组件，如下所示:

new CustomScrollView(
  slivers: <Widget>[
    new SliverAppBar(
      pinned: true,
      expandedHeight: 250.0,
      flexibleSpace: new FlexibleSpaceBar(
        title: new Text(_shortTitle),
        background: new Image.network(_imageUrl),
      ),
    ),
    new SliverPadding(
      padding: new EdgeInsets.all(16.0),
      sliver: new SliverList(
        delegate: new SliverChildListDelegate([
          new Text(_longTitle),
          new Text(_body),
          new Text(_author),
          new Text(_body),
        ]),
      ),
    ),
  ],
);

¹ 向下滚动到 Material Design 指南中的“带有图像的灵活空间”

关于flutter - 如何像在 Hamilton flutter 应用程序中一样在 Flutter 中制作自定义 AppBar？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48121864/