Flutter ScopedModel源码浅析

297 阅读5分钟

上一篇文章简单了解了一下 ScopedModel 的用法,

这一篇文章我们来深入 ScopedModel 源码来看一下它的原理。

其实ScopedModel 只有一个文件,我们直接打开 scoped_model.dart 文件,

从上往下看。

Model

首先在最上面的是 Model ,看一下源码:

abstract class Model extends Listenable {
  final Set<VoidCallback> _listeners = Set<VoidCallback>();
  int _version = 0;
  int _microtaskVersion = 0;

  /// [listener] will be invoked when the model changes.
  @override
  void addListener(VoidCallback listener) {
    _listeners.add(listener);
  }

  /// [listener] will no longer be invoked when the model changes.
  @override
  void removeListener(VoidCallback listener) {
    _listeners.remove(listener);
  }

  /// Returns the number of listeners listening to this model.
  int get listenerCount => _listeners.length;

  /// Should be called only by [Model] when the model has changed.
  @protected
  void notifyListeners() {
    // We schedule a microtask to debounce multiple changes that can occur
    // all at once.
    if (_microtaskVersion == _version) {
      _microtaskVersion++;
      scheduleMicrotask(() {
        _version++;
        _microtaskVersion = _version;

        // Convert the Set to a List before executing each listener. This
        // prevents errors that can arise if a listener removes itself during
        // invocation!
        _listeners.toList().forEach((VoidCallback listener) => listener());
      });
    }
  }
}

Model 继承了 Listenable,至于为什么,看到后面就了解了。

前两个方法都好理解,增加/删除一个监听。

后面的 notifyListeners()方法,

最主要的逻辑就是把_version++,并消除并发 change 时所可能引发的问题。

逻辑就是首先判断 _microtaskVersion 和 version 是否相等。

如果相等,则把微任务(_microtaskVersion) ++,然后启动一个微任务来把version++,并处理 listener()。

如果不相等就不做任务,这样就消除了可能因为并发所引发的问题。

ModelFinder

该类是用来查找 Model 的,但是已经弃用了,改用 ScopedModel.of

代码如下:

/// Finds a [Model]. Deprecated: Use [ScopedModel.of] instead.
@deprecated
class ModelFinder<T extends Model> {
  /// Returns the [Model] of type [T] of the closest ancestor [ScopedModel].
  ///
  /// [Widget]s who call [of] with a [rebuildOnChange] of true will be rebuilt
  /// whenever there's a change to the returned model.
  T of(BuildContext context, {bool rebuildOnChange: false}) {
    return ScopedModel.of<T>(context, rebuildOnChange: rebuildOnChange);
  }
}

ScopedModel

该类为我们所查看的重点,毕竟库的名字就是它。

二话不说,先来看一下类上面的注释:

/// Provides a [Model] to all descendants of this Widget.
///
/// Descendant Widgets can access the model by using the
/// [ScopedModelDescendant] Widget, which rebuilds each time the model changes,
/// or directly via the [ScopedModel.of] static method.
///
/// To provide a Model to all screens, place the [ScopedModel] Widget above the
/// [WidgetsApp] or [MaterialApp] in the Widget tree.


/// 向此小部件的所有后代提供[Model]。
/// 
/// 子代小部件可以使用[ScopedModelDescendant]小部件访问Model,该小部件在每次模型更改时重建,或者直接通过[ScopedModel.of]静态方法进行访问。
/// 
/// 要向所有页面提供Model,请将[ScopedModel]小部件放在小部件树中的[WidgetsApp]或[MaterialApp]上方。

注释上面写的很明显了,如果你要向所有的页面都提供Model,那么就放在树的最上方。

再看一下代码:

class ScopedModel<T extends Model> extends StatelessWidget {
  /// The [Model] to provide to [child] and its descendants.
  final T model;

  /// The [Widget] the [model] will be available to.
  final Widget child;

