flutter Provide 状态管理篇

时间:2021-11-18 17:25:04

Provide是Google官方推出的状态管理模式。官方地址为:

https://github.com/google/flutter-provide

现在Flutter的状态管理方案很多,redux、bloc、state、Provide。

  • Scoped Model : 最早的状态管理方案,我刚学Flutter的时候就使用的这个,虽然还有公司在用,但是大部分已经选用其它方案了。

  • Redux:现在国内用的最多,因为咸鱼团队一直在用,还出了自己fish redux。阿里宣布开源Flutter应用框架Fish Redux!

  • bloc:比Redux简单,而且好用,特别是一个页面里的状态管理。

  • state:缺点是耦合太强,如果是大型应用,管理起来非常混乱。

  • Provide:是在Google的Github下的一个项目,刚出现不久,所以可以推测他是Google的亲儿子。

步骤:

1. 添加依赖

2. 创建状态管理dart文件

import 'package:flutter/material.dart';

class  Counter with ChangeNotifier {
int value = 0;
increment() {
value++;
notifyListeners();
}
}

3. 将状态放入顶层

void main() {
var counter =Counter();
var providers = Providers();
//将counter对象添加进providers
providers..provide(Provider<Counter>.value(counter)); runApp(
ProviderNode(
child: MyApp(),
providers: providers,
)
);
}

Provider<Counter>.value将counter包装成了_ValueProvider。并在它的内部提供了StreamController从而实现对数据进行流式操作。

4. 获取状态

  同样的Provide也提供了两种获取State的方法。我们先来介绍第一种,通过Provide小部件获取。

class Number extends StatelessWidget {

  @override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(top: 200.0),
child: Provide<Counter>(
builder: (context, child,counter) {
return Text('${counter.value}',style: TextStyle(fontSize: 30.0),);
},
)
);
}
}

builder方法接收三个参数

  • 第一个参数context:代表上下文。
  • 第二个参数child:假如这个小部件足够复杂,内部有一些小部件是不会改变的,那么我们可以将这部分小部件写在Provide的child属性中,让builder不再重复创建这些小部件,以提升性能。
  • 第三个参数counter:这个参数代表了我们获取的顶层providers中的状态。

第二种获取方式:Provide.value<T>(context)

final currentCounter = Provide.value<Counter>(context);

5. 修改状态

Widget build(BuildContext context) {
return Container(
child: Container(
child: RaisedButton(
onPressed: () {
Provide.value<Counter>(context).increment();
},
child: Text('增加'),
),
),
);
}

获取数据流

可参考  https://juejin.im/post/5c6d4b52f265da2dc675b407