常見場景

• 展示請求按鈕
• 用戶點擊按鈕，顯示loading
• 展示數據或者錯誤

抽象模式

1. 展示請求按鈕（初始狀態）
2. 用戶點擊按鈕，顯示loading（請求中狀態）
3. 展示數據或者錯誤 （結束狀態（成功或失敗））

轉換成程序語言

以上三種現實情況對應 AsyncSnapshot 三個狀態

• ConnectionState.none 初始態
• ConnectionState.waiting 請求態
• ConnectionState.done 完成態
  • snapshot.hasError 完成（異常）
  • snapshot.hasData  完成（正常）

使用 FutureBuilder 處理這個場景

這篇文章的主角，FutureBuilder 就是為了解決這個問題存在的。它接收一個 Future 請求，和對應以上幾種情況的 widget 回調。即可把數據和界面串聯起來，避免額外聲明僅用來傳遞數據用的變量。

提前聲明了一個 _showResult 變量，以表示頁面是否觸發請求。

并且封裝了一個 _fetch() 網絡請求。

Future<Map> _fetch() async { return (await Dio().get("https://jsonplaceholder.typicode.com/users/1")) .data;}

請求的結果是任意的，不管是封裝好的對象，map，list，都可以，只要是一個 Future<T>
把這個 Future 調用安放到 FutureBuilder 的 future 參數上， 并用 _showResult 來控制何時來觸發這個請求。

FutureBuilder( future: _showResult ? _fetch() : null, ...)

再把每一個 Future 的結果對應的 widget 設置到 builder 參數上：

FutureBuilder( ... builder: (context, snapshot) {  switch (snapshot.connectionState) {  case ConnectionState.none: // -------- 初始態   return RaisedButton(   onPressed: () {    setState(() {    _showResult = true; // 點擊按鈕，觸發請求    });   },   child: Text("start"),   );  case ConnectionState.waiting: // -------- 請求態   return CircularProgressIndicator();  case ConnectionState.done: // -------- 完成態   if (snapshot.hasError) { // 異常   return Text(    '${snapshot.error}',     style: TextStyle(color: Colors.red),   );   } else { // 正常   return Text(snapshot.data["name"]);   }   break;  default:   break;  }  return Container(); }, ),

總結

FutureBuilder 把數據請求的 Future<T> 中的數據 T 通過 Builder 的 ConnectionState 衍生出所有可能性，并在每個可能性里 return 一個 Widgets。最終實現了 state -> UI 的目的

好了，以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對武林網的支持。