flutter實(shí)戰(zhàn)4：新聞列表的懶加載和下拉手勢(shì)刷新

AlienZHOU 發(fā)布于2019-08-22 16:05 / 2784人閱讀

摘要：上一篇我們實(shí)現(xiàn)了新聞列表，但在網(wǎng)絡(luò)不好的時(shí)候列表會(huì)白屏，因此為了提高使用體驗(yàn)，往列表中加入懶加載效果。其次，引入一個(gè)內(nèi)置的手勢(shì)控件，用于支持下拉刷新列表的效果如下圖將異步執(zhí)行也進(jìn)行了控件化處理，即。

上一篇我們實(shí)現(xiàn)了新聞列表，但在網(wǎng)絡(luò)不好的時(shí)候列表會(huì)白屏，因此為了提高使用體驗(yàn)，往列表中加入懶加載效果。其次，引入一個(gè)Flutter內(nèi)置的手勢(shì)控件，用于支持下拉刷新列表的效果如下圖：

Flutter將異步執(zhí)行也進(jìn)行了控件化處理，即：Future。不過我還沒完全掌握怎么使用Future，只能把學(xué)到的跟大家分享一下，以后玩6了再補(bǔ)充。前面的分享中大家應(yīng)該也接觸并使用到了Future，比如IO操作的HTTP請(qǐng)求。除了通過async和await關(guān)鍵字以外，還可以用一個(gè)更方便的控件，可生成代碼在異步執(zhí)行時(shí)間軸上的快照，并按照自己的需求觸發(fā)需要的事件，這就是FutureBuilder控件。

FutureBuilder用法和實(shí)現(xiàn)

先簡(jiǎn)單講講FutureBuilder。

//FutureBuilder控件
new FutureBuilder(
  future: _calculation, // 用戶定義的需要異步執(zhí)行的代碼，類型為Future或者null的變量或函數(shù)
  builder: (BuildContext context, AsyncSnapshot snapshot) {      //snapshot就是_calculation在時(shí)間軸上執(zhí)行過程的狀態(tài)快照
    switch (snapshot.connectionState) {
      case ConnectionState.none: return new Text("Press button to start");    //如果_calculation未執(zhí)行則提示：請(qǐng)點(diǎn)擊開始
      case ConnectionState.waiting: return new Text("Awaiting result...");  //如果_calculation正在執(zhí)行則提示：加載中
      default:    //如果_calculation執(zhí)行完畢
        if (snapshot.hasError)    //若_calculation執(zhí)行出現(xiàn)異常
          return new Text("Error: ${snapshot.error}");
        else    //若_calculation執(zhí)行正常完成
          return new Text("Result: ${snapshot.data}");
    }
  },
)

FutureBuilder通過子屬性future獲取用戶需要異步處理的代碼，用builder回調(diào)函數(shù)暴露出異步執(zhí)行過程中的快照。我們通過builder的參數(shù)snapshot暴露的快照屬性，定義好對(duì)應(yīng)狀態(tài)下的處理代碼，即可實(shí)現(xiàn)異步執(zhí)行時(shí)的交互邏輯。

看起來似乎有點(diǎn)暈菜，可能還是不知道怎么用，讓我們看看下面這段實(shí)戰(zhàn)代碼：

snapshot.connectionState就是異步函數(shù)get(widget.newsType)的執(zhí)行狀態(tài)，用戶通過定義在ConnectionState.none和ConnectionState.waiting狀態(tài)下，輸出一個(gè)居中(Center)顯示并且內(nèi)置文字(Text)為_loading..._的卡片(Card)，其意義即：當(dāng)異步函數(shù)get(widget.newsType)未執(zhí)行和正在執(zhí)行時(shí)，屏幕正中央顯示文字：_loading..._。

當(dāng)get(widget.newsType)執(zhí)行完畢后，snapshot.connectionState的值即變?yōu)?b>ConnectionState.done，此時(shí)即可輸出根據(jù)HTTP請(qǐng)求獲取到的數(shù)據(jù)生成對(duì)應(yīng)的ListItem。由于ConnectionState.done是除了ConnectionState.none和ConnectionState.waiting以外的唯一值，所以代碼中在switch下用default即可。

