flutter 新状态管理方案 Provide (一)-使用
开这篇文章是因为看到这个库被托管在google的仓库下,而且说明是被设计出来替代ScopedModel的,而且更加灵活
支持Builder模式和StreamBuilder模式,全局,局部都可以
内部应该是结合InheritedWidget Notification体系实现的
传统的bloc需要在每一个Repository中创建StreamController和Stream,甚至有的文章中,一个监听的修改需要修改5处,维护起来比较麻烦
相比较而言Provide维护起来会稍微省事一些
添加依赖
dependencies:
provide: ^1.0.1 # 这里的版本查看官方flutter packages get
import 'package:provide/provide.dart';使用方法
这里以简单的Counter为例
也就是在flutter的hello world工程的基础上来修改
1. 定义一个Model
这个model需要继承ChangeNotifier
class Counter with ChangeNotifier {
int _value;
int get value => _value;
Counter(this._value);
void inc() {
_value++;
notifyListeners(); //父类的方法,发出通知
}
}
2. 定义一个全局的Provide
这里虽然定义在全局,但事实上也可以定义在页面级
void main() {
var providers = Providers()..provide(Provider.function((ctx) => Counter()));
runApp(
ProviderNode(
child: MyApp(),
providers: providers,
),
);
}
ProviderNode表示的是提供者
3. 界面/监听
修改_MyHomePageState
添加一个方法,用于获取Counter实例
Counter get _counter => Provide.value<Counter>(context);将原来的Text(_counter)修改一下
这里的Provide会在Counter发生变化的时候,触发builder回调来更新界面
Provide<Counter>(
builder: (BuildContext context, Widget child, Counter counter) {
return Text(
'${counter.value}',
style: Theme.of(context).textTheme.display1,
);
},
),
4. 发出通知
接着就是发出通知了
修改floatingActionButton的点击事件
floatingActionButton: FloatingActionButton(
onPressed: () => _counter.inc(),
tooltip: 'Increment',
child: Icon(Icons.add),
),这里调用第三步获取的那个Counter,然后调用inc方法
看到这里,如果之前用过ScopedModel的朋友会问了,这个不是和以前一样吗,我为啥要改呢
继续修改
5. Stream模式
这个就很类似于bloc了,只不过model不太一样
添加一个StreamBuilder
StreamBuilder<Counter>(
initialData: _counter,
stream: Provide.stream<Counter>(context),
builder: (BuildContext context, AsyncSnapshot<Counter> snapshot) {
return Text(
'${snapshot.data.value}',
style: Theme.of(context).textTheme.display1,
);
},
),这里initialData是第三步创建的那个,stream是使用Provide.stream<Counter>(context)获取的
scope
在provide中有一个概念叫scope,类的完整类名叫ProviderScope
class ProviderScope {
final String _name;
/// Constructor
const ProviderScope(this._name);
@override
String toString() {
return "Scope ('$_name')";
}
}这个类的作用就是标识Provider的区域,或者可以理解为给Provider/Provide定义一个作用区域
只有scope相同的才可以识别
将state的代码修改一下
class _MyHomePageState extends State<MyHomePage> {
Counter get _counter => Provide.value<Counter>(context);
PageCounter pageCounter = PageCounter();
PageCounter pageCounter2 = PageCounter();
var scope1 = ProviderScope("");
var scope2 = ProviderScope("");
@override
Widget build(BuildContext context) {
return ProviderNode(
providers: Providers()
..provide(Provider.value(pageCounter), scope: scope1)
..provide(Provider.value(pageCounter2), scope: scope2),
child: Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Provide<PageCounter>(
scope: scope1,
builder:
(BuildContext context, Widget child, PageCounter counter) {
return Text(
'${counter.value}',
style: Theme.of(context).textTheme.display1,
);
},
),
Provide<PageCounter>(
scope: scope2,
builder:
(BuildContext context, Widget child, PageCounter counter) {
return Text(
'${counter.value}',
style: Theme.of(context).textTheme.display1,
);
},
),
StreamBuilder<Counter>(
initialData: _counter,
stream: Provide.stream<Counter>(context),
builder:
(BuildContext context, AsyncSnapshot<Counter> snapshot) {
return Text(
'${snapshot.data.value}',
style: Theme.of(context).textTheme.display1,
);
},
),
FlatButton(
child: Text("nextPage"),
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (BuildContext context) {
return MyHomePage(
title: "new page",
);
}));
},
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
_counter.inc();
pageCounter.inc();
pageCounter2.rec();
},
tooltip: 'Increment',
child: Icon(Icons.add),
),
),
);
}
}
这里定义了两个scope,并在Provide时进行了指定
Provide<PageCounter>(
scope: scope1,
builder:
(BuildContext context, Widget child, PageCounter counter) {
return Text(
'${counter.value}',
style: Theme.of(context).textTheme.display1,
);
},
),这样只有当对应scope1的counter发出通知时,这里才会回调,这样就满足了一个页面/一个应用中有两个相同对象的识别问题
后记
这个插件托管在google仓库下,个人觉得应该是官方很推荐的一种状态管理模式