Flutter Widget之FutureBuilder使用範例詳解

2022-12-01 14:03:31

正文

本質上Flutter和Dart是非同步的，Dart是Futures使你能夠管理IO而不用擔心執行緒或死鎖。

例如，從應用程式外部載入資料需要時間，而Futures允許Dart先處理其他任務直到請求的資料可用。

涉及Future時如何構建Flutter小部件

輸入FutureBuilder

輸入FutureBuilder,這是處理Futures的構造器

FutureBuilder(
    future: _data,
    builder: _myBuilderFunction,
)

FutureBuilder讓你輕鬆確定Future的當前狀態並選擇在資料載入時和資料可用時顯示的內容。

首先給FutureBuilder一個Future，但是等一下，你不想在FutureBuilder裡建立Future。

正如這段程式碼所代表

每次重建FutureBuilder的parent時都會重新開始獲取資料。

相反，早些獲得Future,就像在小部件生命週期方法一樣

initState
didUpdateWidget
didChangeDependencies

因此，建立新的狀態變數並將此資料獲取請求,從FutureBuilder移到initState,在那裡我們會給它一個builder，但要確保使用connectionState檢查Future的狀態，並在Future忙碌時顯示適當的小部件

Future<MyData> _data;
initState() {
    _data = http.get('http://awessome.data'),
}
FutureBuilder(
    future: _data,
    builder: (context, snapshot) {
        if (snapshot.connectionState == done) {
            return AwesomeData(snapshot.data);
        } else {
            return CircularProgressIndicator();
        }
    }
)

最後，在Future進行解析時最好檢查有沒有發生錯誤

if (snapshot.connectionState == done) {
    if (snapshot.hasError) {
        return SomethingWenWrong();
    }
}

其他connectionStates

你也可以使用其他connectionStates

ConnectionState.active
ConnectionState.done
ConnectionState.waiting
ConnectionState.none

如果想了解有關FutureBuilder的內容，或者關於Flutter的其他功能，請存取flutter.dev

以上就是Flutter Widget之FutureBuilder使用範例詳解的詳細內容，更多關於Flutter Widget FutureBuilder的資料請關注it145.com其它相關文章！

Flutter Widget之FutureBuilder使用範例詳解

目錄

正文

涉及Future時如何構建Flutter小部件

輸入FutureBuilder

其他connectionStates

熱門文章

Flutter Widget之FutureBuilder使用範例詳解

目錄

正文

涉及Future時 如何構建Flutter小部件

輸入FutureBuilder

其他connectionStates

熱門文章

涉及Future時如何構建Flutter小部件