简介

对于一个 APP 来说，肯定会有一个 AppBar，这个 AppBar 一般包含了 APP 的导航信息等。虽然我们可以用一个固定的组件来做为 AppBar，但是这样就会丢失很多特效，比如将 AppBar 固定在顶部，AppBar 可以在滑动的过程中进行大小变换等。

当然这一切都不需要自己来实现，flutter 已经为我们提供了一个非常强大的 AppBar 组件，这个组件叫做 SliverAppBar。

SliverAppBar 详解

我们先来看下 SliverAppBar 的定义：

class SliverAppBar extends StatefulWidget

可以看到 SliverAppBar 是一个 StatefulWidget，它里面的状态包含的是一些配置信息，包括 FloatingHeaderSnapConfiguration,OverScrollHeaderStretchConfiguration 和 PersistentHeaderShowOnScreenConfiguration 等。

SliverAppBar 可以接收很多属性，我们接下来会讲解其中最重要和最常用的几个属性。

• forceElevated

forceElevated 是一个 bool 值，表示是否显示 AppBar 的阴影效果,默认值是 false。

• primary

primary 使用来配置 AppBar 的属性，表示 AppBar 是否显示在界面的 Top 位置。如果设置为 true，那么 AppBar 将会被放置在 Top 的位置，并且使用的高度是系统 status bar 的高度。

• floating

floating 是一个非常重要的属性，因为对于 SliverAppBar 来说，当界面向远离 SliverAppBar 的方向滚动的时候，SliverAppBar 会隐藏或者缩写为 status bar 的高度，floating 的意思就是当我们向 SliverAppBar 滑动的时候，SliverAppBar 是否浮动展示。

• pinned

表示 SliverAppBar 在滚动的过程中是否会固定在界面的边缘。

• snap

snap 是和 floating 一起使用的属性，snap 表示当向 SliverAppBar 滚动的时候，SliverAppBar 是否立即展示完全。

• automaticallyImplyLeading

automaticallyImplyLeading 是用在 AppBar 中的属性，表示是否需要实现 leading widget。

其中最常用的就是 floating，pinned 和 snap 这几个属性。

另外还有一个 flexibleSpace 组件，他是 SliverAppBar 在 float 的时候展示的 widget，通常和 expandedHeight 配合使用。

SliverAppBar 的使用

上面讲解了 SliverAppBar 的构造函数和基础属性，接下来我们通过具体的例子来讲解 SliverAppBar 如何使用。

通常来说 SliverAppBar 是和 CustomScrollView 一起使用的，也就是说 SliverAppBar 会被封装在 CustomScrollView 中。

CustomScrollView 中除了 SliverAppBar 之外，还可以添加其他的 sliver 组件。

首先我们定义一个 SliverAppBar：

SliverAppBar(          pinned: true,          snap: true,          floating: true,          expandedHeight: 200.0,          flexibleSpace: FlexibleSpaceBar(            title: const Text('SliverAppBar'),            background: Image.asset("images/head.jpg"),          ),        ),

这里我们设置 pinned，snap 和 floating 的值都为 true，然后设置了 expandedHeight 和 flexibleSpace。

这里的 flexibleSpaces 是一个 FlexibleSpaceBar 对象，这里我们设置了 title 和 background 属性。

接着我们需要把 SliverAppBar 放到 CustomScrollView 中进行展示。

 Widget build(BuildContext context) {    return CustomScrollView(      slivers: <Widget>[        SliverAppBar(         ...        ),        SliverList(          delegate: SliverChildBuilderDelegate(                (BuildContext context, int index) {              return Container(                color: index.isOdd ? Colors.white : Colors.green,                height: 100.0,                child: Center(                  child: ListTile(                    title: Text(                      '1888888888' + index.toString(),                      style: TextStyle(fontWeight: FontWeight.w500),                    ),                    leading: Icon(                      Icons.contact_phone,                      color: Colors.blue[500],                    ),                  ),                ),              );            },            childCount: 10,          ),        ),      ],    );

在 SliverAppBar 之外，我们还提供了一个 SliverList，这里使用了 SliverChildBuilderDelegate 来构造 10 个 ListTile 对象。

最后运行可以得到下面的界面：

默认情况下 SliverAppBar 是展开状态，如果我们将下面的 SliverList 向上滑动，flexibleSpace 就会被隐藏，我们可以得到下面的界面：

当我们向上慢慢滑动的时候，因为设置的是 floating=true, 并且 snap=true，所以只要向上滑动，就会展示所有的 flexibleSpace:

当我们将 floating 设置为 false 的时候，只有向上滑动到顶端的时候，flexibleSpace 才会全部展示出来。

总结

简单点说，SliverAppBar 就是一个在滑动中可变大小的 AppBar,我们可以通过设置不同的参数来实现不同的效果。

本文的例子：https://github.com/ddean2009/learn-flutter.git