listview刷新_Flutter NestedScrollView 滑动折叠头部下拉刷新效果
题记
—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精。
Flutter是谷歌推出的最新的移动开发框架。
本实例运行效果如下 :
//启动函数void main() { runApp(RootApp());}//根目录class RootApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData(primaryColor: Colors.grey[200]), //默认启动的页面 home: HomePage(), ); }}
初始化创建一个 TabController 用来控制 TabBar 与 TabBarView的联动效果:
class HomePage extends StatefulWidget { @override StatecreateState() { return _ScrollHomePageState(); }}class _ScrollHomePageState extends State with SingleTickerProviderStateMixin { //在这里标签页面使用的是TabView所以需要创建一个控制器 TabController tabController; //页面初始化方法 @override void initState() { super.initState(); //初始化 tabController = new TabController(length: 3, vsync: this); } //页面销毁回调生命周期 @override void 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 的实现在这里 Flutter Pageview 实现的轮播图
第三部分就是通过 bottom 配置的 TabBar 标签栏,在这里结合 PreferredSize 来使用,代码如下:
//[SliverAppBar]的bottom属性配制 Widget buildFlexibleTooBarWidget() { //[PreferredSize]用于配置在AppBar或者是SliverAppBar //的bottom中 实现 PreferredSizeWidget return PreferredSize( //定义大小 preferredSize: Size(MediaQuery.of(context).size.width, 44), //配置任意的子Widget child: 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: [ new Tab( text: "标签一", ), new Tab( text: "标签二", ), new Tab( text: "标签三", ), ], ), ), ), ); }
点击查看原文来获取源码。
listview刷新_Flutter NestedScrollView 滑动折叠头部下拉刷新效果相关推荐
- Flutter NestedScrollView 滑动折叠头部下拉刷新效果
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,优美的应用体验 来自于细节的处理,更源自于码农的自我要求与努力 Flutter是谷歌推出的最新的移动开发框架. [x1]微信公众号的每日 ...
- Android ListView 疯狂之旅 之 《自定义下拉刷新功能的ListView》
效果图: 一 首先创建一个类,继承ListView,编写其构造方法 public class RefreshListView extends ListView {public RefreshListV ...
- AUI tab实现页签滑动切换且下拉刷新(下拉固定title栏及tab栏)
声明:菜鸟一枚,入坑不久,如有欠缺,望大神给予好的建议,完善优化,分享他人. AUI tab实现页签滑动切换且下拉刷新(下拉固定title栏及tab栏) 1:aui tab分页签,手动侧滑或点击TAB ...
- android禁止下拉刷新,Android开发之无痕过渡下拉刷新控件的实现思路详解
相信大家已经对下拉刷新熟悉得不能再熟悉了,市面上的下拉刷新琳琅满目,然而有很多在我看来略有缺陷,接下来我将说明一下存在的缺陷问题,然后提供一种思路来解决这一缺陷,废话不多说!往下看嘞! 1.市面一些下 ...
- 小程序中scroll-view的下拉刷新和小程序页面的下拉刷新开启方法
scroll-view的下拉刷新 video.wxml中 <scroll-view class="videoScroll" scroll-y="true" ...
- android 下拉刷新数据,如何剥离Android页面下拉刷新、加载下一页等逻辑?
最近碰到一个新的页面控制需求:下拉刷新如果失败,listview上面的数据需要保留,然后悲剧的发现之前写的NetFragment和ListNetFragment都不能覆盖这种逻辑,又要重写了.痛定思痛 ...
- android 下拉刷新 组件,android系统自带下拉刷新控件的实现
android系统自带的下拉刷新控件SwipeRefreshLayout位于android.support.v4.widget包下,实现步骤如下: 1.在布局文件中添加该控件,该控件一般作为父控件,而 ...
- android google 下拉刷新 csdn,android SwipeRefreshLayout google官方下拉刷新控件
下拉刷新功能之前一直使用的是XlistView很方便我前面的博客有介绍 SwipeRefreshLayout是google官方推出的下拉刷新控件使用方法也比较简单 今天就来使用下SwipeRefres ...
- android 下拉刷新实现方式,Android RecyclerView设置下拉刷新的实现方法
Android RecyclerView设置下拉刷新的实现方法 1 集成 SwipeRefreshLayout 1.1 xml布局文件中使用 android:id="@+id/refresh ...
最新文章
- JavaScript社区开发者调查:服务端JS盛行 AngularJS使用者最多
- 买空long position、卖空short position
- nano编辑器使用教程
- MyEclipse JAVA提示信息配置
- 手把手教你做用户画像:3种标签类型、8大系统模块
- 通过Python实现简单的计算器
- Qt Widgets——子区域和子窗口
- 生活娱乐 长的最奇怪的东西——骡耳犰狳
- [网络安全自学篇] 八十五.《Windows黑客编程技术详解》之注入技术详解(全局钩子、远线程钩子、突破Session 0注入、APC注入)
- VM虚拟机BT5下对usb无线网卡的配置
- 计算机系统适应社会不断发展,教师招聘《中学教育心理学》通关试题每日练(2020年11月27日-944)...
- [附源码]JAVA+ssm计算机毕业设计房屋租赁管理系统设计(程序+Lw)
- python3+requests+BeautifulSoup+mysql爬取豆瓣电影top250
- matlab求最大公倍数_matlab求最大公约数和最小公倍数
- 【推荐】我的FLASH情结2010——浅谈FLASH WEB GAME与创业(3)
- 六、MySQL之数据定义语言(一)
- kbe常用宏展开示例(CLIENT_MESSAGE_DECLARE_STREAM)
- OLEDB数据源和目标组件
- 微信公众平台开发,第一章
- 糟心的租房经历——以此为戒