美文网首页
Flutter FutureBuilder捕获异步状态

Flutter FutureBuilder捕获异步状态

作者: 倪大头 | 来源:发表于2020-04-02 14:57 被阅读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的时候加载页面,其他的加一朵菊花

    相关文章

      网友评论

          本文标题:Flutter FutureBuilder捕获异步状态

          本文链接:https://www.haomeiwen.com/subject/rpjxphtx.html