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的时候加载页面,其他的加一朵菊花

上一篇下一篇

猜你喜欢

热点阅读