Flutter 学习之旅(四十三) Flutter 状态 scoped_model 学习

scoped_model

scoped_model 是Flutter 中最简单的状态框架 ,他主要使用了InheritedWidget 来共享状态,Microtask(微队列)来做的异步, 写的可以说是非常的小而精

想要看懂scoped_model 我们先来复习一下使用 InheritedWidget 的流程, 我们简单的将共享数据的widget 命名为Provider
,消费者命名为Consumer ,方便我们接下来的理解

创建数据模型 model 继承自 Listenable ,这个就是共享的数据重写他的 addListener removeListener 和 notifyListeners()
我们平时可以使用 ChangeNotifier ,他实现了带有 callback 的 addListener removeListener 和 notifyListeners()
创建一个数据的提供者 Provider ,他包含需要共享的数据 data,并会在被加载和移除时添加和删除监听,所以他是一个StatefulWidget,我们需要重写他的initState() dispose() 和 didUpdateWidget() 这三个方法,同时他还含有一个InheritedWidget 作为child,来为他提供一个向下传递数据的能力,

3.Provider 是提供了一个向下共享数据的能力, 我还需要一个查找着,他拥有着可以关联子widget和 Provider 的关系(并非强制 ,提供是否关联参数),我们这里写一下通用的写法

  static T of<T extends ChangeNotifier>(BuildContext buildContext,{bool rebuild=true}){
    if(rebuild){
      return buildContext.dependOnInheritedWidgetOfExactType<InheritedProvider<T>>().data;
    }
    var p= buildContext.getElementForInheritedWidgetOfExactType<InheritedProvider<T>>().widget  as InheritedProvider<T>;
    return p.data;
  }

buildContext.getElementForInheritedWidgetOfExactType 看到了这个方法有没有想起来在Element 那篇文章中,我们提到过的InheritedWidget 是如何共享数据的,没错 Widget 是通过持有element 在 element 的 mount 的方法中加载父widget 的 InheritedWidget , 所以这个方法名是以 ElementFor 开头的

4.数据的持有者提供者都有了,其实在这里我们利用上面3 的静态方法其实在子widget中就可以获取到数据了,但是如果们继续封装接受者的话,可以方便使用者调用 ,使用者就是一个普通的StatelessWidget ,我们在他内部创建一个builder
final Widget Function(BuildContext buildContext,T data) builder; 在StatelessWidget 的build 方法直接调用builder 就可以了,省去了每次都要写获取数据的步骤即 ChangeNotifyProvider.of(context,useData: true)

整个 InheritedWidget 的使用过程就已经完成了,接下来我们按照这个顺序去看scoped_model 的源码,就方便多了,每一步都会和源码中一一对应上,我们就按照上面的步骤来分析

我会删除部分代码,让大家看的更简洁,

1.创建数据模型

abstract class Model extends Listenable {
  final Set<VoidCallback> _listeners = Set<VoidCallback>();
  int _version = 0;
  int _microtaskVersion = 0;
  @override
  void addListener(VoidCallback listener) {
    _listeners.add(listener);
  }
  @override
  void removeListener(VoidCallback listener) {
    _listeners.remove(listener);
  }
  @protected
  void notifyListeners() {
  ...
    if (_microtaskVersion == _version) {
      _microtaskVersion++;
      scheduleMicrotask(() {
        _version++;
        _microtaskVersion = _version;
        _listeners.toList().forEach((VoidCallback listener) => listener());
      });
    }
  }
}

2.创建提供者一个StatefulWidget 包含 InheritedWidget ,

class ScopedModel<T extends Model> extends StatelessWidget {
  final T model;
  final Widget child;
  ScopedModel({@required this.model, @required this.child})
      : assert(model != null),
        assert(child != null);
  @override
  Widget build(BuildContext context) {
    return ModelBuilder<T>(
      model: model,
      builder: (context) => _InheritedModel<T>(model: model, child: child),
    );
  }

class ModelBuilder<T extends Model> extends StatefulWidget {
  final T model;
  final WidgetBuilder builder;
  const ModelBuilder({this.model, this.builder});
  @override
  _ModelBuilderState createState() => new _ModelBuilderState();
}
class _ModelBuilderState extends State<ModelBuilder> {
  @override
  void initState() {
    super.initState();
    widget.model.addListener(_onChange);
  }
  @override
  void didUpdateWidget(ModelBuilder oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.model != oldWidget.model) {
      oldWidget.model.removeListener(_onChange);
      widget.model.addListener(_onChange);
    }
  }
  @override
  void dispose() {
    widget.model.removeListener(_onChange);
    super.dispose();
  }
  @override
  Widget build(BuildContext context) => widget.builder(context);
  void _onChange() => setState(() {});
}

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);
}

这里他又使用了一个StatelessWidget 封装了一下我们所说的步骤,方便阅读和理解

3.创建数据查找着

class ModelFinder<T extends Model> {
  T of(BuildContext context, {bool rebuildOnChange: false}) {
    return ScopedModel.of<T>(context, rebuildOnChange: rebuildOnChange);
  }
}

  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;

4.创建消费者

class ScopedModelDescendant<T extends Model> extends StatelessWidget {
  final ScopedModelDescendantBuilder<T> builder;
  final Widget child;
  final bool rebuildOnChange;
  ScopedModelDescendant({
    @required this.builder,
    this.child,
    this.rebuildOnChange = true,
  });
  @override
  Widget build(BuildContext context) {
    return builder(
      context,
      child,
      ScopedModel.of<T>(context, rebuildOnChange: rebuildOnChange),
    );
  }
}

具体的使用方法和InheritedWidget 一致, 提供者包裹业务界面,子widget 直接提供数据模型获取数据,

仔细看一下代码,其实并没有什么难度,希望对大家的学习有所帮助

我学习flutter的整个过程都记录在里面了
https://www.jianshu.com/c/36554cb4c804

最后附上demo 地址

https://github.com/tsm19911014/tsm_flutter