Flutter 学习之旅(四十三) Flutter 状态 s
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 地址
