flutter之状态管理provide的超简单demo

30次阅读

共计 1586 个字符,预计需要花费 4 分钟才能阅读完成。

业务流程图
简单的业务流程图,如果有用过 vuex,都是类似的东西,换汤不换药
如何使用
1、引入 provide 依赖 2、新建状态仓库 3、触发状态改变 4、页面引用创库变量
● 引入 provide 依赖
● 新建状态仓库在 lib 目录下新建 provide 文件夹,在 provide 文件夹下新建创库文件 counter.dart
import ‘package:flutter/material.dart’;

class Counter with ChangeNotifier{
int value = 0;

add(){
value++;
notifyListeners(); // 通知引用该变量地方的改变值
}
subtract(){
value–;
notifyListeners(); // 通知引用该变量地方的改变值
}
}
●触发状态改变和页面引用
import ‘package:flutter/material.dart’;
import ‘package:provide/provide.dart’;
import ‘./provide/counter.dart’;

void main(){
//main 函数里面引用 provide
var counter = Counter();
var providers =Providers();
providers..provide(Provider<Counter>.value(counter));
runApp(ProviderNode(child: MyApp(),providers: providers,));
}

class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
return MaterialApp(
title: “flutter provide”,
home: Scaffold(
appBar: AppBar(
title: Text(“flutter provide”),
),
body: Container(
child:Column(
children: <Widget>[
GetProvideValue(),
AddButton(),
SubButton(),
],
)
),
),
);
}
}
// 获取 provide 状态里面的值
class GetProvideValue extends StatelessWidget{
@override
Widget build(BuildContext context){
return Container(
child: Provide<Counter>(// 在其他页面也是用同样的方法可以引用到 provide 里面的参数
builder: (context,child,counter){
return Text(
“${counter.value}”
);
},
),
);
}
}
// 改变 provide 状态的值, 调用 provide 里面的方法
class AddButton extends StatelessWidget{
@override
Widget build(BuildContext context){
return RaisedButton(
onPressed: (){
Provide.value<Counter>(context).add();
},
child: Text(“ 增加 ”),
);
}
}
// 改变 provide 状态的值, 调用 provide 里面的方法
class SubButton extends StatelessWidget{
@override
Widget build(BuildContext context){
return RaisedButton(
onPressed: (){
Provide.value<Counter>(context).subtract();
},
child: Text(“ 减少 ”),
);
}
}
新建完项目,直接把上面 2 段代码复制就可以运行了

正文完
 0