Flutter 學習筆記-Future&FutureBuilder

Mark.Hsu
馬克學習筆記
Published in
Jan 29, 2021

Ch6–3(異步)

這幾篇都是來自於大陸網路上看到的教學, 老實說都有點有看沒有懂, 但因為Hiskio Hans老師的課程要2/1之後才會開始更新, 所就這段時間先加減看…之後再回頭補上不知道的地方囉~

什麼是Future

Future表示在接下來的某個時間的值或錯誤,借助Future我們可以在Flutter實現異步操作.

Future是dart:async包中的一個類, 使用它時需要導入dart:async包, Future有兩種狀態:

  • pending-執行中;
  • completed — 執行結束, 分兩種情況, 成功/失敗.

Future的常見用法

  • 使用future.then 獲取future的值與捕獲future的異常
  • 結合async, await
  • future.whenComplete
  • future.timeout

使用future.then來獲取future的值以及捕抓future異常

如果catchError與onError同時存在, 則只會調用onError;

結合async await

Future是異步的, 如果我們要將異步轉同步, 可以借助async await來完成.

future.whenComplete

有時候我們需要在Future結束的時候做些事情, 我們知道then().catchError()的模式類似於try-catch, try-catch有個finally代碼塊, 而future.whenComplete就是Future的finally.

future.timeout

完成一個異步操作可能需要很長的時間, 例如:網路請求, 但有時我們需要為異步操作設置一個超時時間.

設定執行時間是3秒, 超過2秒就算超時, 丟出錯誤訊息

什麼是FutureBuilder

FutureBuilder是一個將異步操作與異步UI更新結合再一起的類, 通過它, 我們可以將網路請求, 數據庫讀取的結果更新在頁面上.

FutureBuilder的構造方法

https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html

FutureBuilder({Key key, Future<T> future, T initialData, @required AsyncWidgetBuilder<T> builder})
  • future: Future對象表示此builder當前連接的異步計算
  • initialData: 表示一個非空的Future完成前的初始化數據.
  • builder:AsyncWidgetBuilder類型的返回 函數, 是一個基於異步交互構建widget的函數;

這個builder函數接受兩個參數:BuilderContext context與AsyncSnapshot<T> snapshot, 它返回一個widget. AsyncSnapshot包含異步計算的信息, 它具有以下屬性:

connectionState- 枚舉ConnectionState的值, 表示與異步計算的連接狀態, ConnectionState有四個值:none、waiting、active和done; date-異步計算接收的最新數據; error-異步計算接收的最新錯誤對象;

AsyncSnapshot還具有hasData和hasError的屬性, 分別檢查它是否包含非空數據值或錯誤值.

現在我們可以看到使用FutureBuilder的基本模式. 在創建新的FutureBuilder對象時, 我們將Future對象做為要處理的異步計算傳遞.在構建函數中, 我們檢查connectionState的值, 並使用AsyncSnapshot中的數據或錯誤返回不同的窗口小部件.

FutureBuilder執行

執行結果

--

--