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=0; 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