  ScopedModel({@required this.model, @required this.child})
      : assert(model != null),
        assert(child != null);

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: model,
      builder: (context, _) => _InheritedModel<T>(model: model, child: child),
    );
  }

  /// Finds a [Model] provided by a [ScopedModel] Widget.
  ///
  /// Generally, you'll use a [ScopedModelDescendant] to access a model in the
  /// Widget tree and rebuild when the model changes. However, if you would to
  /// access the model directly, you can use this function instead!
  static T of<T extends Model>(
    BuildContext context, {
    bool rebuildOnChange = false,
  }) {
    final Type type = _type<_InheritedModel<T>>();

    Widget widget = rebuildOnChange
        ? context.inheritFromWidgetOfExactType(type)
        : context.ancestorWidgetOfExactType(type);

    if (widget == null) {
      throw new ScopedModelError();
    } else {
      return (widget as _InheritedModel<T>).model;
    }
  }

  static Type _type<T>() => T;
}

首先,ScopedModel 需要一个泛型来确认 Model 的类型,并且是一个无状态的 widget。

然后 ScopedModel 需要一个child Widget,这个 child Widget 就可以说是我们的 MaterialApp了。

接着是 build()方法,这就是 ScopedModel 最精髓的地方。

build() 方法

build()方法使用了 AnimatedBuilder来构建 widget,因为 AnimatedBuilder 会自动监听 animation 数据的更改。

AnimatedBuilder的参数 animation 需要的是一个 Listenable 对象,而我们的 Model 正好继承的就是Listenable。

所以我们在自定义的 Model 中,需要更新的地方手动调用 notifyListeners()

notifyListeners()前面也说了,就是把 _version++。

既然_version++了,那就达到了我们想要的目的,更新使用了该数据的UI。

of() 方法

of() 方法我们很熟悉,是用来获取 Model 的。

用起来很简单,但是里面的内容却不少,看一下源码:

static T of<T extends Model>(
  BuildContext context, {
    bool rebuildOnChange = false,
  }) {
  final Type type = _type<_InheritedModel<T>>();

  Widget widget = rebuildOnChange
    ? context.inheritFromWidgetOfExactType(type)
    : context.ancestorWidgetOfExactType(type);

  if (widget == null) {
    throw new ScopedModelError();
  } else {
    return (widget as _InheritedModel<T>).model;
  }
}

static Type _type<T>() => T;

of() 方法需要传入一个 Model 的泛型,

首先获取了一下它的 Type,随后根据 rebuildOnChange 的值用 inheritFromWidgetOfExactType/ ancestorWidgetOfExactType来查找widget。

这里解释一下这两个方法:

inheritFromWidgetOfExactType 是用来获取给定类型的最近的 widget,并且在值更新的时候自动重新构建。

ancestorWidgetOfExactType 是用来获取给定类型最近的 祖先 Widget,并且在值更新的时候不重新构建。

所以这样就控制住了没有必要的UI更新。

_InheritedModel

在上面的build 和 of 方法中,都出现了该 Model,

他其实就是一个 InheritedWidget,重写了 updateShouldNotify方法来控制重绘。

代码如下:

class _InheritedModel<T extends Model> extends InheritedWidget {
  final T model;
  final int version;

  _InheritedModel({Key key, Widget child, T model})
      : this.model = model,
        this.version = model._version,
        super(key: key, child: child);

  @override
  bool updateShouldNotify(_InheritedModel<T> oldWidget) =>
      (oldWidget.version != version);
}

重绘的逻辑就是 version 是否相同。

ScopedModelDescendant

该类就是一个包装了 ScopedModel.of方法的无状态 widget。

代码如下:

class ScopedModelDescendant<T extends Model> extends StatelessWidget {
  /// Called whenever the [Model] changes.
  final ScopedModelDescendantBuilder<T> builder;

  /// An optional constant child that does not depend on the model.  This will
  /// be passed as the child of [builder].
  final Widget child;

  /// An optional constant that determines whether the
  final bool rebuildOnChange;

  /// Constructor.
  ScopedModelDescendant({
    @required this.builder,
    this.child,
    this.rebuildOnChange = true,
  });

  @override
  Widget build(BuildContext context) {
    return builder(
      context,
      child,
      ScopedModel.of<T>(context, rebuildOnChange: rebuildOnChange),
    );
  }
}

具体就不细说了,因为几乎没有逻辑在里面。

总结

可以看到ScopedModel 的设计真的是非常巧妙,

利用 AnimatedBuilder 和 InheritWidget 来做到全局的状态管理。

关于微任务(Microtask) 和 EventQueue的理解,我会继续出一篇文章来说一下。

那多个Model如何使用?利用 mixin 就可以了。