Flutter实战视频-移动电商-24.Provide状态管理基础
24.Provide状态管理基础
Flutter | 状态管理特别篇 —— Provide:https://juejin.im/post/5c6d4b52f265da2dc675b407?tdsourcetag=s_pcqq_aiomsg
点击左侧的导航右侧的导航发生变化,这属于两个widget。这两个widget之间进行通讯。用setstate的形式,耦合性太强
状态管理有这么几种方案
这里我们用Provide,谷歌自己退出的
https://github.com/google/flutter-provide
开始写测试例子
我们在购物车的页面
这是我们原来购物车的页面
在里面写我们的组件,放个center在中间,里面用column进行上下布局。放两个widget
下面来创建我们的widget
创建numberwidget
stless快速生成,中间就放一个Text
快速生成button的widget
故意用了三个widget形成了我们的的页面。展示效果:
添加状态的引用
pubspec.yaml文件内添加引用
有了provide后,做数据库仓库
lib文件夹下创建provide的文件夹,然后创建counter.dart
Counter类必须混入with ChangeNotifier
定义增加的方法:increment
然后把value的值++后,调用notifyListeners()方法通知听众,vlaue值发生了改变,局部刷新我们的widget
main.dart内
runApp(MyApp());也要进行修改
获取值
首先在购物车页面添加引用
import 'package:provide/provide.dart';
import '../provide/counter.dart';
我们如何监听它 需要在外层包裹一个provider组件。
Provide<Counter>里面有构造器builder需要传三个参数,第一个是上下文,第二个是child,第三个就是我们的counter对象
这样就是已经获取我们的状态的值了。
修改状态值
调用我们在Counter里面定义的增加的方法
在会员中心页面进行测试
member_page.dart。如果在这个页面获取Counter的值,我们就是真正的实现了全局页面的状态管理
首先添加引用,外层用Provide包裹住,然后调用builder方法
我们在购物车页面把数字加到13.
在到会员中心查看我们的counter的值,也是13.两个页面的值是相同的。这样就实现了全局的值状态管理
最终代码:
import 'package:flutter/material.dart'; class Counter with ChangeNotifier{
int value=; increment(){
value++;
notifyListeners();
}
}
counter.dart
import 'package:flutter/material.dart';
import 'package:provide/provide.dart';
import '../provide/counter.dart'; class CartPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
Number(),
MyButton()
],
),
)
);
}
} 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:Theme.of(context).textTheme.display1
);
},
),
);
}
}
class MyButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: RaisedButton(
onPressed: (){
Provide.value<Counter>(context).increment();
},
child: Text('递增'),
),
);
}
}
cart_page.dart
import 'package:flutter/material.dart';
import 'package:provide/provide.dart';
import '../provide/counter.dart'; class MemberPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child:Provide<Counter>(
builder: (context,child,counter){
return Text(
'${counter.value}',
style: Theme.of(context).textTheme.display1,
);
},
),
),
);
}
}
member_page.dart
Flutter实战视频-移动电商-24.Provide状态管理基础的更多相关文章
- Flutter实战视频-移动电商-34.列表页_小BUG的修复
34.列表页_小BUG的修复 当高粱酒的子类没有数据返回的时候就会报错. 解决接口空数据报错的问题 没有数据的时候,给用户一个友好的提示, 我们没有数据的时候还要告诉用户,提示一下他没有数据,在我们的 ...
- Flutter实战视频-移动电商-02.Flutter实战建立项目和编写入口文件
02.Flutter实战建立项目和编写入口文件 创建项目: flutter create flutter_shop 创建完成之后呢,它会提示我们, 进入flutter_shop的目录,然后执行flut ...
- Flutter实战视频-移动电商-31.列表页_列表切换交互制作
31.列表页_列表切换交互制作 博客地址:https://jspang.com/post/FlutterShop.html#toc-c42 点击左侧的大类右边的小类也跟着变化 新建provide 要改 ...
- Flutter实战视频-移动电商-35.列表页_上拉加载更多制作
35.列表页_上拉加载更多制作 右侧列表上拉加载配合类别的切换 上拉加载需要一个page参数,当点击大类或者小类的时候,这个page就要变成1 provide内定义参数 首先我们需要定义一个page的 ...
- Flutter实战视频-移动电商-25.列表页_使用Provide控制子类-1
25.列表页_使用Provide控制子类-1 主要是二级分类的UI布局 1分15秒 生成我们的右侧动态类 定义list变量 开始写里面的子项,把每一个小的写了 再拼成一个大的 这样我们的小类就写完了 ...
- Flutter实战视频-移动电商-26.列表页_使用Provide控制子类-2
26.列表页_使用Provide控制子类-2 主要实现功能,点击一级分类,二级分类跟着变.这里主要用哦我们的provide 新建provide provide文件夹下创建:child_category ...
- Flutter实战视频-移动电商-52.购物车_数据模型建立和Provide修改
52.购物车_数据模型建立和Provide修改 根据json数据生成模型类 {,"price":830.0,"images":"http://imag ...
- Flutter实战视频-移动电商-62.购物车_首页Provide化 让跳转随心所欲
62.购物车_首页Provide化 让跳转随心所欲 新建provide/currentIndex.dart 内容比较简单,定义一个变量当前页面的索引currentIndex,再定义一个方法改变它的值 ...
- Flutter实战视频-移动电商-47.详细页_Flutter_html插件的使用
47.详细页_Flutter_html插件的使用 详情里面是hemlt和图片组成的,但是flutter是不支持html的所以需要其他插件 flutter webview plugin:这个不太好用 f ...
随机推荐
- kubernetes调度之污点(taint)和容忍(toleration)
系列目录 节点亲和性(affinity),是节点的一种属性,让符合条件的pod亲附于它(倾向于或者硬性要求).污点是一种相反的行为,它会使pod抗拒此节点(即pod调度的时候不被调度到此节点) 污点和 ...
- Machine Learning: 一部气势恢宏的人工智能发展史
转载自:雷锋网 本文作者:陈圳 2016-09-12 09:46 导语:机器学习的从产生,发展,低潮和全盛的历史 雷锋网(公众号:雷锋网)按:本文作者DataCastle数据城堡,主要介绍了机器学习的 ...
- spring核心包功能解析
- Apcahe Shiro学习笔记(一):简介及运行官方Demo
一.Apache Shrio: apache shiro 是一个功能强大和易于使用的Java安全框架,为开发人员提供一个直观而全面的的解决方案的认证,授权,加密,会话管理. 支持认证跨一个或多个数据源 ...
- CCNET自动构建之路
人永远追求效率(想偷懒),不想手动编译项目.发布站点于是产生了自动构建技术,.NET领域中CCNET是个不错的选择. 一路问题不少,记录一下. 准备环境 服务器上需要有iis.vs(与开发环境的版本一 ...
- Cisco策略路由(policy route)精解(转载)
原文:http://www.guanwei.org/post/Cisconetwork/07/Cisco-policy-route_8621.html 注:PBR以前是CISCO用来丢弃报文的一个主要 ...
- 清理yum 缓存
两条命令 yum clean all 以及 rm -rf /var/cache/yum/* 如何有效的清理yum缓存 - CSDN博客 https://blog.csdn.net/nsrainbow/ ...
- 20170316 REUSE_alv_display_lvc 面向对象函数
**将ALV显示数据更新进输出内表中 DATA: LR_GRID TYPE REF TO CL_GUI_ALV_GRID. CALL FUNCTION 'GET_GLOBALS_FROM_SLV ...
- Android Weekly Notes Issue #242
Android Weekly Issue #242 January 29th, 2017 Android Weekly Issue #242 本期内容包括: Android中常用的设计模式; 基于No ...
- Java诊断工具Arthas
Java诊断工具Arthas 1. Arthas简介 Arthas是阿里开源的一个线上java诊断工具,发现阿里还是挺喜欢开源一些技术的,造福人类.昨天试用了一下,发现真是强大,解决了我工作两年的很多 ...