【详解】Flutter之全局状态管理Provider

@author
As.Kai

首先导入依赖

provide: ^1.0.2

在这里插入图片描述

最新版本可上pub上查看最新版本

导入后在lib文件夹下创建状态管理Provide：
在这里插入图片描述

官网示例：
创建一个管理静态页面数据++ Demo

eg:
在provide文件夹下创建counter.dart文件:

import 'package:flutter/cupertino.dart';

class Counter with ChangeNotifier{
	int value = 0;
	increment(){
		value++;
//内部方法 用户每次调用value++方法 会通知我们执行了该方法
//局部刷新Widget
		notifyListeners();
	}
}

注意加上notifyListeners();方法表示监听和局部刷新
写完了++方法后，一定要在main.dart中写入依赖：

void main(){
//连接状态管理器
	var counter = new Counter();
	var providers = new Providers();
//依赖 (规范) 如果有多个管理器 分号在最后一个管理器结束
//改泛型和管理器名称
	providers..provide(
		Provider<Counter>.value(counter)
		);
	//多管理器配置（多管理器除最后一个分号结束，其他不需要分号）
// ..provide(Provider<Counter>.value(counter));
// ..provide(Provider<Counter>.value(counter));
	runApp(
		ProviderNode(
			child: MyApp(),providers: providers,
			)
		);
}

注意runApp（）的配置，很多人会忘记这一步配置导致程序报错
在布局页面写上一个文本和一个按钮，点击按钮文本数字加1
引用方法：
文本处需要用Provide控件包裹一下<泛型管理器名>{

该控件下有一个构造器build(

扫描二维码关注公众号，回复： 12530198 查看本文章

3个参数（上下文context,子类child，控制器counter）){
直接返回一个控件
eg:
return new Text(’${counter.value}’);即可
}
}

代码：

class Number extends StatelessWidget {
@override
Widget build(BuildContext context) {
	return Container(
	//需要包裹一层Provide<Counter>泛型
		child: new Provide<Counter>(
	//构造器
			builder: (context,child,counter){
			return new Text('${counter.value}');
				},
			),
		);
	}
}

按钮处：
点击事件中调用管理器中的++方法即可
调用方法：
Provide.value<泛型管理器类 Counter>(context).increment();

代码：

class MyButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
	return new RaisedButton(
	//点击事件
		onPressed: () {
	//通过Provide.value<>泛型的方式获取上下文后
	// 使用我们创建的increment value++方法
		Provide.value<Counter>(context).increment();
		},
			child: new Text('状态管理点击递增'),
		);
	}
}

一个简单的Provide就大功告成了 flutter run 看看效果吧！

关注我，一起成长！
-As.Kai

【详解】Flutter之全局状态管理Provider

【详解】Flutter之全局状态管理Provider

猜你喜欢