我什么时候应该使用FutureBuilder？ [英] When should I use a FutureBuilder?

问题描述

我想知道何时应该使用将来的构建器。例如，如果我要发出http请求并在列表视图中显示结果，则一旦打开视图，我是否必须使用将来的构建器或仅构建 ListViewBuilder 如：

I was wondering when I should use the future builder. For example, if I want to make an http request and show the results in a list view, as soon as you open the view, should I have to use the future builder or just build a ListViewBuilder like:

new ListView.builder(
        itemCount: _features.length,
        itemBuilder: (BuildContext context, int position) {
...stuff here...
}

此外，如果我不想构建列表视图，但想要构建一些更复杂的东西（例如圆形图表），我是否应该使用Future Builder？

Moreover, if I don't want to build a list view but some more complex stuff like circular charts, should I have to use the future builder?

希望它足够清楚！

推荐答案

FutureBuilder 删除一些样板代码。

假设您要从后端获取数据

ListBuilder的任务：

• 有两个状态变量1。 dataFromBackend 2. isLoadingFlag


• 启动时，设置 isLoadingFlag = true 并基于其中显示 loader 。


• 一旦数据到达，请使用从后端并设置 isLoadingFlag = false （显然在 setState 内部）


• 在小工具的创建中，我们需要有一个 if-else 。如果 isLoadingFlag 为 true ，则显示 loader ，否则显示数据。如果失败，则显示错误消息。

• have two state variables 1.dataFromBackend 2.isLoadingFlag
• On launch, set isLoadingFlag = true and based on which show loader.
• Once data arrival, set data with what you get from backend and set isLoadingFlag = false (inside setState obviously)
• We need to have a if-else in widget creation. If isLoadingFlag is true, show loader else show the data. If failure, show error message.

FutureBuilder的任务：

• 放弃Future Builder 未来中的异步任务


• 基于 connectionState ，显示 message （ loading ， active（数据流），完成）


• 基于 data（snapshot.hasError）显示视图

• give the async task in future of Future Builder
• based on connectionState, show message (loading, active(streams), done)
• based on data(snapshot.hasError) show view

FutureBuilder的优点

• 没有两个标志和没有 setState


• 反应性编程（ FutureBuilder 将负责更新数据到达的视图）

• no two flags and no setState
• reactive programming (FutureBuilder will take care of updating the view on data arrival)

示例：

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

性能影响：

我只是研究了 FutureBuilder 代码，以了解使用它的性能影响。

I just looked into the FutureBuilder code to understand the performance impact of using this.

• FutureBuilder只是一个 StatefulWidget ，其状态变量为 _snapshot

初始状态为 _snapshot = AsyncSnapshot< T> .withData（ConnectionState.none，widget.initialData）;

未来，我们将其发送到构造函数中并根据该状态更新状态。

It is subscribing to future which we send in constructor and updating the state based on that.

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

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

So the FutureBuilder is a wrapper/boilerplate of what we do typically. So there should not be any performance impact.

这篇关于我什么时候应该使用FutureBuilder？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！