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挣点外快（这个真的有），顺便翻译翻译官方英文原稿拉一票粉丝，一举多得何乐而不为呢。