题记
—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,优美的应用体验 来自于细节的处理,更源自于码农的自我要求与努力
js下拉刷新当前页面、Flutter是谷歌推出的最新的移动开发框架。
【x1】微信公众号的每日提醒 随时随记 每日积累 随心而过 文章底部扫码关注
【x2】各种系列的视频教程 免费开源 关注 你不会迷路
网页无法下拉、【x3】系列文章 百万 Demo 随时 复制粘贴 使用
【x4】五分钟视频快速带你浏览构建
【x5】一目了然的源码
css滑动效果?如下图所示,你的APP项目中一定会应用到这样的场景。
以小编的性格,要实现百万Demo随时复制粘贴肯定是需要源码的
完整源码在这里
接下来一步步来实现一下,首先是小编这使用独立的一个 dart 文件作为启动入口 ,以方便 Demo 的效果实现,定义如下:
//启动函数
void main() {runApp(RootApp());
}//根目录
class RootApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(theme: ThemeData(primaryColor: Colors.grey[200]),//默认启动的页面home: HomePage(),);}
}
初始化创建一个 TabController 用来控制 TabBar 与 TabBarView的联动效果:
class HomePage extends StatefulWidget {@overrideState<StatefulWidget> createState() {return _ScrollHomePageState();}
}class _ScrollHomePageState extends State with SingleTickerProviderStateMixin {//在这里标签页面使用的是TabView所以需要创建一个控制器TabController tabController;//页面初始化方法@overridevoid initState() {super.initState();//初始化tabController = new TabController(length: 3, vsync: this);}//页面销毁回调生命周期@overridevoid dispose() {tabController.dispose();}...
}
对于页面的主体 使用了 Scaffold :
@overrideWidget build(BuildContext context) {//构建页面的主体return Scaffold(//下拉刷新body: RefreshIndicator(//可滚动组件在滚动时会发送ScrollNotification类型的通知notificationPredicate: (ScrollNotification notifation) {//该属性包含当前ViewPort及滚动位置等信息ScrollMetrics scrollMetrics = notifation.metrics;if (scrollMetrics.minScrollExtent == 0) {return true;} else {return false;}},//下拉刷新回调方法onRefresh: () async {//模拟网络刷新 等待2秒await Future.delayed(Duration(milliseconds: 2000));//返回值以结束刷新return Future.value(true);},child: buildNestedScrollView(),),);}
RefreshIndicator 是一个下拉刷新组件,用来触发下拉刷新效果,直接嵌套NestedScrollView滑动布局来使用
//NestedScrollView 的基本使用Widget buildNestedScrollView() {//滑动视图return NestedScrollView(//配置可折叠的头布局headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {return [buildSliverAppBar()];},//页面的主体内容body: buidChildWidget(),);}
NestedScrollView 中包含两部分,一部分是折叠的头部,使用SliverAppBar来实现,另一部分是滑动切换的页面主体 使用 TabBarView 来实现
//通常在用到 PageView + BottomNavigationBar 或者 TabBarView + TabBar 的时候//大家会发现当切换到另一页面的时候, 前一个页面就会被销毁, 再返回前一页时, 页面会被重建,//随之数据会重新加载, 控件会重新渲染 带来了极不好的用户体验.//由于TabBarView内部也是用的是PageView, 因此两者的解决方式相同//页面的主体内容Widget buidChildWidget() {return TabBarView(controller: tabController,children: <Widget>[ItemPage1(1),ItemPage1(2),ItemPage1(3),],);}
SliverAppBar 的实现如下:
//flexibleSpace可折叠的内容区域buildSliverAppBar() {return SliverAppBar(title: buildHeader(),//标题居中centerTitle: true,//当此值为true时 SliverAppBar 会固定在页面顶部//当此值为fase时 SliverAppBar 会随着滑动向上滑动pinned: true,//当值为true时 SliverAppBar设置的title会随着上滑动隐藏//然后配置的bottom会显示在原AppBar的位置//当值为false时 SliverAppBar设置的title会不会隐藏//然后配置的bottom会显示在原AppBar设置的title下面floating: false,//当snap配置为true时,向下滑动页面,SliverAppBar(以及其中配置的flexibleSpace内容)会立即显示出来,//反之当snap配置为false时,向下滑动时,只有当ListView的数据滑动到顶部时,SliverAppBar才会下拉显示出来。snap: false,elevation: 0.0,//展开的高度expandedHeight: 380,//AppBar下的内容区域flexibleSpace: FlexibleSpaceBar(//背景//配置的是一个widget也就是说在这里可以使用任意的//Widget组合 在这里直接使用的是一个图片background: buildFlexibleSpaceWidget(),),bottom: buildFlexibleTooBarWidget(),);}
SliverAppBar中有三部分,第一部分是标题部分,通过title属性配置,代码如下:
//构建SliverAppBar的标题titlebuildHeader() {//透明组件return Container(width: double.infinity,padding: EdgeInsets.only(left: 10),height: 38,decoration: BoxDecoration(color: Colors.white,border: Border.all(color: Colors.white),borderRadius: BorderRadius.circular(30),),child: Row(mainAxisAlignment: MainAxisAlignment.center,children: [Icon(Icons.search_rounded,size: 18,),SizedBox(width: 4,),Text("搜索",style: TextStyle(fontSize: 14,),),],),);}
第二部分就是用来折叠部分的轮播图,通过 flexibleSpace 属性配置的FlexibleSpaceBar中配置,代码如下:
buildFlexibleSpaceWidget() {return Column(children: [Container(height: 240,child: BannerHomepage(isTitle: false,),),Container(child: Row(children: [Expanded(child: Container(height: 120,color: Colors.blueGrey,child: Image.asset("images/banner5.jpeg"),),),Expanded(child: Container(color: Colors.brown,height: 120,child: Image.asset("images/banner6.jpeg"),),),],),)],);}
BannerHomepage 轮播图的实现在这里
第三部分就是通过 bottom 配置的 TabBar 标签栏,在这里结合 PreferredSize 来使用,代码如下:
//[SliverAppBar]的bottom属性配制Widget buildFlexibleTooBarWidget() {//[PreferredSize]用于配置在AppBar或者是SliverAppBar//的bottom中 实现 PreferredSizeWidgetreturn PreferredSize(//定义大小preferredSize: Size(MediaQuery.of(context).size.width, 44),//配置任意的子Widgetchild: Container(alignment: Alignment.center,child: Container(color: Colors.grey[200],//随着向上滑动,TabBar的宽度逐渐增大//父布局Container约束为 center对齐//所以程现出来的是中间x轴放大的效果width: MediaQuery.of(context).size.width,child: TabBar(controller: tabController,tabs: <Widget>[new Tab(text: "标签一",),new Tab(text: "标签二",),new Tab(text: "标签三",),],),),),);}
以小编的性格,要实现百万Demo随时复制粘贴肯定是需要源码的
完整源码在这里
当然以小编的性格,肯定是要有视频录制的,点击这里查看,有兴趣 你可以关注一下 西瓜视频 — 早起的年轻人
版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。
工作时间:8:00-18:00
客服电话
电子邮件
admin@qq.com
扫码二维码
获取最新动态