Flutter移动电商实战 --（24）Provide状态管理基础

偏执的太偏执、 2023-06-01 05:59 60阅读 0赞

Flutter | 状态管理特别篇 —— Provide：[https://juejin.im/post/5c6d4b52f265da2dc675b407?tdsourcetag=s\_pcqq\_aiomsg][https_juejin.im_post_5c6d4b52f265da2dc675b407_tdsourcetag_s_pcqq_aiomsg]

点击左侧的导航右侧的导航发生变化，这属于两个widget。这两个widget之间进行通讯。用setstate的形式，耦合性太强

![1090399-20190901165128538-859560359.png][]

状态管理有这么几种方案

![1090399-20190901165159222-739205640.png][]

这里我们用Provide，谷歌自己推出的

[https://github.com/google/flutter-provide][https_github.com_google_flutter-provide]

# 开始写测试例子 #

我们在购物车的页面

这是我们原来购物车的页面

![1090399-20190901165252692-1755227611.png][]

在里面写我们的组件，放个center在中间，里面用column进行上下布局。放两个widget

![1090399-20190901165313218-1890044191.png][]

下面来创建我们的widget

# 创建numberwidget #

stless快速生成，中间就放一个Text

![1090399-20190901165448913-1310720044.png][]

![1090399-20190901165458809-1160726144.png][]

# 快速生成button的widget #

![1090399-20190901165536525-525166725.png][]

故意用了三个widget形成了我们的的页面。展示效果：

![1090399-20190901165606741-1818806083.png][]

# 添加状态的引用 #

pubspec.yaml文件内添加引用

![1090399-20190901165633603-825491335.png][]

![1090399-20190901165701653-2003404652.png][]

# 有了provide后，做数据库仓库 #

lib文件夹下创建provide的文件夹，然后创建counter.dart

![1090399-20190901165739968-675152016.png][]

Counter类必须混入with ChangeNotifier

![1090399-20190901165811117-1163018161.png][]

定义增加的方法：increment

然后把value的值++后，调用notifyListeners()方法通知听众,vlaue值发生了改变，局部刷新我们的widget

![1090399-20190901165846816-789657936.png][]

# main.dart内 #

![1090399-20190901165926236-1987815244.png][]

runApp(MyApp());也要进行修改

![1090399-20190901170000855-527516811.png][]

# 获取值 #

首先在购物车页面添加引用

![1090399-20190901170041885-1204018515.png][]

import 'package:provide/provide.dart';
    import '../provide/counter.dart';

![1090399-20190901170123077-131536349.png][]

我们如何监听它 需要在外层包裹一个provider组件。

Provide<Counter>里面有构造器builder需要传三个参数，第一个是上下文，第二个是child，第三个就是我们的counter对象

![1090399-20190901170158822-825862691.png][]

这样就是已经获取我们的状态的值了。

![1090399-20190901170228629-1206019374.png][]

# 修改状态值 #

调用我们在Counter里面定义的增加的方法

![1090399-20190901170313154-1308939686.png][]

![1090399-20190901170402011-612088988.png][]

# 在会员中心页面进行测试 #

member\_page.dart。如果在这个页面获取Counter的值，我们就是真正的实现了全局页面的状态管理

首先添加引用，外层用Provide包裹住，然后调用builder方法

![1090399-20190901170734968-1683390957.png][]

我们在购物车页面把数字加到13.

![1090399-20190901170831823-2042912721.png][]

在到会员中心查看我们的counter的值，也是13.两个页面的值是相同的。这样就实现了全局的值状态管理

![1090399-20190901170920071-147390167.png][]

# 最终代码： #

counter.dart

import 'package:flutter/material.dart';
    
    class Counter with ChangeNotifier{
      int value=0;
      
      increment(){
        value++;
        notifyListeners();
      }
    }

cart\_page.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('递增'),
          ),
        );
      }
    }

member\_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,
                );
              },
            ),
          ),
        );
      }
    }

转载于:https://www.cnblogs.com/crazycode2/p/11403192.html

[https_juejin.im_post_5c6d4b52f265da2dc675b407_tdsourcetag_s_pcqq_aiomsg]: https://juejin.im/post/5c6d4b52f265da2dc675b407?tdsourcetag=s_pcqq_aiomsg
[1090399-20190901165128538-859560359.png]: /images/20230601/c3f561b527534c518f49e8757c16eb89.png
[1090399-20190901165159222-739205640.png]: /images/20230601/cce4dd3672c04bbab67fb0fdb5b3b188.png
[https_github.com_google_flutter-provide]: https://github.com/google/flutter-provide
[1090399-20190901165252692-1755227611.png]: /images/20230601/87542cf2d3224bb2a978ea553d6996b3.png
[1090399-20190901165313218-1890044191.png]: /images/20230601/575e98854d4a4f5bbfe085bb9e0a7689.png
[1090399-20190901165448913-1310720044.png]: /images/20230601/82f112cb84c0474f82d510219c113160.png
[1090399-20190901165458809-1160726144.png]: /images/20230601/59231401a18245c094d1d2d9fcf298d3.png
[1090399-20190901165536525-525166725.png]: /images/20230601/8d05456038b44cd4abe99beb0ec97c5b.png
[1090399-20190901165606741-1818806083.png]: /images/20230601/9f86c34945454c20a5f255a3067b21a3.png
[1090399-20190901165633603-825491335.png]: /images/20230601/67cb970e88c3415cb64db1ca3f62a131.png
[1090399-20190901165701653-2003404652.png]: /images/20230601/7ba2baaf9e9c48939560258c615241b5.png
[1090399-20190901165739968-675152016.png]: /images/20230601/d00486b7f58c450490a36075ba87f70a.png
[1090399-20190901165811117-1163018161.png]: /images/20230601/709eb3664cea41a793449629babcd691.png
[1090399-20190901165846816-789657936.png]: /images/20230601/37838ad5d77541199ed637756cf79907.png
[1090399-20190901165926236-1987815244.png]: /images/20230601/a1d3752a3eb74d75b68876d80ae5dc74.png
[1090399-20190901170000855-527516811.png]: /images/20230601/7b0cdbf5b40e4277b5dbe9a50152909f.png
[1090399-20190901170041885-1204018515.png]: /images/20230601/04aa2e7e6ebb407587dfa44a7e4f3de2.png
[1090399-20190901170123077-131536349.png]: /images/20230601/a9aacef35e5246aaa5545a5191819c38.png
[1090399-20190901170158822-825862691.png]: /images/20230601/0592ef8b430747179981b46b65236cbb.png
[1090399-20190901170228629-1206019374.png]: /images/20230601/c5e215f561ef4c1bb3a5ac17db2aa16c.png
[1090399-20190901170313154-1308939686.png]: /images/20230601/3721de33bc6843778f2e5cbcfcb5095d.png
[1090399-20190901170402011-612088988.png]: /images/20230601/40d7a036b7e1495cba3301ec491d0b70.png
[1090399-20190901170734968-1683390957.png]: /images/20230601/eda030ce1c8b48e6a84405f85f115471.png
[1090399-20190901170831823-2042912721.png]: /images/20230601/f9a42d028ef8442580fcd64142fb5199.png
[1090399-20190901170920071-147390167.png]: /images/20230601/10d03829d87d4533bdc313167e2c00f7.png