FutureBuilder组件用于异步接收数据更新组件。其构造函数：
const FutureBuilder({
super.key,
this.future,//FutureBuilder依赖的Future，通常是一个异步耗时任务
this.initialData,//初始数据，用户设置默认数据
required this.builder,//Widget构建器；该构建器会在Future执行的不同阶段被多次调用
})
-
future：需要一个异步方法，没有参数传入，如果方法内需要参数可以设置为类参数，或全局参数。将该类方法放在Widget build之上就行。 -
builder：它是我们构建组件的策略。接收两个参数：BuildContext context,AsyncSnapshot snapshot。context上下文，snapshot就是_calculation在时间轴上执行过程的状态快照。他可以用于表示futurer的执行情况。通过判断其属性，从而执行相应的操作。
例子： HTTP 请求和读取本地数据
第一步：准备api接口
API URL（感谢 Typicode 团队为测试目的提供了很棒的 API）
https://jsonplaceholder.typicode.com/posts
第二步：安装http包
为了方便发送 HTTP 请求，我们使用pub.dev 中的http包。
dependencies:
flutter:
sdk: flutter
http: ^0.13.5
第三步：创建FutureBuilder,加载数据
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
class FutureBuilderPage extends StatefulWidget {
const FutureBuilderPage({Key? key}) : super(key: key);
@override
State<FutureBuilderPage> createState() => _FutureBuilderPageState();
}
class _FutureBuilderPageState extends State<FutureBuilderPage> {
Future<List> _loadData() async{
List posts = [];
try{
const apiUrl = 'https://jsonplaceholder.typicode.com/posts';
final http.Response response = await http.get(Uri.parse(apiUrl));
//print(response.body);
posts = jsonDecode(response.body);
}catch(err){
print(err);
}
return posts;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('FutureBuilder'),),
body: FutureBuilder(
future: _loadData(),
builder: (BuildContext ctx,AsyncSnapshot<List>snapshot){
return snapshot.hasData
? ListView.builder(
itemCount: snapshot.data!.length,
itemBuilder: (BuildContext context,index){
return Card(
margin: const EdgeInsets.all(10),
child: ListTile(
contentPadding:const EdgeInsets.all(10),
title: Text(snapshot.data![index]['title']),
subtitle: Text(snapshot.data![index]['body']),
),
);
}
)
: const Center(
child: CircularProgressIndicator(),
);
},
),
);
}
}
效果：
