Flutter ListView封装,下拉刷新、上拉加载更多
Flutter ListView封装,下拉刷新、上拉加载更多
封装了Flutter的ListView,只要传递请求数据的方法和绘制item的方法进去就可以绘制ListView,同时支持下拉刷新、上拉加载更多。
主要三个文件:refresh_list_view.dart
//封装的ListView,
list_view_item.dart
//ListView的子item渲染view
refersh_list_view_demo.dart
//封装的ListView使用方法
github地址:github.com/damengzai/f…
1. refresh_list_view.dart
可以下拉刷新、上拉加载更多的ListView
@override
Widget build(BuildContext context) {
return RefreshIndicator(child: ListView.builder(itemCount: items.length,itemBuilder: (context, index) {if (widget.listItemView is Function) {return widget.listItemView(index, items[index]);}},physics: const AlwaysScrollableScrollPhysics(),controller: _scrollController,),onRefresh: _handleRefresh);}
复制代码
RefreshIndicator:一个Material风格的下拉刷新组件,包含一个可滚动的子组件,当子组件下拉是会有一个圆形刷新图标,当下拉距离足够的时候,会触发onRefresh,而在onRefresh中会去刷新数据。
当子组件太短而不能滚动的时候,需要添加
physics: const AlwaysScrollableScrollPhysics(),
否则下拉刷新和上拉加载更多都无效,无法触发了。
ListView:itemBuilder
用于渲染子item,controller添加一个ScrollController
,用于响应滚动事件,监听滚动到底部,做加载更多处理,同时ScrollController
可以跳转到指定位置,记住滚动位置等。
@override
void initState() {super.initState();_loadMore();_scrollController.addListener(() {if (_scrollController.position.pixels ==_scrollController.position.maxScrollExtent) {//滚动到最后请求更多_loadMore();}});
}
复制代码
在初始换state中首先通过_loadMore()
获取数据,同时使用_scrollController
监听滚动滚动的位置,当滚动到最底部的时候,会触发加载更多数据的方法。
//加载更多
Future _loadMore() async {if (!isLoading) {if(this.mounted) {setState(() {//通过setState去更新数据isLoading = true;});}}List moreList = await mockHttpRequest();if (this.mounted) {setState(() {items.addAll(moreList);isLoading = false;});}
}
复制代码
加载更多的方法,模拟了一个网络请求,当有数据返回的时候,通过setState
将数据更新回state中,实现UI的刷新。下拉刷新的方法类似,不做过多介绍。
2. list_view_item.dart
@override
Widget build(BuildContext context) {return Card(color: Colors.white,elevation: 4.0,child: Padding(padding: const EdgeInsets.fromLTRB(8.0, 30.0, 8.0, 30.0),child: Text(this.title,style: new TextStyle(color: Colors.blue,fontSize: 20,),),),);}
复制代码
不做过多介绍,可以根据自己的需要定制UI,现在只显示了一个TextView。
3.refresh_list_view_demo.dart
@overrideWidget build(BuildContext context) {return new Scaffold(body: new Column(children: <Widget>[new Expanded(child: RefreshListView(getListData, createListItem),),],),);}}
复制代码
getListData
、createListItem
分别是获取数据和渲染子item的方法,传递方法进去(比JAVA灵活多了)自己定制更灵活。
以上是一个下拉刷新、上拉加载更多的ListView的简单封装,后续持续优化,方便使用。
微信公众号:“Flutter入门”
Flutter ListView封装,下拉刷新、上拉加载更多相关推荐
- uni-app下拉刷新触底加载更多
首先在pages.json 配置文件中配置 "enablePullDownRefresh": true 需要在哪用加载就配置在路由的style里 两个事件 //下拉刷新 o ...
- recyclerview的数据刷新(下拉刷新和自动加载更多)以及添加提示语(例如:“数据已加载完毕”)
下拉加载更多的核心是SwipeRefreshLayout搭配Recyclerview进行使用.布局为 <android.support.v4.widget.SwipeRefreshLayout ...
- Android 自定义 ListView 上下拉动“刷新最新”和“加载更多”歌曲列表
本文内容 环境 测试数据 项目结构 演示 参考资料 本文演示,上拉刷新最新的歌曲列表,和下拉加载更多的歌曲列表.所谓"刷新最新"和"加载更多"是指日期.演示代码 ...
- Flutter开发之ListView下拉刷新上拉加载更多(35)
在Flutter开发之ListView组件(21) 文章中,我们了解了ListView组件的基本使用.但是数据比较少,没有涉及分页加载.而实际开发中,下拉刷新和分页加载几乎是所有APP的标配.在iOS ...
- 分享轮子-flutter下拉刷新上拉加载
flutter下拉上拉组件轮子 什么是flutter? 首先说下flutter,估计这个应该挺多人没听过flutter这个框架,它是一个google推出的跨平台的移动应用UI框架,和React Nat ...
- 开启Fluter基础之旅五-------ListView 3D滚动、Flipper效果、ListView下拉刷新上拉加载、ListView重排序...
继续来来操练Flutter的基础,对于Flutter的学习也有一段时间了,实操项目还木有做过,所以待这次基础学完之后就打算用一个项目对之前所学的进行一下巩固,不然光学这些零散的知识点最终还是不会Flu ...
- android listview下拉刷新动画,android 安卓 listview 支持下拉刷新 上拉加载更多
[1]重写listViewimport java.text.SimpleDateFormat; import java.util.Date; import com.example.testdddlea ...
- Android ListView 实现下拉刷新上拉加载
转载请注明出处:http://blog.csdn.net/allen315410/article/details/39965327 1.简介 无疑,在Android开发中,ListView是使用非常频 ...
- android 列表上拉加载更多,Android 下拉刷新,上拉加载更多控件–支持ListView,GridView和ScrollView...
麦洛遇到这样一个需求,实现类似于IOS下拉刷新,上拉加载更多的控件.麦洛google,baidu了一番,网上有不少实现,比较常见的是国外牛人的实现,不过国外的实现基本上都是扩展于ListView,所以 ...
- listview下拉刷新上拉加载扩展(三)-仿最新版美团外卖
本篇是基于上篇listview下拉刷新上拉加载扩展(二)-仿美团外卖改造而来,主要调整了headview的布局,并加了两个背景动画,看似高大上,其实很简单: as源码地址:http://downloa ...
最新文章
- 深圳Uber优步司机奖励政策(12月28日到1月3日)
- OpenCV学习之视频读取与帧的提取、显示及保存
- 什么是7层负载均衡?
- 理解ORACLE数据库字符集
- 常用并发工具类(并发集合类)
- Linux系统下强制踢掉登录用户
- 程序员必知的前端演进史
- 拓端tecdat|R语言Apriori算法实例——322万知乎用户的关注话题关联分析
- 塔科夫帧数测试软件,逃离塔科夫如何优化游戏FPS_画面优化设置详解_52pk
- 【渗透测试】Sunlogin-RCE(向日葵)
- imei模拟修改_自动修改android模拟设备号imei的小程序
- MTK如何烧录IMEI码(俗称串号)
- win10系统装服务器2008蓝屏,win10专业版系统出现蓝屏的原因及解决方法
- html 规定输入框必须输入
- 电信流量卡代理月入过万,怎么做到的?
- 阿里云MQ报错:The AMQP operation was interrupted: AMQP close-reason, initiated by Peer, code=403
- 实例:用C#.NET手把手教你做微信公众号开发(8)--普通消息处理之链接(普通消息终结篇)
- The ninth day_打飞机项目
- Unknown custom element: did you register the component correctly? For recursive compo
- 浅显易懂入门大数据系列:二、MapReduce、YARN(超详细)