FutureBuilder 是 Flutter 中用于构建基于 Future 返回的最新计算快照(Snapshot)的 Widget。使用 FutureBuilder 可以非常方便地根据异步计算的结果来创建 UI。
基本使用
FutureBuilder 主要有两个属性：
-
future：我们要监听的Future。 -
builder：一个返回 Widget 的回调函数。这个函数的参数包括BuildContext和AsyncSnapshot，其中AsyncSnapshot包含了Future的计算结果。
使用步骤
-
定义一个
Future函数这个函数通常用来进行一些异步操作，比如网络请求。
Future<String> fetchData() async { await Future.delayed(Duration(seconds: 2)); // 模拟网络延迟 return "Data fetched"; } -
使用
FutureBuilder将定义的
Future函数与FutureBuilder一起使用，根据其执行的结果构建 UI。FutureBuilder<String>( future: fetchData(), builder: (BuildContext context, AsyncSnapshot<String> snapshot) { // 判断 Future 是否执行结束 if (snapshot.connectionState == ConnectionState.waiting) { return CircularProgressIndicator(); // 返回一个加载指示器 } else { if (snapshot.hasError) { return Text('Error: ${snapshot.error}'); } else { return Text('Data: ${snapshot.data}'); // 返回获取的数据 } } }, )
示例代码
下面是一个完整的简单示例，使用 FutureBuilder 显示从 Future 获取的数据。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('FutureBuilder Example')),
body: MyFutureBuilder(),
),
);
}
}
class MyFutureBuilder extends StatelessWidget {
// 定义一个 Future 函数来模拟获取数据的操作
Future<String> fetchData() async {
await Future.delayed(Duration(seconds: 2)); // 模拟网络延迟
return "Data fetched";
}
@override
Widget build(BuildContext context) {
return Center(
child: FutureBuilder<String>(
future: fetchData(),
builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
// 根据 snapshot 的状态返回不同的 Widget
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator(); // 如果 Future 还在运行，返回一个进度指示器
} else {
if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
} else {
return Text('Data: ${snapshot.data}'); // 如果 Future 完成且无错误返回数据
}
}
},
),
);
}
}
注意事项
-
FutureBuilder的builder方法可能会被多次调用，尤其是在Future函数执行的过程中，它可能会调用多次builder来重建 UI。 - 避免直接在
FutureBuilder的future属性中创建Future实例。如果这样做，每次build方法执行时，都会创建一个新的Future实例，导致不必要的计算。通常将Future实例定义为State对象的成员变量或者使用FutureBuilder的静态构造方法FutureBuilder.value。
