flutter实战4:新闻列表的懒加载和下拉手势刷新

任玉刚 2019-06-27

上一篇我们实现了新闻列表,但在网络不好的时候列表会白屏,因此为了提高使用体验,往列表中加入懒加载效果。其次,引入一个Flutter内置的手势控件,用于支持下拉刷新列表的效果如下图:

flutter实战4:新闻列表的懒加载和下拉手势刷新

Flutter将异步执行也进行了控件化处理,即:Future。不过我还没完全掌握怎么使用Future,只能把学到的跟大家分享一下,以后玩6了再补充。前面的分享中大家应该也接触并使用到了Future,比如IO操作的HTTP请求。除了通过asyncawait关键字以外,还可以用一个更方便的控件,可生成代码在异步执行时间轴上的快照,并按照自己的需求触发需要的事件,这就是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暴露的快照属性,定义好对应状态下的处理代码,即可实现异步执行时的交互逻辑。

看起来似乎有点晕菜,可能还是不知道怎么用,让我们看看下面这段实战代码:

flutter实战4:新闻列表的懒加载和下拉手势刷新

  • snapshot.connectionState就是异步函数get(widget.newsType)的执行状态,用户通过定义在ConnectionState.noneConnectionState.waiting状态下,输出一个居中(Center)显示并且内置文字(Text)为_loading..._的卡片(Card),其意义即:当异步函数get(widget.newsType)未执行和正在执行时,屏幕正中央显示文字:_loading..._。
  • get(widget.newsType)执行完毕后,snapshot.connectionState的值即变为ConnectionState.done,此时即可输出根据HTTP请求获取到的数据生成对应的ListItem。由于ConnectionState.done是除了ConnectionState.noneConnectionState.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>类型
)

这个控件的使用非常简单,相信大家很容易理解,然后我们来看看实战代码:

flutter实战4:新闻列表的懒加载和下拉手势刷新

是不是很简单,如果你想对某个控件实现下拉手势刷新的效果,用RefreshIndicator包装一下,分分钟搞定。但需要注意的就是onRefresh的回调函数必须是Future<Null>类型,另外其回调函数内部,必须要有setState()句柄,哪怕你不更新任何状态值,如果没有这句,子控件就不会发生刷新动作,这样明显是消耗性能且非常不优雅的,奈何现在还不够强大的我找不到其他办法废掉setState(),暂时先满足基本要求吧,至于什么时候解决这个问题,应该是属于家祭无忘告乃翁系列事件吧~

最后

全篇的代码,大家可以到我的Git中下载,将来我还会在这个APP中添加更多的功能和代码注释,喜欢的同学也可以star我一下,哈哈哈,让我也浪一波。

本篇内容不多,对Future欲望强烈的玩家,完全可以在IDE中Ctrl+鼠标左键点击代码中的FutureFutureBuilder关键字,到Flutter源码中查看其原理和说明,当然了,和官网的内容是一模一样的。

官方文档更新很频繁,看得出谷歌推Flutter真的是诚意满满,喜欢Flutter的小伙伴,也可以加入到Flutter圈子flutter 中文社区(官方QQ群:338252156),群里有前后端及全栈各路大神镇场子,加入进来没事就写写APP挣点外快(这个真的有),顺便翻译翻译官方英文原稿拉一票粉丝,一举多得何乐而不为呢。

相关推荐