FutureBuilder

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

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

實(shí)際上flutter提供了一個(gè)FutureBuilder專(zhuān)門(mén)來(lái)處理需要異步的組件，下面是一個(gè)簡(jiǎn)單的示例：

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

可以看到FutureBuilder有兩個(gè)主要屬性

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

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

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

防止FutureBuilder重繪

FutureBuilder是一個(gè)StatefulWidget控件，如果父節(jié)點(diǎn)重繪rebuild那么FutureBuilder也會(huì)重繪，但是這時(shí)候可能我們根本不是要請(qǐng)求數(shù)據(jù)，可能僅僅是更新頁(yè)面上的一個(gè)文案，這樣就會(huì)造成不必要的浪費(fèi)和消耗，我們要盡量避免，所以就需要防止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是否是同一個(gè)對(duì)象來(lái)執(zhí)行重繪的，所以我們只要提前將異步任務(wù)的函數(shù)賦值給一個(gè)變量，然后在FutureBuilder中使用這個(gè)變量即可，如下：

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

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

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

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

關(guān)注公眾號(hào)：BennuCTech，獲取更多干貨！

總結(jié)

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

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