Flutter--FutureBuilder()的使用

一、概述

FutureBuilder()，一个基于Future交互的最新快照来构建自己的组件。

  const FutureBuilder({
    Key key,
    this.future,          //获取数据的方法
    this.initialData,   //初始的默认数据
    @required this.builder  //数据快照
  }) : assert(builder != null),
       super(key: key);

二、详解

FutureBuilder的三个子属性分别是
1. $\color{red}{future}$ 获取用户异步处理获得数据的代码
2. $\color{red}{initialData}$ 初始化数据加载
3. $\color{red}{builder}$ 回调函数，暴露异步处理中的快照。这个是我们构建组件的主要组成。主要来看一下它的构造函数：

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}');
    }
  },
)

看起来非常容易理解，snapshot.connectionState就是异步函数future的执行状态，总共有四种执行状态：
1.ConnectionState.none 未开始
2.ConnectionState.active (还未使用过，后续学习一下)
3.ConnectionState.waiting 加载中
4.ConnectionState.done 加载完毕
在不同的执行状态就可以加载不同的组件信息，而数据快照{snapshot.data}就是我们组件绘制的数据来源。了解了以上状态和数据信息之后，绘制页面就变得简单起来了，例如我在pdf阅读中所使用的一样

//异步加载方法
  Future<PDFPage> _loadFuture(int number) async {
    if (number >= 0 && number < _cache.length && _cache[number] != null) {
      return _cache[number];
    }
    var page = await widget.document.get(page: number + 1);
    _cache.putIfAbsent(number, () => page);
    return page;
  }

//FutureBuilder组件构建
FutureBuilder(
   future: _loadFuture(index), //异步加载方法
   builder: (BuildContext context,AsyncSnapshot<PDFPage> snapshot) {
                if (snapshot.hasError)
                       return Center(child: Text('发生错误: ${snapshot.error}'));
                            switch (snapshot.connectionState) {
                              case ConnectionState.waiting:
                                return Container(
                                      width: screenWidth,
                                      height: screenHeight - 110.px,
                                      child: Center(
                                        child: CircularProgressIndicator(),
                                      ),
                                    );
                              case ConnectionState.active:
                              case ConnectionState.done:
                                return Expanded(
                                      child: ZoomableWidget(
                                          zoomSteps: 3,
                                          minScale: 1.0,
                                          panLimit: 1.0,
                                          maxScale: 1.0,
                                          child: snapshot.data),
                                    );
                              case ConnectionState.none:
                              default:
                                return Center(
                                  child: Text('请求失败'),
                                );
                            }
                            return null;
                          },
                        ),

以上就是FutureBuilder的使用方法总结了。