FutureBuilder 删除 一些 样板代码 。

假设您要fetch data from backend启动页面并显示加载程序，直到数据到来。

ListBuilder的任务：

• 有两个状态变量1. dataFromBackend2。isLoadingFlag
• 在启动时，设置isLoadingFlag = true并根据显示loader。
• 数据到达后，请根据您的数据来设置数据backend并进行设置isLoadingFlag = false（setState显然在内部）
• 我们需要有一个if-else在widget创作。如果isLoadingFlag是true，则显示loader其他显示data。如果失败，请显示error message。

FutureBuilder的任务：

• 在futureFuture Builder中提供异步任务
• 基于connectionState，秀message（loading，active(streams)，done）
• 基于data(snapshot.hasError)显示视图

FutureBuilder的优点

• 不two flags，不setState
• 反应式编程（FutureBuilder将负责更新有关数据到达的视图）

例：

    new FutureBuilder<String>(
        future: _fetchNetworkCall, // async work
        builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
           switch (snapshot.connectionState) {
             case ConnectionState.waiting: return new Text('Loading....');
             default:
               if (snapshot.hasError)
                  return new Text('Error: ${snapshot.error}');
               else
              return new Text('Result: ${snapshot.data}');
            }
         },
        )

性能影响：

我只是看了一下FutureBuilder代码，以了解使用它的 性能 影响。

• FutureBuilder只是StatefulWidget其state变量为_snapshot
• 初始状态为 _snapshot = new AsyncSnapshot<T>.withData(ConnectionState.none, widget.initialData);
• 订阅future我们要发送的构造函数并state基于该更新。

        widget.future.then<void>((T data) {
        if (_activeCallbackIdentity == callbackIdentity) {
      setState(() {
        _snapshot = new AsyncSnapshot<T>.withData(ConnectionState.done, data);
       });
     }
    }, onError: (Object error) {
    if (_activeCallbackIdentity == callbackIdentity) {
      setState(() {
        _snapshot = new AsyncSnapshot<T>.withError(ConnectionState.done, error);
      });
     }
    });

因此，这FutureBuilder是我们通常所做的工作的包装/样板。因此，不应有任何性能影响。