flutter實戰4：新聞列表的懶加載和下拉手勢刷新

上一篇咱們實現了新聞列表，但在網絡很差的時候列表會白屏，所以爲了提升使用體驗，往列表中加入懶加載效果。其次，引入一個Flutter內置的手勢控件，用於支持下拉刷新列表的效果以下圖：

Flutter將異步執行也進行了控件化處理，即：Future。不過我還沒徹底掌握怎麼使用Future，只能把學到的跟你們分享一下，之後玩6了再補充。前面的分享中你們應該也接觸並使用到了Future，好比IO操做的HTTP請求。除了經過async和await關鍵字之外，還能夠用一個更方便的控件，可生成代碼在異步執行時間軸上的快照，並按照本身的需求觸發須要的事件，這就是FutureBuilder控件。

FutureBuilder用法和實現

先簡單講講FutureBuilder。

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

FutureBuilder經過子屬性future獲取用戶須要異步處理的代碼，用builder回調函數暴露出異步執行過程當中的快照。咱們經過builder的參數snapshot暴露的快照屬性，定義好對應狀態下的處理代碼，便可實現異步執行時的交互邏輯。

看起來彷佛有點暈菜，可能仍是不知道怎麼用，讓咱們看看下面這段實戰代碼：

• snapshot.connectionState就是異步函數get(widget.newsType)的執行狀態，用戶經過定義在ConnectionState.none和ConnectionState.waiting狀態下，輸出一個居中(Center)顯示而且內置文字(Text)爲_loading..._的卡片(Card)，其意義即：當異步函數get(widget.newsType)未執行和正在執行時，屏幕正中央顯示文字：_loading..._。
• 當get(widget.newsType)執行完畢後，snapshot.connectionState的值即變爲ConnectionState.done，此時便可輸出根據HTTP請求獲取到的數據生成對應的ListItem。因爲ConnectionState.done是除了ConnectionState.none和ConnectionState.waiting之外的惟一值，因此代碼中在switch下用default便可。

因爲經過FutureBuilder內的builder()函數便可操控控件的狀態和重繪，碼農沒必要經過本身寫異步狀態的判斷和屢次使用setState()實現頁面上加載中和加載完成顯示效果的切換，由於FutureBuilder內部自帶了執行setState()的方法。

懶加載就這麼輕鬆實現了，玩家還能夠本身定義更漂亮的 加載中的提示控件， FutureBuilder的控件化很是的純淨和完全，它只作異步監視，沒有內置可視化控件，視覺上的處理徹底交由玩家自行定義，可玩度很是高，相信不少IO操做都會用到這個控件。

RefreshIndicator的用法和實現

RefreshIndicator是Flutter基於Material設計語言內置的控件，集合了下拉手勢、加載指示器和刷新操做一體，可玩性比FutureBuilder差了一大截，不過你們也用過Material設計語言的其餘控件，視覺效果也不賴的，先看看控件的基本結構：

RefreshIndicator(
  //RefreshIndicator的子元素必須是一個能夠滾動的控件
  //若是你遇到不符合條件的控件，請將其用能夠滾動的控件（如ListView、PageView等）包裝一下
  child: new ScrollableWidget,    
  onRefresh: loadData,    //onRefresh的回調必須是一個Future<Null>類型
)

這個控件的使用很是簡單，相信你們很容易理解，而後咱們來看看實戰代碼：

是否是很簡單，若是你想對某個控件實現下拉手勢刷新的效果，用RefreshIndicator包裝一下，分分鐘搞定。但須要注意的就是onRefresh的回調函數必須是Future<Null>類型，另外其回調函數內部，必需要有setState()句柄，哪怕你不更新任何狀態值，若是沒有這句，子控件就不會發生刷新動做，這樣明顯是消耗性能且很是不優雅的，奈何如今還不夠強大的我找不到其餘辦法廢掉setState()，暫時先知足基本要求吧，至於何時解決這個問題，應該是屬於家祭無忘告乃翁系列事件吧~

最後

全篇的代碼，你們能夠到個人Git中下載，未來我還會在這個APP中添加更多的功能和代碼註釋，喜歡的同窗也能夠star我一下，哈哈哈，讓我也浪一波。

本篇內容很少，對Future慾望強烈的玩家，徹底能夠在IDE中Ctrl+鼠標左鍵點擊代碼中的Future或FutureBuilder關鍵字，到Flutter源碼中查看其原理和說明，固然了，和官網的內容是如出一轍的。

官方文檔更新很頻繁，看得出谷歌推Flutter真的是誠意滿滿，喜歡Flutter的小夥伴，也能夠加入到Flutter圈子或flutter 中文社區（官方QQ羣：338252156），羣裏有先後端及全棧各路大神鎮場子，加入進來沒事就寫寫APP掙點外快（這個真的有），順便翻譯翻譯官方英文原稿拉一票粉絲，一舉多得何樂而不爲呢。