Flutter学习笔记（31）--异步更新UI

大家都知道，子线程不能操作UI控件，在我们Android的日常开发中，经常会遇到网络请求数据通过线程间通信，将数据发送到UI线程中去更新UI，在Flutter中是如何处理异步更新UI的呢？

今天我们介绍一下FutureBuilder。

  const FutureBuilder({
    Key key,
    this.future,
    this.initialData,
    @required this.builder,
  })

构造参数说明：

feture：接收一个Future对象，用于处理耗时操作。

initialData：默认数据。

builder：widget构建器，会在future的不同阶段多次调用。构建器签名如下：

Widget Function(BuildContext context, AsyncSnapshot<T> snapshot);

模拟一个网络请求数据回来后更新UI的场景，先看下整体的示例

import 'dart:async';

import 'package:flutter/material.dart';

class FutureBuilderDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new _FutureBuilderDemoState();
  }
}

class _FutureBuilderDemoState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FutureBuilderDemo',
      home: new Scaffold(
        appBar: AppBar(
          title: new Text('FutureBuilderDemo'),
        ),
        body: new Center(
          child: FutureBuilder<String>(
            future: mockNetworkData(),
            initialData: '我是默认的数据',
            builder: (BuildContext context, AsyncSnapshot snapshot) {
              if (snapshot.hasError) {
                return new Text('erro');
              } else {
                return new Text(snapshot.data);
              }
            },
          ),
        ),
      ),
    );
  }

  Future<String> mockNetworkData() async {
    return Future.delayed(Duration(seconds: 11), () => '我是网络请求的数据');
  }
}