今天偶然发现在谷歌爸爸的仓库下出现了一个叫做flutter-provide的状态管理框架,2月8日才第一次提交,非常新鲜。在简单上手之后感觉就是一个字——爽!所以今天就跟大家分享一下这个新的状态管理框架。
Provider被设计为ScopedModel的替代品,并且允许我们更加灵活地处理数据类型和数据。但是首先呢还是先说说老生常谈的状态管理。
在我们一开始构建应用的时候,也许很简单。我们有一些状态,直接把他们映射成视图就可以了。这种简单应用可能并不需要状态管理。
但是随着功能的增加,你的应用程序将会有几十个甚至上百个状态。这个时候你的应用应该会是这样。
Wow,这是什么鬼。我们很难再清楚的测试维护我们的状态,因为它看上去实在是太复杂了!而且还会有多个页面共享同一个状态,例如当你进入一个文章点赞,退出到外部缩略展示的时候,外部也需要显示点赞数,这时候就需要同步这两个状态。
这时候,我们便迫切的需要一个架构来帮助我们理清这些关系,状态管理框架应运而生。
和Scoped_model一样,Provide也是借助了InheritWidget,将共享状态放到顶层MaterialApp之上。底层部件通过Provier获取该状态,并通过混合ChangeNotifier通知依赖于该状态的组件刷新。
Provide还提供了Provide.stream,让我们能够以处理流的方式处理数据,不过目前还有一些问题,不推荐使用。
我们这里还是以一个简单app为例,详细介绍Provide的用法。其中涉及共享状态以及多个状态之间如何管理。
这两个页面都同时依赖于counter 和 switcher两个不同的状态。并且一个页面改变状态之后另外一个页面状态也随之改变。
该项目完整代码已放在 Github
在pubspec.yaml中添加Provide的依赖。
实际添加请参考:https://pub.dartlang.org/packages/provide#-installing-tab-
由于版本冲突添加失败请参考: https://juejin.im/post/5b8958d351882542b03e6d57
这里实际上它承担了State的职责,但是为了和官方的State区分所以叫做model。
import 'package:flutter/material.dart';
class Counter with ChangeNotifier{
int value = 0;
increment(){
value++;
notifyListeners();
}
}
这里我们可以看到,数据和操作数据的方法都在model中,我们可以很清晰的把业务分离出来。
对比Scoped_model可以发现,Provide模式中model不再需要继承Model类,只需要实现Listenable,我们这里混入ChangeNotifier,可以不用管理听众。
通过 notifyListeners 我们可以通知听众刷新。
void main() {
var counter = Counter();
var providers = Providers();
//将counter对象添加进providers
providers.provide(Provider.value(counter));
runApp(
ProviderNode(
child: MyApp(),
providers: providers),
);
}
ProviderNode封装了InheritWidget,并且提供了 一个providers容器用于放置状态。
providers内部通过 Map
Provider
同样的Provide也提供了两种获取State的方法。我们先来介绍第一种,通过Provide
Provide(
builder: (context, child, counter) {
return Text(
'${counter.value}',
style: Theme.of(context).textTheme.display1,
);
},
),
每次通知数据刷新时,builder将会重新构建这个小部件。
builder方法接收三个参数,这里主要介绍第二个和第三个。
第二个参数child:假如这个小部件足够复杂,内部有一些小部件是不会改变的,那么我们可以将这部分小部件写在Provide的child属性中,让builder不再重复创建这些小部件,以提升性能。
第三个参数counter:这个参数代表了我们获取的顶层providers中的状态
scope:通过指定ProviderScope获取该键所对应的状态。在需要使用多个相同类型状态的时候使用。
第二种获取方式:Provide.value
final currentCounter = Provide.value(context);
这种方式实际上调用了context.inheritFromWidgetOfExactType找到顶层的_InheritedProviders来获取到顶层providers中的状态。
和scoped_model不同的是,provide模式中你可以轻松组织多个状态。只需要将状态provide进provider中就可以了。
void main() {
var counter = Counter();
var switcher = Switcher();
var providers = Providers();
providers
..provide(Provider.value(counter))
..provide(Provider.value(switcher));
runApp(
ProviderNode(
child: MyApp(),
providers: providers)
);
}
在将counter添加进providers的过程中进行了一次包装。我们刚才通过分析源码知道了这个操作能够让我们处理流式数据。
通过 Provide.stream
StreamBuilder(
initialData: currentCounter,
stream: Provide.stream(context)
.where((counter) => counter.value % 2 == 0),
builder: (context, snapshot) =>
Text('Last even value: ${snapshot.data.value}')),
不过在我的使用当中出现了streamTransformer失效的情况。在firstScreen和secondScreen同样应用这一段相同的代码,second screen的where方法能够生效,过滤掉奇数数据,而first screen中则是收到了完整的数据。 具体还未找到原因,不过可以肯定的是,这个流是一个广播流。如果是我理解有问题还请大神指出,感谢
本文由 投稿者 创作,文章地址:https://blog.isoyu.com/archives/flutter-zhuangtaiguanlitebiepianprovide.html
采用知识共享署名4.0 国际许可协议进行许可。除注明转载/出处外,均为本站原创或翻译,转载前请务必署名。最后编辑时间为:2 月 21, 2019 at 11:44 下午