正文

本質(zhì)上Flutter和Dart是異步的，Dart是Futures使你能夠管理IO而不用擔(dān)心線程或死鎖。

例如，從應(yīng)用程序外部加載數(shù)據(jù)需要時間，而Futures允許Dart先處理其他任務(wù)直到請求的數(shù)據(jù)可用。

涉及Future時 如何構(gòu)建Flutter小部件

輸入FutureBuilder

輸入FutureBuilder,這是處理Futures的構(gòu)造器

FutureBuilder(
    future: _data,
    builder: _myBuilderFunction,
)

FutureBuilder讓你輕松確定Future的當(dāng)前狀態(tài)并選擇在數(shù)據(jù)加載時和數(shù)據(jù)可用時顯示的內(nèi)容。

首先給FutureBuilder一個Future，但是等一下，你不想在FutureBuilder里創(chuàng)建Future。

正如這段代碼所代表

每次重建FutureBuilder的parent時都會重新開始獲取數(shù)據(jù)。

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

initState
didUpdateWidget
didChangeDependencies

因此，創(chuàng)建新的狀態(tài)變量并將此數(shù)據(jù)獲取請求,從FutureBuilder移到initState,在那里我們會給它一個builder，但要確保使用connectionState檢查Future的狀態(tài)，并在Future忙碌時顯示適當(dāng)?shù)男〔考?/p>

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進行解析時最好檢查有沒有發(fā)生錯誤

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

其他connectionStates

你也可以使用其他connectionStates

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

如果想了解有關(guān)FutureBuilder的內(nèi)容，或者關(guān)于Flutter的其他功能，請訪問flutter.dev

以上就是Flutter Widget之FutureBuilder使用示例詳解的詳細內(nèi)容，更多關(guān)于Flutter Widget FutureBuilder的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論