SliverAppBar 介绍及使用

概述SliverAppBar控件可以实现页面头部区域展开、折叠的效果，类似于Android中的CollapsingToolbarLayout。先看下SliverAppBar实现的效果，效果图如下： Sli

 

 

 

SliverAppbar控件可以实现页面头部区域展开、折叠的效果，类似于AndroID中的CollapsingToolbarLayout。
先看下SliverAppbar实现的效果，效果图如下：

 

SliverAppbar控件需要和CustomScrollVIEw搭配使用,SliverAppbar要通常放在slivers的第一位，后面接其他sliver控件。

CustomScrollVIEw(slivers: <Widget>[SliverAppbar(),//其他sliver控件],)

 

SliverAppbar和其他slivers控件的结构如下：

SliverAppbar中有一个非常重要的参数flexibleSpace，flexibleSpace是SliverAppbar中展开和折叠区域，flexibleSpace与expandedHeight一起使用，
expandedHeight表示flexibleSpace的高度，

SliverAppbar(expandedHeight: 200.0,flexibleSpace: FlexibleSpacebar(),),

SliverAppbar其他常用属性说明如下：

属性	说明
leading	左侧控件，通常情况下为"返回"图标
Title	标题，通常为Text控件
actions	右侧控件
flexibleSpace	展开和折叠区域
bottom	底部控件
elevation	阴影
expandedHeight	展开区域的高度
floating	设置为true时，向下滑动时，即使当前CustomScrollVIEw不在顶部，SliverAppbar也会跟着一起向下出现
pinned	设置为true时，当SliverAppbar内容滑出屏幕时，将始终渲染一个固定在顶部的收起状态
snap	设置为true时，当手指放开时，SliverAppbar会根据当前的位置进行调整，始终保持展开或收起的状态，此效果在floating=true时生效

 

实现文章开头效果的整体代码如下：

class SliverAppbarDemo extends StatelessWidget {@overrIDeWidget build(BuildContext context) {return CustomScrollVIEw(slivers: <Widget>[SliverAppbar(pinned: true,expandedHeight: 200.0,flexibleSpace: FlexibleSpacebar(Title: Text('复仇者联盟'),background: Image.network('http://img.haote.com/upload/20180918/2018091815372344164.jpg',fit: BoxFit.fitHeight,SliverFixedExtentList(itemExtent: 80.0,delegate: SliverChildBuilderDelegate((BuildContext context,int index) {return Card(child: Container(alignment: Alignment.center,color: colors.primarIEs[(index % 18)],child: Text(''),);},],);}}

 如果此文章对您有所帮助，欢迎扫码关注订阅号，您的点赞、转发、评论、打赏是我继续分享的最大动力。

 

 

 

 

总结

以上是内存溢出为你收集整理的SliverAppBar 介绍及使用全部内容，希望文章能够帮你解决SliverAppBar 介绍及使用所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。