SliverAppBar

前言

前一段时间由于个人原因消失了一段时间，哈哈，想我没？抱歉.0.0

好吧，我们还是来开始看下今天的内容吧。在前面的文章中我们将到了Appbar的用户，它类似于Android中的toolbar，但是熟悉Android开发的童鞋应该知道在Android中还有个Collapsing Toolbar的东西，就是一个可以折叠的标题栏效果，不知道长什么样子的童鞋问下周围的小伙伴如何？或者你咨询下你的搜索引擎吧。

接下来我们来介绍下SliverAppBar

SliverAppBar

我看还是先来看下SliverAppBar的构造方法

构造方法也是非常的简单，但是我们却不能直接使用它，由官方文档可以看到我们通常结合ScrollView来使用它。

我们结合CustomScrollView来看下例子吧。

首先我们使用了NestedScrollView中的headerSliverBuilder属性添加了SliverAppBar

然后我们设置展开的高度为200，不让标题栏随着滑动滚动出可视区域

我们使用flexibleSpace来构建了一个可以滚动的区域 最后我们给NestedScrollView的body加了一个ListView

然后我们来看下效果：

我们把 pinned的属性设置为false再看下效果

接下来我们来看下bottom属性，允许我们在在下面放置你想放置其他Widget，好吧我们来放个TabBar看下

其实代码很简单，只不过我们需要让MyApp继承于 StatefulWidget，让后让State TickerProviderStateMixin

让后给SliverAppBar增加如下代码即可。

当然我们是希望这个TabBar在SliverAppBar下方，并且随着SliverAppBar滚动的，但是我们还是来看下效果吧

很丑有没有，由于TabBar的高度所以我们并不能让SliverAppBar滑动到顶部，所以要想实现随着SliverAppBar的移动，把TabBar放在bottom也不是很合适的。

在这里，我们可以借助于SliverPersistentHeader中的SliverPersistentHeader属性来解决

SliverPersistentHeader的构造很简单，只有简单的几个属性，不再具体讲了

全部代码如下：

效果如下：

但是有童鞋就问问了，我们怎么让这个SliverPersistentHeader中的内容（TabBar）不随着ListView的滚动而滑动呢？其实很简单，因为SliverPersistentHeader跟SliverAppBar一样都有一个 pinned属性，将它设置为true这里面的内容就会在到达顶部后停止跟随ListView移动了。

本期小结

• 熟悉SliverAppBar的用法
• 了解CustomScrollView的用法
• 了解SliverPersistentHeader的用法