flutter系列之:如丝般顺滑的SliverAppBar
文章目录
- 简介
- SliverAppBar详解
- SliverAppBar的使用
- 总结
简介
对于一个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
flutter系列之:如丝般顺滑的SliverAppBar相关推荐
- 秋大android 6.0root,小米Note刷机包 基于MINote-MIUI6_6.6.2.0稳定版深度定制 自动ROOT 丝般顺滑 超级...
小米Note刷机包 基于MINote-MIUI6_6.6.2.0稳定版深度定制 自动ROOT 丝般顺滑 超级省电 来源:rom之家 http://www.romzhijia.net UI类型:MIUI ...
- 使用Docker实现丝般顺滑的持续集成
作者简介:蒋运龙,有容云高级咨询顾问.十年来混迹于存储.三网融合.多屏互动.智能穿戴.第三方支付.Docker等行业:经历过测试.运维.实施各岗位全方位的摧残,依然活跃在技术的风头浪尖. 本文转载自 ...
- 大促密集,CDN如何保障电商体验如丝般顺滑?
简介:前不久,阿里云技术天团空降CSDN在线峰会,对核心技术竞争力进行解读.其中,阿里云高级技术专家曾福华分享了<双11: CDN如何保障电商大促如丝般顺滑>的议题.俗话说:养兵千日,用兵 ...
- 揭秘 | 大流量场景下发布如『丝般顺滑』背后的原因
简介:很多互联网公司半夜发布,只为减小用户影响,出了问题场面可控.MSE服务治理无损下线,保障了发布期间的流量,让您摆脱半夜发布的窘境. 为什么很多互联网公司不敢在白天发布,都选择在半夜发布.要是能摆 ...
- 揭秘大流量场景下发布如「丝般顺滑」背后的原因
为什么很多互联网公司不敢在白天发布,都选择在半夜发布.要是能摆脱半夜发布的窘境,它不香吗?选择在半夜发布无非是为了减少对用户的影响,出了问题影响面可控. 那我们就来谈谈,发布会有哪些问题. 若您的应用 ...
- 双十一丝般顺滑体验背后:阿里云洛神网络虚拟化系统揭秘
摘要: 摘要:2017年12月20日在北京云栖大会上,阿里云高级技术专家梵叶在计算与网络分论坛上做了主题分享<双十一丝般顺滑体验背后:阿里云洛神网络虚拟化系统揭秘>.为大家介绍了洛神系统的 ...
- 苹果手机上滑动会卡顿_7种办法解决苹果手机卡顿 让你的手机用起来如丝般顺滑...
原标题:7种办法解决苹果手机卡顿 让你的手机用起来如丝般顺滑 很多人都有这种体验,刚买的手机用起来特别爽,不管点哪个APP都是秒开,随着时间的推移,越来越卡顿,甚至有的时候直接卡死,无奈之下只好重新开 ...
- 魔兽美服服务器维护,魔兽《军团再临》美服开启 服务器不卡如丝般顺滑
原标题:魔兽<军团再临>美服开启 服务器不卡如丝般顺滑 昨天下午魔兽世界美服正式开放了新资料片<军团再临>,在开放前,玩家们纷纷在游戏蹲守等待着新版本的到来. 直播网站上魔兽世 ...
- 实测 11 款远程视频会议软件,宅家工作也能如丝般顺滑
实测 11 款远程视频会议软件,宅家工作也能如丝般顺滑 以下文章来源于超人测评 ,作者会议室钉子户超妹 来源 | 超人测评(ID:chaorencp) 撰文.制图 | 钱大姐 编辑 | 雨哥 测评官 ...
最新文章
- 一个html文档的文件主题,HTML清单
- 项目总结(3.DIBR技术项目总结(1.TOF相机及标定相关))
- web前端数组处理之扁平化数组
- 本地配置DNS服务器(MAC版)
- PHP经常使用正則表達式汇总
- 洛谷P2955题解(Java语言描述)
- 腾讯优图开源深度学习推理框架 TNN,助力 AI 开发降本增效
- opencv linux 编译好,linux下编译opencv
- 安装bt5到u盘方法与步骤
- FilterSecurityInterceptor详解
- 游戏建模中游戏人物设计要点是什么?
- 每个前端工程师都应该了解的图片知识
- selenium模拟登陆12306
- 简洁的HTML5和CSS3免费企业网站模板源码下载
- 【解决 ipad做电脑副屏镜像的问题】
- 深度学习框架之paddlepaddle
- Digital Square HDU - 4394 dfs + 剪枝
- 尼尔机械纪元安卓机器人_尼尔机械纪元手机版
- sans用计算机演奏有歌词儿,Sans toi歌词 Joyce Jonathan、曲婉婷_晴格歌词网
- IBM JDK的Java堆空间的碎片问题
热门文章
- 语音生成视频论文:Audio-driven Talking Face Video Generation with Learning-based Personalized Head Pose
- 校园二手交易android软件 基于AndroidStudio
- cpp c++ 11/14/17
- 开个什么店赚钱?这5种实体店,妥妥的推荐!
- 无需再怨恨“刘海屏”了,因为适配十分简单
- GSMA公布2018世界移动大会-上海的最新进展
- linux下文件的重命名方法
- drozer安装与使用
- 似然函数和最大似然估计
- Android界面开发