flutter Provide 状态管理篇
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('增加'),
),
),
);
}
获取数据流
flutter Provide 状态管理篇的更多相关文章
- (转)flutter 新状态管理方案 Provide (一)-使用
flutter 新状态管理方案 Provide (一)-使用 版权声明:本文为博主原创文章,基于CC4.0协议,首发于https://kikt.top ,同步发于csdn,转载必须注明出处! ...
- Flutter实战视频-移动电商-24.Provide状态管理基础
24.Provide状态管理基础 Flutter | 状态管理特别篇 —— Provide:https://juejin.im/post/5c6d4b52f265da2dc675b407?tdsour ...
- 为了弄懂Flutter的状态管理, 我用10种方法改造了counter app
为了弄懂Flutter的状态管理, 我用10种方法改造了counter app 本文通过改造flutter的counter app, 展示不同的状态管理方法的用法. 可以直接去demo地址看代码: h ...
- Flutter移动电商实战 --(24)Provide状态管理基础
Flutter | 状态管理特别篇 —— Provide:https://juejin.im/post/5c6d4b52f265da2dc675b407?tdsourcetag=s_pcqq_aiom ...
- Flutter Bloc状态管理 简单上手
我们都知道,Flutter中Widget的状态控制了UI的更新,比如最常见的StatefulWidget,通过调用setState({})方法来刷新控件.那么其他类型的控件,比如StatelessWi ...
- Flutter 对状态管理的认知与思考
前言 由 编程技术交流圣地[-Flutter群-] 发起的 状态管理研究小组,将就 状态管理 相关话题进行为期 两个月 的讨论. 目前只有内定的 5 个人参与讨论,如果你对 状态管理 有什么独特的见解 ...
- 如何给 Flutter 有状态组件(StatefulWidget)传参?
定义好一个有状态(或无状态)的组件之后,需要为其传递一些参数,希望组件能够更加灵活使用.那么,在 Flutter 中如何为其传递参数呢? 以下是 StatefulWidget 传递值的步骤,一共三步: ...
- Flutter 状态管理 flutter_Provide
项目的商品类别页面将大量的出现类和类中间的状态变化,这就需要状态管理.现在Flutter的状态管理方案很多,redux.bloc.state.Provide. Scoped Model : 最早的状态 ...
- Flutter 状态管理框架 Provider 和 Get 分析
文/ Nayuta,CFUG 社区 状态管理一直是 Flutter 开发中一个火热的话题.谈到状态管理框架,社区也有诸如有以 Get.Provider 为代表的多种方案,它们有各自的优缺点. 面对这么 ...
随机推荐
- 架构师系列文:通过Spring Cloud组件Hystrix合并请求
在前文里,我们讲述了通过Hystrix进行容错处理的方式,这里我们将讲述通过Hystrix合并请求的方式 哪怕一个URL请求调用的功能再简单,Web应用服务都至少会开启一个线程来提供服务,换句话说,有 ...
- 从零开始学习PYTHON3讲义(九)字典类型和插入排序
<从零开始PYTHON3>第九讲 第六讲.上一讲我们都介绍了列表类型.列表类型是编程中最常用的一种类型,但也有挺明显的缺陷,比如: data = [5,22,34,12,87,67,3,4 ...
- ConfirmCancelDialog【确认取消对话框】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 对确认取消对话框的封装. 前提:调用对话框的Activity必须继承FragmentActivity及其子类(比如AppCompat ...
- Entity Framework 查漏补缺 (三)
Code First的数据库映射 有两种方式来实现数据库映射: 数据属性:Data Annotation 映射配置: Fluent API 有继承关系的实体如何映射? Code First在生成数据库 ...
- 痞子衡嵌入式:飞思卡尔Kinetis系列MCU开发那些事 - 索引
大家好,我是痞子衡,是正经搞技术的痞子.本系列痞子衡给大家介绍的是飞思卡尔Kinetis系列微控制器相关知识. 飞思卡尔半导体(现恩智浦半导体)于2010年开始推出的Kinetis系列昭示着ARM C ...
- Git开发分支使用与管理规范
最稳定的代码放在 master 分支上(相当于 SVN 的 trunk 分支),我们不要直接在 master 分支上提交代码,只能在该分支上进行代码合并操作,例如将其它分支的代码合并到 master ...
- TrieTree
学习链接:https://blog.csdn.net/lisonglisonglisong/article/details/45584721 前缀树解决字符串前缀匹配问题,查找单词是否存在,统计以如“ ...
- Python二级-----------程序冲刺1
1. 仅使用 Python 基本语法,即不使用任何模块,编写 Python 程序计算下列数学表达式的结果并输出,小数点后保留3位. ...
- 折腾Java设计模式之中介者模式
博文原址:折腾Java设计模式之中介者模式 中介者模式 中介者模式(Mediator Pattern)是用来降低多个对象和类之间的通信复杂性.这种模式提供了一个中介类,该类通常处理不同类之间的通信,并 ...
- v-if与v-show的使用
vue中的v-if与v-show 区别:v-if='false'的会直接在html里删掉,浏览器中看html的结构不会有 v-show='false'只是样式为overflow:hidden; 所以很 ...