题记
—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,优美的应用体验 来自于细节的处理,更源自于码农的自我要求与努力
Flutter是谷歌推出的最新的移动开发框架。
【x1】微信公众号的每日提醒 随时随记 每日积累 随心而过 文章底部扫码关注
【x2】各种系列的视频教程 免费开源 关注 你不会迷路
【x3】系列文章 百万 Demo 随时 复制粘贴 使用
【x4】五分钟视频快速带你浏览构建
【x5】一目了然的源码
如下图所示,你的APP项目中一定会应用到这样的场景。
以小编的性格,要实现百万Demo随时复制粘贴肯定是需要源码的
完整源码在这里
接下来一步步来实现一下,首先是小编这使用独立的一个 dart 文件作为启动入口 ,以方便 Demo 的效果实现,定义如下:
//启动函数
初始化创建一个 TabController 用来控制 TabBar 与 TabBarView的联动效果:
class
对于页面的主体 使用了 Scaffold :
@
RefreshIndicator 是一个下拉刷新组件,用来触发下拉刷新效果,直接嵌套NestedScrollView滑动布局来使用
//NestedScrollView 的基本使用
NestedScrollView 中包含两部分,一部分是折叠的头部,使用SliverAppBar来实现,另一部分是滑动切换的页面主体 使用 TabBarView 来实现
//通常在用到 PageView + BottomNavigationBar 或者 TabBarView + TabBar 的时候
SliverAppBar 的实现如下:
//flexibleSpace可折叠的内容区域
SliverAppBar中有三部分,第一部分是标题部分,通过title属性配置,代码如下:
//构建SliverAppBar的标题title
第二部分就是用来折叠部分的轮播图,通过 flexibleSpace 属性配置的FlexibleSpaceBar中配置,代码如下:
buildFlexibleSpaceWidget
BannerHomepage 轮播图的实现在这里
第三部分就是通过 bottom 配置的 TabBar 标签栏,在这里结合 PreferredSize 来使用,代码如下:
//[SliverAppBar]的bottom属性配制
以小编的性格,要实现百万Demo随时复制粘贴肯定是需要源码的
完整源码在这里
当然以小编的性格,肯定是要有视频录制的,点击这里查看,有兴趣 你可以关注一下 西瓜视频 — 早起的年轻人