前一段时间由于个人原因消失了一段时间,哈哈,想我没?抱歉.0.0
好吧,我们还是来开始看下今天的内容吧。在前面的文章中我们将到了Appbar的用户,它类似于Android中的toolbar,但是熟悉Android开发的童鞋应该知道在Android中还有个Collapsing Toolbar的东西,就是一个可以折叠的标题栏效果,不知道长什么样子的童鞋问下周围的小伙伴如何?或者你咨询下你的搜索引擎吧。
接下来我们来介绍下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移动了。