详解FutureBuilder及基本使用

详解FutureBuilder及基本使用

---

---

一、FutureBuilder介绍

主要用于跟踪future的变化并自动重绘。每次重绘时，AsyncSnapshot会描述future的最新动态，其中ConnectionState可用于判断future是否已经完成，而error与data属性则会包含一个已经完成的future内部的值。

二、FutureBuilder的核心控制器

1.AsyncSnapshot

builder: (BuildContext context , AsyncSnapshot<dynamic> snapshot)

代表Future最近的一次状态，Future状态有三种 未完成、Error、Data
在AsyncSnapshot中Future状态使用connectionState来表示

2.connectionState

none —— Future 为null的时候；
waiting —— Future真正等待 未完成
done —— Future已完成 Data || Error
active——运用于StreamBuilder

---

三、 FutureBuilder基本操作

child: FutureBuilder(
          future: Future.delayed(Duration(seconds: 3),()=>throw("Error")),  // () => 30
          initialData: 80,
          builder: (BuildContext context , AsyncSnapshot<dynamic> snapshot){
            if(snapshot.connectionState == ConnectionState.waiting){
              return CircularProgressIndicator();
            }
            if(snapshot.connectionState == ConnectionState.done){
              if(snapshot.hasError){
                return Text("Error");
              }
              return Text("${snapshot.data}",style: TextStyle(fontSize: 70));
            }
            throw "should not happen";
          },
        ),

initialDate：是snapshot的初始值
这个例子三个状态都使用到，waiting 、 done 、 none
当然一个完整的FutureBuilder应该考虑到所有可能发生的状态 、 这样程序才不会在操作中报错或者崩溃

总结

祝您乘风破浪