FutureBuilder

在實際開發(fā)中，進入一個頁面后執(zhí)行網(wǎng)絡請求加載數(shù)據(jù)并顯示是非常普遍的，這時候我們一般會顯示loading直到加載完成顯示正常頁面。在flutter中我們可以在initState中發(fā)起異步請求，然后將請求結果賦值給data，并setState刷新頁面，在build中可以這樣實現(xiàn)

if(data == null){return _LoadingWidget() } else{return ... }

實際上flutter提供了一個FutureBuilder專門來處理需要異步的組件，下面是一個簡單的示例：

var _future = Future.delayed(Duration(seconds: 3), () {return '服務器返回的數(shù)據(jù)';});FutureBuilder(future: _future,builder: (context, snapshot) {var widget;if (snapshot.connectionState == ConnectionState.done) {if (snapshot.hasError) {widget = Text("出錯了");} else {widget = Text(snapshot.data);}} else {widget = Padding(padding: EdgeInsets.all(20),child: CircularProgressIndicator(),);}return Center(child: widget,);},);

可以看到FutureBuilder有兩個主要屬性

• future：異步處理的任務。比如請求數(shù)據(jù)，讀取文件等等
• builder：創(chuàng)建widget。其中它的snapshot是該組件當前的狀態(tài)，我們通過它來實現(xiàn)組件的切換。

snapshot的connectionState表示異步任務的狀態(tài)，如果是ConnectionState.done表示任務完成，這時候通過snapshot.hasError來區(qū)分是出錯（顯示錯誤）還是正常完成（顯示數(shù)據(jù)）；否則就表示任務在執(zhí)行中（顯示laoding）。我們通過這些狀態(tài)來返回不同的組件來實現(xiàn)異步加載的過程。

當任務正常完成（ConnectionState.done且snapshot.hasError為false）時，我們可以通過snapshot.data來獲取異步返回的數(shù)據(jù)，再渲染頁面即可。

防止FutureBuilder重繪

FutureBuilder是一個StatefulWidget控件，如果父節(jié)點重繪rebuild那么FutureBuilder也會重繪，但是這時候可能我們根本不是要請求數(shù)據(jù)，可能僅僅是更新頁面上的一個文案，這樣就會造成不必要的浪費和消耗，我們要盡量避免，所以就需要防止FutureBuilder重繪。

FutureBuilder重繪源碼如下：

@overridevoid didUpdateWidget(FutureBuilder<T> oldWidget) {super.didUpdateWidget(oldWidget);if (oldWidget.future != widget.future) {if (_activeCallbackIdentity != null) {_unsubscribe();_snapshot = _snapshot.inState(ConnectionState.none);}_subscribe();}}

可以看到它是判斷futrue是否是同一個對象來執(zhí)行重繪的，所以我們只要提前將異步任務的函數(shù)賦值給一個變量，然后在FutureBuilder中使用這個變量即可，如下：

var _mFuture;@overridevoid initState() {// TODO: implement initStatesuper.initState();_mFuture = _future();}_future() async{...}FutureBuilder(future: _mFuture,... )

有人提到直接將函數(shù)賦值是否可以達到同樣的效果，比如：

_future() async{...}FutureBuilder(future: _future(),... )

根據(jù)網(wǎng)友的總結，是不可以的。待驗證。

關注公眾號：BennuCTech，獲取更多干貨！

總結

以上是生活随笔為你收集整理的FLutter入门：异步加载组件FutureBuilder的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。