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

业务流程图

简单的业务流程图,若是有用过vuex,都是相似的东西,换汤不换药
图片描述vue

如何使用

一、引入provide依赖
二、新建状态仓库
三、触发状态改变
四、页面引用创库变量vuex

● 引入provide依赖
图片描述app

● 新建状态仓库
在lib目录下新建provide文件夹,在provide文件夹下新建创库文件counter.dart
图片描述less

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段代码复制就能够运行了
图片描述函数

相关文章
相关标签/搜索