由于通過FutureBuilder內(nèi)的builder()函數(shù)即可操控控件的狀態(tài)和重繪，碼農(nóng)不必通過自己寫異步狀態(tài)的判斷和多次使用setState()實(shí)現(xiàn)頁面上加載中和加載完成顯示效果的切換，因?yàn)?strong>FutureBuilder內(nèi)部自帶了執(zhí)行setState()的方法。

懶加載就這么輕松實(shí)現(xiàn)了，玩家還可以自己定義更漂亮的加載中的提示控件，FutureBuilder的控件化非常的純凈和徹底，它只做異步監(jiān)視，沒有內(nèi)置可視化控件，視覺上的處理完全交由玩家自行定義，可玩度非常高，相信很多IO操作都會(huì)用到這個(gè)控件。

RefreshIndicator的用法和實(shí)現(xiàn)

RefreshIndicator是Flutter基于Material設(shè)計(jì)語言內(nèi)置的控件，集合了下拉手勢(shì)、加載指示器和刷新操作一體，可玩性比FutureBuilder差了一大截，不過大家也用過Material設(shè)計(jì)語言的其他控件，視覺效果也不賴的，先看看控件的基本結(jié)構(gòu)：

RefreshIndicator(
  //RefreshIndicator的子元素必須是一個(gè)可以滾動(dòng)的控件
  //如果你遇到不符合條件的控件，請(qǐng)將其用可以滾動(dòng)的控件（如ListView、PageView等）包裝一下
  child: new ScrollableWidget,    
  onRefresh: loadData,    //onRefresh的回調(diào)必須是一個(gè)Future類型
)

這個(gè)控件的使用非常簡(jiǎn)單，相信大家很容易理解，然后我們來看看實(shí)戰(zhàn)代碼：

是不是很簡(jiǎn)單，如果你想對(duì)某個(gè)控件實(shí)現(xiàn)下拉手勢(shì)刷新的效果，用RefreshIndicator包裝一下，分分鐘搞定。但需要注意的就是onRefresh的回調(diào)函數(shù)必須是Future類型，另外其回調(diào)函數(shù)內(nèi)部，必須要有setState()句柄，哪怕你不更新任何狀態(tài)值，如果沒有這句，子控件就不會(huì)發(fā)生刷新動(dòng)作，這樣明顯是消耗性能且非常不優(yōu)雅的，奈何現(xiàn)在還不夠強(qiáng)大的我找不到其他辦法廢掉setState()，暫時(shí)先滿足基本要求吧，至于什么時(shí)候解決這個(gè)問題，應(yīng)該是屬于家祭無忘告乃翁系列事件吧~

最后

全篇的代碼，大家可以到我的Git中下載，將來我還會(huì)在這個(gè)APP中添加更多的功能和代碼注釋，喜歡的同學(xué)也可以star我一下，哈哈哈，讓我也浪一波。

本篇內(nèi)容不多，對(duì)Future欲望強(qiáng)烈的玩家，完全可以在IDE中Ctrl+鼠標(biāo)左鍵點(diǎn)擊代碼中的Future或FutureBuilder關(guān)鍵字，到Flutter源碼中查看其原理和說明，當(dāng)然了，和官網(wǎng)的內(nèi)容是一模一樣的。

官方文檔更新很頻繁，看得出谷歌推Flutter真的是誠意滿滿，喜歡Flutter的小伙伴，也可以加入到Flutter圈子或flutter 中文社區(qū)（官方QQ群：338252156），群里有前后端及全棧各路大神鎮(zhèn)場(chǎng)子，加入進(jìn)來沒事就寫寫APP掙點(diǎn)外快（這個(gè)真的有），順便翻譯翻譯官方英文原稿拉一票粉絲，一舉多得何樂而不為呢。