专栏首页Flutter笔记FutureBuilder源码分析

FutureBuilder源码分析

关于 FutureBuilder 的使用,我在之前的公众号文章中有写过,

如果没看过的可以跳转:Flutter FutureBuilder 异步UI神器.

FutureBuilder

首先看 FutureBuilder<T> 类。

构造函数

const FutureBuilder({
  Key key,
  this.future,
  this.initialData,
  @required this.builder,
}) : assert(builder != null),
super(key: key);

构造函数很简单,上一篇文章也说过,主要就是三个参数:

•future:是我们的异步请求,该异步请求必须不能在 build 方法中初始化!•initialData:如果Future 没有完成的情况下展示该数据•builder:构建我们的UI

AsyncWidgetBuilder

其中 builder 的类型为 AsyncWidgetBuilder,我们来看一下:

typedef AsyncWidgetBuilder<T> = Widget Function(BuildContext context, AsyncSnapshot<T> snapshot);

其中 typedef 是为函数起别名用的,

也就是说 builder 是一个方法,从而在定义builder的时候就要实现这个方法。

AsyncSnapshot

接着看一下 snapshot

@immutable
class AsyncSnapshot<T> {
  /// Creates an [AsyncSnapshot] with the specified [connectionState],
  /// and optionally either [data] or [error] (but not both).
  const AsyncSnapshot._(this.connectionState, this.data, this.error)
    : assert(connectionState != null),
      assert(!(data != null && error != null));

  /// Creates an [AsyncSnapshot] in [ConnectionState.none] with null data and error.
  const AsyncSnapshot.nothing() : this._(ConnectionState.none, null, null);

  /// Creates an [AsyncSnapshot] in the specified [state] and with the specified [data].
  const AsyncSnapshot.withData(ConnectionState state, T data) : this._(state, data, null);

  /// Creates an [AsyncSnapshot] in the specified [state] and with the specified [error].
  const AsyncSnapshot.withError(ConnectionState state, Object error) : this._(state, null, error);

  /// Current state of connection to the asynchronous computation.
  final ConnectionState connectionState;

  /// The latest data received by the asynchronous computation.
  ///
  /// If this is non-null, [hasData] will be true.
  ///
  /// If [error] is not null, this will be null. See [hasError].
  ///
  /// If the asynchronous computation has never returned a value, this may be
  /// set to an initial data value specified by the relevant widget. See
  /// [FutureBuilder.initialData] and [StreamBuilder.initialData].
  final T data;

  /// Returns latest data received, failing if there is no data.
  ///
  /// Throws [error], if [hasError]. Throws [StateError], if neither [hasData]
  /// nor [hasError].
  T get requireData {
    if (hasData)
      return data;
    if (hasError)
      throw error;
    throw StateError('Snapshot has neither data nor error');
  }

  /// The latest error object received by the asynchronous computation.
  ///
  /// If this is non-null, [hasError] will be true.
  ///
  /// If [data] is not null, this will be null.
  final Object error;

  /// Returns a snapshot like this one, but in the specified [state].
  ///
  /// The [data] and [error] fields persist unmodified, even if the new state is
  /// [ConnectionState.none].
  AsyncSnapshot<T> inState(ConnectionState state) => AsyncSnapshot<T>._(state, data, error);

  /// Returns whether this snapshot contains a non-null [data] value.
  ///
  /// This can be false even when the asynchronous computation has completed
  /// successfully, if the computation did not return a non-null value. For
  /// example, a [Future<void>] will complete with the null value even if it
  /// completes successfully.
  bool get hasData => data != null;

  /// Returns whether this snapshot contains a non-null [error] value.
  ///
  /// This is always true if the asynchronous computation's last result was
  /// failure.
  bool get hasError => error != null;

}

前面定义了一个私有的构造函数 const AsyncSnapshot._(this.connectionState, this.data, this.error)

后面用命名构造函数来调用私有构造函数返回一个 snapshot。

也可以看到 hasData hasError 其实就是判断 data/error 是否等于 null。

_FutureBuilderState

重点是 _FutureBuilderState<T>,还是从上往下看,

首先定义了两个私有变量:

/// An object that identifies the currently active callbacks. Used to avoid
/// calling setState from stale callbacks, e.g. after disposal of this state,
/// or after widget reconfiguration to a new Future.
Object _activeCallbackIdentity;
AsyncSnapshot<T> _snapshot;

_activeCallbackIdentity 根据注释来解释大概就是:标记当前还存活的对象,用于避免已经dispose了还调用setState。

_snapshot 就是我们刚才说用来返回数据的。

initState()

接着是初始化方法:

@override
void initState() {
  super.initState();
  _snapshot = AsyncSnapshot<T>.withData(ConnectionState.none, widget.initialData);
  _subscribe();
}

