flutter row 滚动_优美的应用体验 来自于细节的处理Flutter跨平台开发滑动折叠头部效果...

题记

—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精，优美的应用体验 来自于细节的处理，更源自于码农的自我要求与努力

---

Flutter是谷歌推出的最新的移动开发框架。

【x1】微信公众号的每日提醒 随时随记 每日积累 随心而过 文章底部扫码关注

【x2】各种系列的视频教程 免费开源 关注 你不会迷路

【x3】系列文章 百万 Demo 随时 复制粘贴 使用

【x4】五分钟视频快速带你浏览构建

【x5】一目了然的源码

---

如下图所示，你的APP项目中一定会应用到这样的场景。

---

以小编的性格，要实现百万Demo随时复制粘贴肯定是需要源码的

完整源码在这里

接下来一步步来实现一下，首先是小编这使用独立的一个 dart 文件作为启动入口 ，以方便 Demo 的效果实现，定义如下：

//启动函数

初始化创建一个 TabController 用来控制 TabBar 与 TabBarV​iew的联动效果：​

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随时复制粘贴肯定是需要源码的

完整源码在这里

当然以小编的性格，肯定是要有视频录制的，点击这里查看，有兴趣 你可以关注一下 西瓜视频 — 早起的年轻人