简单的业务流程图,若是有用过vuex,都是相似的东西,换汤不换药vue
一、引入provide依赖
二、新建状态仓库
三、触发状态改变
四、页面引用创库变量vuex
● 引入provide依赖app
● 新建状态仓库
在lib目录下新建provide文件夹,在provide文件夹下新建创库文件counter.dartless
import 'package:flutter/material.dart'; class Counter with ChangeNotifier{ int value = 0; add(){ value++; notifyListeners(); //通知引用该变量地方的改变值 } subtract(){ value--; notifyListeners(); //通知引用该变量地方的改变值 } }
●触发状态改变和页面引用ide
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段代码复制就能够运行了函数