首先根据传入的 initialData初始化_snapshot,

然后调用_subscribe()

_subscribe()

看一下 _subscribe() 方法 :

void _subscribe() {
  if (widget.future != null) {
    final Object callbackIdentity = Object();
    _activeCallbackIdentity = callbackIdentity;
    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);
        });
      }
    });
    _snapshot = _snapshot.inState(ConnectionState.waiting);
  }
}

这里做了如下几件事:

1. 判断 future 是否为null;

2.如果不为null,则初始化 _activeCallbackIdentity 为 Object(); 3.变更 _snapshot 的状态为 ConnectionState.waiting; 4.接着对 Future 调用 then 方法,这里主要就是先判断了 callbackIdentity是否相等,如果不相等,那么这个 Future肯定是更改了,或者已经 dispose 了。如果 callbackIdentity 相等,则继续判断是有错误还是有数据,有数据就调用 AsyncSnapshot<T>.withData,有错误就调用 AsyncSnapshot<T>.withError,并传入状态。

didUpdateWidget

接着下面是 didUpdateWidget 方法,该方法主要是用来判断是否需要更新 widget:

@override
void didUpdateWidget(FutureBuilder<T> oldWidget) {
  super.didUpdateWidget(oldWidget);
  if (oldWidget.future != widget.future) {
    if (_activeCallbackIdentity != null) {
      _unsubscribe();
      _snapshot = _snapshot.inState(ConnectionState.none);
    }
    _subscribe();
  }
}

这里更新的逻辑是判断 future 是否一样,如果不一样则:

1.判断 _activeCallbackIdentity 是否为 null2.unsubscribe(),取消订阅。这里就一行代码:_activeCallbackIdentity = null;,3.把 _snapshot 的状态置为 ConnectionState.none4.subscribe(),重新订阅。

dispose()

最后就是 dispose()方法:

@override
void dispose() {
  _unsubscribe();
  super.dispose();
}

FutureBuilder 重写该方法来达到 dispose 时自动取消订阅。

总结

Future 的状态无非三种:

1.未开始2.进行中3.已完成

其中 已完成 又分为两种:

1.有数据2.有异常

其实可以看到,FutureBuilder 大体上的思路就是对 Future 状态的封装,从而达到我们想要的效果。

在 Flutter 中,我们可以通过查看源码来获取很多的灵感,因为 Flutter 的 注释写的简直不要太到位

本文分享自微信公众号 - Flutter笔记(Flutter_Note),作者:Flutter笔记

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-06-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Flutter DropdownButton简单使用及魔改源码

    前面讲过 ExpansionPanel, ExpansionPanel大部分情况用来实现展开列表等稍微复杂的业务逻辑。

    Flutter笔记
  • Flutter Wrap & Chip

    一般来讲是一个 RecyclerView + 自动换行的 layoutManager + 自定义的background。

    Flutter笔记
  • Flutter AnimatedIcon 了解一下

    •icon:通过官方解释可以看得出来,它应该是 AnimatedIcons.xxx•progress:在该字段的上方,注释也给出了解释:动画的进度,值应该是0-...

    Flutter笔记
  • 模型性能提升操作

    考虑特征重要度的因素。遵循一个原则:特征重要度越高,对这一特征下的空缺值容忍程度越低。

    Bo_hemian
  • java之集合(Set、List、Map)

    HashSet是Set接口的典型实现,大多数时候使用Set集合时都会使用这个实现类。我们大多数时候说的Set集合指的就是HashSet。

    绝命生
  • Vue 折腾记 - (10) 给axios做个挺靠谱的封装(报错,鉴权,跳转,拦截,提示)

    不推荐完全copy过去,可以看看我是如何针对我这边业务; 做的一个axios的封装及实现的思路

    CRPER
  • mpvue开发小程序过程中遇到的问题

    原生小程序开发方式与vue有些类似,所以用过vue的前端er会很容易上手。但是原生的开发体验实在糟糕,在前端组件化的今天用原生开发组件显得很无力。对于习惯vue...

    javascript.shop
  • Flutter基础widgets教程-SnackBar篇

    青年码农
  • Vue.js 2 vs Vue.js 3的实现

    vue.js核心团队已经讨论过将在Vue3实现的变化,然而API将不会一直改变,生效机理会有所不同。这意味着什么呢,同时它对你意味着什么呢?

    疯狂的技术宅
  • ThreadLocal学习笔记(二)

    上一篇我们基本了解了ThreadLocal的大致过程,也就是Thread的局部变量ThreadLocalMap的相关操作。但是在Thread类中我们看到inhe...

    程序员_备忘录

扫码关注云+社区

领取腾讯云代金券