Flutter Widget 之 SliverAppBar

你有没有想过给你的应用程序在滚动的时候改变外观或甚至消失的一个花哨的动画标题。

你可以使用SliverAppBar

SliverAppBar和CustomScrollView一起使用，为应用提供自定义滚动行为

CustomScrollView(
    slivers: <Widget>[
        SliverAppBar(
            title: Text('SliverAppBar'),
        )
    ],
    _oneSliver,
    _anotherSliver,
    _yetAnotherSliver,
)

"sliver"这个词可能会让颤抖，但对于可滚动区域的一部分来说，它实际上只是一个有趣的词。

你可以将slivers视为较低级别的界面，在实现可滚动区域时，提供更精细的颗粒控制。

flexibleSpace参数与expandedHeight参数一起使用。

当它被展示到其完整大小时，你可以将其设置为不同的高度和外观。

SliverAppBar(
    expandedHeight: 200.0,
    flexibleSpace: FlexibleSpace(
        background: _expandedImage,
    )
),
slivers: <Widget> [    ...]

即使你尚未到达列表顶部，将floating参数设置为true，可在向下滚动时重新显示在应用蓝

SliverAppBar(floating:true)

如果想了解有关SliverAppBar，CustomScrollView的内容，或者关于Flutter的其他功能，请访问flutter.io

原文翻译自视频：视频地址