Flutter_(异步UI更新）FutureBuilder、St

一、FutureBuilder和StreamBuilder两个组件来实现异步数据更新UI

由于在实际开发中依赖异步数据更新UI的这种场景非常常见，因此Flutter专门提供了FutureBuilder和StreamBuilder两个组件来快速实现这种功能。

1、FutureBuilder

FutureBuilder 的构造函数：

(new) FutureBuilder<dynamic> FutureBuilder({
  Key? 'key',
  Future<dynamic>? 'future', // 通常是一个异步耗时任务。
  dynamic 'initialData', // 初始数据，用户设置默认数据。
  required Widget Function(BuildContext, AsyncSnapshot<dynamic>) 'builder', // 该 Widget构建器会在Future执行的不同阶段被多次调用，
})

FutureBuilder会依赖一个Future，根据Future的状态来动态构建自身。

• builder 该 Widget构建器会在Future执行的不同阶段被多次调用。
  snapshot会包含当前异步任务的状态信息及结果信息，比如我们可以通过snapshot.connectionState获取异步任务的状态信息、通过snapshot.hasError判断异步任务是否有错误等等，完整的定义读者可以查看AsyncSnapshot类定义。

• 另外，FutureBuilder的builder函数签名和StreamBuilder的builder是相同的。

示例

我们实现一个路由，当该路由打开时我们从网上获取数据，获取数据时弹一个加载框；获取结束时，如果成功则显示获取到的数据，如果失败则显示错误。由于我们还没有介绍在flutter中如何发起网络请求，所以在这里我们不真正去网络请求数据，而是模拟一下这个过程，隔3秒后返回一个字符串：

Future<String> mockNetworkData() async {
  return Future.delayed(Duration(seconds: 2), () => "我是从互联网上获取的数据");
}