5、 Flutter Widgets 之 FutureBuilder

继续创造，加快生长！这是我参与「日新方案 10 月更文应战」的第5天，点击检查活动详情

展现异步使命状况

当有一个Future（异步）使命需要展现给用户时，可以使用FutureBuilder控件来完结，比如向服务器发送数据成功时显现成功提示：

import 'package:flutter/material.dart';
class WyFutureBuilder extends StatefulWidget {
  @override
  _WyFutureBuilderState createState() => _WyFutureBuilderState();
}
class _WyFutureBuilderState extends State<WyFutureBuilder> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FutureBuilder'),
      ),
      body: _creactFutureBuilder(),
    );
  }
  var _future = Future.delayed(Duration(seconds: 5), () {
    return '老王，一个有态度的程序员';
  });
  Widget _creactFutureBuilder() {
    return FutureBuilder(
        future: _future,
        builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
          var widget;
          if (snapshot.connectionState == ConnectionState.done) {
            if (snapshot.hasError) {
              widget = Icon(
                Icons.error,
                color: Colors.red,
                size: 48,
              );
            } else {
              widget = Icon(
                Icons.check_circle,
                color: Colors.green,
                size: 36,
              );
            }
          } else {
            widget = Padding(
              padding: EdgeInsets.all(20),
              child: CircularProgressIndicator(),
            );
          }
          return Center(
            child: Container(
              height: 100,
              width: 100,
              decoration: BoxDecoration(
                  border: Border.all(color: Colors.grey),
                  borderRadius: BorderRadius.all(Radius.circular(10))),
              child: widget,
            ),
          );
        });
  }
}

在Future使命中出现异常怎么处理，下面模拟出现异常，修正_future:

var _future = Future.delayed(Duration(seconds: 3), () {
    return Future.error('');
  });

builder是FutureBuilder的构建函数，在这里可以判别状况及数据显现不同的UI， ConnectionState的状况包含四种：none、waiting、active、done，但我们只需要重视done状况，此状况表示Future执行完结，snapshot参数的类型是AsyncSnapshot。

ListView加载网络数据

FutureBuilder还有一个比较常用的场景：网络加载数据并列表展现，这是一个十分常见的功能，在网络请求过程中显现loading，请求失利时显现失利UI，成功时显现成功UI。

模拟成功网络请求，通常会返回json字符串：

    var _future = Future.delayed(Duration(seconds: 3), () {
    return 'json 字符串';
  });

     //构建FutureBuilder控件：
  Widget _createListView(){
    return FutureBuilder(
        future: _future,
        builder: (context, snapshot) {
          var widget;
          if (snapshot.connectionState == ConnectionState.done) {
            if (snapshot.hasError) {
              widget = _loadingErrorWidget();
            } else {
              widget = _dataWidget(snapshot.data);
            }
          } else {
            widget = _loadingWidget();
          }
          return widget;
        });
  }
  //构建loading控件：
  _loadingWidget(){
    return Center(
      child: Padding(
        padding: EdgeInsets.all(20),
        child: CircularProgressIndicator(),
      ),
    );
  }
  //数据加载成功，构建数据展现控件：
  _dataWidget(data){
      return ListView.separated(itemBuilder: (context,index){
        return Container(
          height: 60,
          alignment: Alignment.center,
          child: Text('$index',style: TextStyle(fontSize: 20),),
        );
      },
          separatorBuilder: (context,index){
            return Divider();
          },
          itemCount: 10);
  }
//构建网络加载失利控件：
  _loadingErrorWidget() {
    return Center(
      child: Text('数据加载失利，请重试。'),
    );
  }

模拟网络加载失利：

var _future = Future.delayed(Duration(seconds: 3), () {
   return Future.error('');
 });

通过上面的示例说明FutureBuilder控件极大的简化了异步使命相关显现的控件，不再需要开发者自己维护各种状况以及更新时调用State.setState。

防止FutureBuilder重绘

FutureBuilder是一个StatefulWidget控件，如果在FutureBuilder控件节点的父节点重绘rebuild，那么FutureBuilder也会重绘，这不仅消耗不必要的资源，如果是网络请求还会消耗用户的流量，这是十分糟糕的体会，怎么解决这个问题？