如何利用FutureBuilder提高開發效率

這篇文章主要介紹了如何利用FutureBuilder提高開發效率，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

常見場景

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

抽象模式

1. 展示請求按鈕（初始狀態）用戶點擊按鈕，顯示loading（請求中狀態）展示數據或者錯誤 （結束狀態（成功或失?。?/p>

轉換成程序語言

以上三種現實情況對應 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提高開發效率”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!