Flutter實戰(zhàn) 異步UI更新(FutureBuilder、StreamBuilder)

很多時候我們會依賴一些異步數(shù)據(jù)來動態(tài)更新 UI，比如在打開一個頁面時我們需要先從互聯(lián)網(wǎng)上獲取數(shù)據(jù)，在獲取數(shù)據(jù)的過程中我們顯示一個加載框，等獲取到數(shù)據(jù)時我們再渲染頁面；又比如我們想展示 Stream（比如文件流、互聯(lián)網(wǎng)數(shù)據(jù)接收流）的進度。當(dāng)然，通過 StatefulWidget 我們完全可以實現(xiàn)上述這些功能。但由于在實際開發(fā)中依賴異步數(shù)據(jù)更新 UI 的這種場景非常常見，因此 Flutter 專門提供了FutureBuilder和StreamBuilder兩個組件來快速實現(xiàn)這種功能。

#7.5.1 FutureBuilder

FutureBuilder會依賴一個Future，它會根據(jù)所依賴的Future的狀態(tài)來動態(tài)構(gòu)建自身。我們看一下FutureBuilder構(gòu)造函數(shù)：

FutureBuilder({
  this.future,
  this.initialData,
  @required this.builder,
})

• future：FutureBuilder依賴的Future，通常是一個異步耗時任務(wù)。

• initialData：初始數(shù)據(jù)，用戶設(shè)置默認(rèn)數(shù)據(jù)。

• builder：Widget 構(gòu)建器；該構(gòu)建器會在Future執(zhí)行的不同階段被多次調(diào)用，構(gòu)建器簽名如下：

  Function (BuildContext context, AsyncSnapshot snapshot) 

snapshot會包含當(dāng)前異步任務(wù)的狀態(tài)信息及結(jié)果信息 ，比如我們可以通過snapshot.connectionState獲取異步任務(wù)的狀態(tài)信息、通過snapshot.hasError判斷異步任務(wù)是否有錯誤等等，完整的定義讀者可以查看AsyncSnapshot類定義。

另外，FutureBuilder的builder函數(shù)簽名和StreamBuilder的builder是相同的。

#示例

我們實現(xiàn)一個路由，當(dāng)該路由打開時我們從網(wǎng)上獲取數(shù)據(jù)，獲取數(shù)據(jù)時彈一個加載框；獲取結(jié)束時，如果成功則顯示獲取到的數(shù)據(jù)，如果失敗則顯示錯誤。由于我們還沒有介紹在 flutter 中如何發(fā)起網(wǎng)絡(luò)請求，所以在這里我們不真正去網(wǎng)絡(luò)請求數(shù)據(jù)，而是模擬一下這個過程，隔3秒后返回一個字符串：

Future<String> mockNetworkData() async {
  return Future.delayed(Duration(seconds: 2), () => "我是從互聯(lián)網(wǎng)上獲取的數(shù)據(jù)");
}

FutureBuilder使用代碼如下：

...
Widget build(BuildContext context) {
  return Center(
    child: FutureBuilder<String>(
      future: mockNetworkData(),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        // 請求已結(jié)束
        if (snapshot.connectionState == ConnectionState.done) {
          if (snapshot.hasError) {
            // 請求失敗，顯示錯誤
            return Text("Error: ${snapshot.error}");
          } else {
            // 請求成功，顯示數(shù)據(jù)
            return Text("Contents: ${snapshot.data}");
          }
        } else {
          // 請求未結(jié)束，顯示loading
          return CircularProgressIndicator();
        }
      },
    ),
  );
}

運行結(jié)果如圖7-8、7-9所示：

上面代碼中我們在builder中根據(jù)當(dāng)前異步任務(wù)狀態(tài)ConnectionState來返回不同的 widget。ConnectionState是一個枚舉類，定義如下：

enum ConnectionState {
  /// 當(dāng)前沒有異步任務(wù)，比如[FutureBuilder]的[future]為null時
  none,


  /// 異步任務(wù)處于等待狀態(tài)
  waiting,


  /// Stream處于激活狀態(tài)（流上已經(jīng)有數(shù)據(jù)傳遞了），對于FutureBuilder沒有該狀態(tài)。
  active,


  /// 異步任務(wù)已經(jīng)終止.
  done,
}

注意，ConnectionState.active只在StreamBuilder中才會出現(xiàn)。

#7.5.2 StreamBuilder

我們知道，在 Dart 中Stream 也是用于接收異步事件數(shù)據(jù)，和Future 不同的是，它可以接收多個異步操作的結(jié)果，它常用于會多次讀取數(shù)據(jù)的異步任務(wù)場景，如網(wǎng)絡(luò)內(nèi)容下載、文件讀寫等。StreamBuilder正是用于配合Stream來展示流上事件（數(shù)據(jù)）變化的 UI 組件。下面看一下StreamBuilder的默認(rèn)構(gòu)造函數(shù)：

StreamBuilder({
  Key key,
  this.initialData,
  Stream<T> stream,
  @required this.builder,
}) 

可以看到和FutureBuilder的構(gòu)造函數(shù)只有一點不同：前者需要一個future，而后者需要一個stream。

#示例

我們創(chuàng)建一個計時器的示例：每隔1秒，計數(shù)加1。這里，我們使用Stream來實現(xiàn)每隔一秒生成一個數(shù)字:

Stream<int> counter() {
  return Stream.periodic(Duration(seconds: 1), (i) {
    return i;
  });
}

StreamBuilder使用代碼如下：

 Widget build(BuildContext context) {
    return StreamBuilder<int>(
      stream: counter(), //
      //initialData: ,// a Stream<int> or null
      builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
        if (snapshot.hasError)
          return Text('Error: ${snapshot.error}');
        switch (snapshot.connectionState) {
          case ConnectionState.none:
            return Text('沒有Stream');
          case ConnectionState.waiting:
            return Text('等待數(shù)據(jù)...');
          case ConnectionState.active:
            return Text('active: ${snapshot.data}');
          case ConnectionState.done:
            return Text('Stream已關(guān)閉');
        }
        return null; // unreachable
      },
    );
 }

讀者可以自己運行本示例查看運行結(jié)果。注意，本示例只是為了演示StreamBuilder的使用，在實戰(zhàn)中，凡是 UI 會依賴多個異步數(shù)據(jù)而發(fā)生變化的場景都可以使用StreamBuilder。