flutter实战4:新闻列表的懒加载和下拉手势刷新
上一篇我们实现了新闻列表,但在网络不好的时候列表会白屏,因此为了提高使用体验,往列表中加入懒加载效果。其次,引入一个Flutter内置的手势控件,用于支持下拉刷新列表的效果如下图:
Flutter将异步执行也进行了控件化处理,即:Future。不过我还没完全掌握怎么使用Future,只能把学到的跟大家分享一下,以后玩6了再补充。前面的分享中大家应该也接触并使用到了Future,比如IO操作的HTTP请求。除了通过async
和await
关键字以外,还可以用一个更方便的控件,可生成代码在异步执行时间轴上的快照,并按照自己的需求触发需要的事件,这就是FutureBuilder控件。
FutureBuilder用法和实现
先简单讲讲FutureBuilder。
//FutureBuilder控件
new FutureBuilder<String>(future: _calculation, // 用户定义的需要异步执行的代码,类型为Future<String>或者null的变量或函数builder: (BuildContext context, AsyncSnapshot<String> snapshot) { //snapshot就是_calculation在时间轴上执行过程的状态快照switch (snapshot.connectionState) {case ConnectionState.none: return new Text('Press button to start'); //如果_calculation未执行则提示:请点击开始case ConnectionState.waiting: return new Text('Awaiting result...'); //如果_calculation正在执行则提示:加载中default: //如果_calculation执行完毕if (snapshot.hasError) //若_calculation执行出现异常return new Text('Error: ${snapshot.error}');else //若_calculation执行正常完成return new Text('Result: ${snapshot.data}');}},
)
FutureBuilder通过子属性future
获取用户需要异步处理的代码,用builder
回调函数暴露出异步执行过程中的快照。我们通过builder
的参数snapshot
暴露的快照属性,定义好对应状态下的处理代码,即可实现异步执行时的交互逻辑。
看起来似乎有点晕菜,可能还是不知道怎么用,让我们看看下面这段实战代码:
snapshot.connectionState
就是异步函数get(widget.newsType)
的执行状态,用户通过定义在ConnectionState.none
和ConnectionState.waiting
状态下,输出一个居中(Center
)显示并且内置文字(Text
)为_loading..._的卡片(Card
),其意义即:当异步函数get(widget.newsType)
未执行和正在执行时,屏幕正中央显示文字:_loading..._。- 当
get(widget.newsType)
执行完毕后,snapshot.connectionState
的值即变为ConnectionState.done
,此时即可输出根据HTTP请求获取到的数据生成对应的ListItem。由于ConnectionState.done
是除了ConnectionState.none
和ConnectionState.waiting
以外的唯一值,所以代码中在switch
下用default
即可。
由于通过FutureBuilder内的builder()
函数即可操控控件的状态和重绘,码农不必通过自己写异步状态的判断和多次使用setState()
实现页面上加载中和加载完成显示效果的切换,因为FutureBuilder内部自带了执行setState()
的方法。
懒加载就这么轻松实现了,玩家还可以自己定义更漂亮的加载中的提示控件,FutureBuilder的控件化非常的纯净和彻底,它只做异步监视,没有内置可视化控件,视觉上的处理完全交由玩家自行定义,可玩度非常高,相信很多IO操作都会用到这个控件。
RefreshIndicator的用法和实现
RefreshIndicator是Flutter基于Material设计语言内置的控件,集合了下拉手势、加载指示器和刷新操作一体,可玩性比FutureBuilder差了一大截,不过大家也用过Material设计语言的其他控件,视觉效果也不赖的,先看看控件的基本结构:
RefreshIndicator(//RefreshIndicator的子元素必须是一个可以滚动的控件//如果你遇到不符合条件的控件,请将其用可以滚动的控件(如ListView、PageView等)包装一下child: new ScrollableWidget, onRefresh: loadData, //onRefresh的回调必须是一个Future<Null>类型
)
这个控件的使用非常简单,相信大家很容易理解,然后我们来看看实战代码:
是不是很简单,如果你想对某个控件实现下拉手势刷新的效果,用RefreshIndicator包装一下,分分钟搞定。但需要注意的就是onRefresh
的回调函数必须是Future<Null>
类型,另外其回调函数内部,必须要有setState()
句柄,哪怕你不更新任何状态值,如果没有这句,子控件就不会发生刷新动作,这样明显是消耗性能且非常不优雅的,奈何现在还不够强大的我找不到其他办法废掉setState()
,暂时先满足基本要求吧,至于什么时候解决这个问题,应该是属于家祭无忘告乃翁系列事件吧~
最后
全篇的代码,大家可以到我的Git中下载,将来我还会在这个APP中添加更多的功能和代码注释,喜欢的同学也可以star
我一下,哈哈哈,让我也浪一波。
本篇内容不多,对Future欲望强烈的玩家,完全可以在IDE中Ctrl
+鼠标左键点击代码中的Future或FutureBuilder关键字,到Flutter源码中查看其原理和说明,当然了,和官网的内容是一模一样的。
官方文档更新很频繁,看得出谷歌推Flutter真的是诚意满满,喜欢Flutter的小伙伴,也可以加入到Flutter圈子或flutter 中文社区(官方QQ群:338252156),群里有前后端及全栈各路大神镇场子,加入进来没事就写写APP挣点外快(这个真的有),顺便翻译翻译官方英文原稿拉一票粉丝,一举多得何乐而不为呢。
flutter实战4:新闻列表的懒加载和下拉手势刷新相关推荐
- 移动端 懒加载、下拉刷新、上拉加载
优势:提升性能 实现原理:图片是通过img的src属性,当对src赋值时,浏览器就会请求图片资源. 基于这个问题,我们可以利用标签的自定义属性(data-xxx),来保存图片的路径,当我们需要加载图片 ...
- Uni-app实战上加载新下拉刷新
fengrui99 电梯直达 楼主 发表于 2019-5-5 10:57 本帖最后由 fengrui99 于 2019-5-5 11:06 编辑 原文来自:https://www.frbkw.co ...
- better-scroll 上拉加载,下拉刷新(解决移动端长页面卡顿)
一.Better Scroll 滚动原理 1.下图能直观的表示better-scroll的滚动原理 2.html设置 <div class="wrapper"> < ...
- 基于iSroll 5.0实现的上拉加载和下拉刷新插件
Updownload.js 基于iSroll 5.0实现的上拉加载和下拉刷新插件 移动端效果比较好,开发者工具打开后,需要刷新下页面. [演示地址:] https://chenyk2016.githu ...
- tableview插入刷新_iOS开发之UITableView与UISearchController实现搜索及上拉加载,下拉刷新实例代码...
废话不多说了,直接给大家贴代码了. 具体代码如下所示: #import "ViewController.h" #import "TuanGouModel.h" ...
- 让你的微信小程序对用户更加友好:上拉加载和下拉刷新就是关键
前言 上拉加载和下拉刷新是小程序开发的常见需求.本文将介绍如何在微信小程序中实现上拉加载和下拉刷新的功能,为用户带来更加流畅.便捷的使用体验. 实现效果如下: 实现思路: 1. 首先需要在使用到的 j ...
- 如何实现上拉加载,下拉刷新?
如何实现上拉加载,下拉刷新? 一.前言 二.实现原理 上拉加载 下拉刷新 三.案例 小结 一.前言 下拉刷新和上拉加载这两种交互方式通常出现在移动端中 本质上等同于PC网页中的分页,只是交互形式不同 ...
- ListView上拉加载和下拉刷新多种实现方式
ListView上拉加载和下拉刷新多种实现方式 该篇为ListView下拉刷新和上拉加载实现的各种方法大合集.可能在具体的细节逻辑上处理不太到位,但基本上完成逻辑的实现.细节方面,个人可以根据自己的需 ...
- 如何实现上拉加载和下拉刷新
下拉刷新和上拉加载这两种交互⽅式通常出现在移动端中 本质上等同于PC⽹⻚中的分⻚,只是交互形式不同 开源社区也有很多优秀的解决⽅案,如 iscroll . better-scroll . pullto ...
最新文章
- [Head First设计模式]身边的设计模式——适配器模式
- website for .Net Core
- python opencv 从Intel Realsense D435 视频流中读取并显示帧,按下空格将图像保存到指定文件夹,按下回车自动以一定时间间隔保存图像至指定文件夹
- android 温度传感器获取温度,Android 温度传感器返回当前的温度
- matlab状态空间法算反馈阵,matlab中已知系统的状态方程怎样绘制系统阶跃响应曲线...
- poj 2503 Babelfish trie树!!!!指针版和数组版 基础
- tomcat 启动报错 解决办法 A child container failed duringnbsp
- 服务器修改文件后撮,xp系统的dns服务器修改办法.doc
- 红米note5解锁教程_红米NOTE5解锁包
- 如何高效读懂一本书(附10种读书方法)
- Debezium报错处理系列之三十四:The db history topic or its content is fully or partially missing. Please check d
- win10 php开发环境搭建
- python爬虫之以腾讯招聘为例,爬取动态页面
- 谈谈VR游戏中的性能优化
- CPU性能衡量参数-主频,MIPS,CPI,时钟周期,机器周期,指令周期
- 应用计算机解数学模型之我见,初中数学建模教学之我见
- 名字大作战V2.0!
- JAVA易医就医购药交互平台计算机毕业设计Mybatis+系统+数据库+调试部署
- python毕业设计作品基于django框架 校园二手书籍交易系统毕设成品(5)任务书
- 漫画 | 如何向外行解释,Bug是如何产生的?
热门文章
- 分享在淘域网申请域名的步骤
- MyBatis Plus 模糊查询报错, 但是不影响返回结果[解决]
- 吉比特2017年秋招编程题:字符串排序
- 优思学院|我应该选择六西格玛绿带还是黑带的认证课程?
- img = d2l.Image.open(‘../img/cat1.jpg‘) 路径错误问题
- [iCloud]iCloud学习笔记--APP内启用iCloud及CloudKit Dashboard介绍
- 日语学习 名词 + が + 形容词
- 嵌入式音频软件的架构
- “35岁转管理,不写代码感觉心里发虚!” “难道继续写就不虚?”
- 亚马逊云科技数据库的五大核心理念,为企业上云发展助阵