FutureBuilder FutureBuilder的用法很简单, 主要涉及两个参数:
1、future 指定异步任务，交给 FutureBuilder 来管理；
2、builder 根据异步任务的状态来构建不同的组件
| 状态 | 描述 |
| none | 没有连接到任何异步任务 |
| waiting | 已连接到异步任务等待被交互 |
| active | 已连接到一个已激活的异步任务 |
| done | 已连接到一个已结束的异步任务 |
snapshot.connectionState == ConnectionState.done只请求一个接口时
body: FutureBuilder(
future: _futureBuilderFuture,
builder: (context, AsyncSnapshot snapshot) {if (snapshot.connectionState == ConnectionState.done) {
// 说明有数据
...
}
})防止多次请求接口
这里的 _futureBuilderFuture变量是为了避免重复网络请求，所以我们有了这样的写法：
var _futureBuilderFuture;
@override
void initState() {
_futureBuilderFuture = getPointDetails();
super.initState();
}Future getPointDetails() {
var formData = https://www.it610.com/article/{"id": pointID != null ? pointID['pointId'] : "传值为空"};
return request("getPointById", formData: formData).then((value) {
pointDetailsResponse = value;
print("898pointDetailsResponse:${pointDetailsResponse}");
});
}请求两个接口时
// getIncident() 和 getPointDetails()是两个请求接口的异步方法
Future getDatas() async {
return Future.wait([getIncident(), getPointDetails()]);
}最后将 getDatas()赋给 _futureBuilderFuture即可。
【fultter用法|Flutter 使用FutureBuilder请求多个接口后再渲染页面】
推荐阅读
- 回顾 Flutter 2021 重要时刻，奉上虎年红包封面喜迎新年！
- Flutter实现左侧边栏导航
- 如何在 Flutter 创建一个后台任务
- Flutter Convex Bottom 底部导航
- Flutter动态化框架Thresh
- 基于 Riverpod 的 Flutter 状态管理
- Flutter 2022 产品路线图发布
- Flutter 插件库
- Windows Running “flutter pub get“ in XXX卡死
- Flutter之下拉刷新，上拉加载更多