Flutter FutureBuilder捕获异步状态
2020-04-02 本文已影响0人
倪大头
页面加载出数据之前通常会放一朵菊花,我是这样写的:
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(child: getBody()),
);
}
getBody() {
if (dataArray == null) {
return Center(
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation(mainColor)));
} else {
return getBodyView();
}
}
还有一种处理方式,就是FutureBuilder,这个东西能监控Future当前的状态,以及Future所携带的信息
var _future;
@override
void initState() {
super.initState();
// 在initState里创建futureBuilder以防重复build
_future = onRefresh();
}
body里给一个FutureBuilder,future参数是异步方法,builder是监控这个future的widget
Widget build(BuildContext context) {
return Scaffold(
body: FutureBuilder(
builder: _buildFuture,
future: _future,
),
);
}
// snapshot就是Future在时间轴上执行过程的状态快照
Widget _buildFuture(BuildContext context, AsyncSnapshot snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.none: // 还没有开始网络请求
case ConnectionState.active: // 已连接
case ConnectionState.waiting: // 正在请求
return Center(
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation(mainColor)));
case ConnectionState.done: // 请求完成
if (snapshot.hasError) return Text('Error: ${snapshot.error}');
return getList();
}
return null;
}
只在请求完成ConnectionState.done的时候加载页面,其他的加一朵菊花