zoukankan      html  css  js  c++  java
  • flutter Provide 状态管理篇

    Provide是Google官方推出的状态管理模式。官方地址为:

    https://github.com/google/flutter-provide

    现在Flutter的状态管理方案很多,redux、bloc、state、Provide。

    • Scoped Model : 最早的状态管理方案,我刚学Flutter的时候就使用的这个,虽然还有公司在用,但是大部分已经选用其它方案了。

    • Redux:现在国内用的最多,因为咸鱼团队一直在用,还出了自己fish redux。阿里宣布开源Flutter应用框架Fish Redux!

    • bloc:比Redux简单,而且好用,特别是一个页面里的状态管理。

    • state:缺点是耦合太强,如果是大型应用,管理起来非常混乱。

    • Provide:是在Google的Github下的一个项目,刚出现不久,所以可以推测他是Google的亲儿子。

    步骤:

    1. 添加依赖

    2. 创建状态管理dart文件

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

    3. 将状态放入顶层

    void main() {
      var counter =Counter();
      var providers = Providers();
    //将counter对象添加进providers providers..provide(Provider<Counter>.value(counter)); runApp( ProviderNode( child: MyApp(), providers: providers, ) ); }

    Provider<Counter>.value将counter包装成了_ValueProvider。并在它的内部提供了StreamController从而实现对数据进行流式操作。

    4. 获取状态

      同样的Provide也提供了两种获取State的方法。我们先来介绍第一种,通过Provide小部件获取。

    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: TextStyle(fontSize: 30.0),);
            },
          )
        );
      }
    }

    builder方法接收三个参数

    • 第一个参数context:代表上下文。
    • 第二个参数child:假如这个小部件足够复杂,内部有一些小部件是不会改变的,那么我们可以将这部分小部件写在Provide的child属性中,让builder不再重复创建这些小部件,以提升性能。
    • 第三个参数counter:这个参数代表了我们获取的顶层providers中的状态。

    第二种获取方式:Provide.value<T>(context)

    final currentCounter = Provide.value<Counter>(context);
    5. 修改状态
    Widget build(BuildContext context) {
        return Container(
          child: Container(
            child: RaisedButton(
              onPressed: () {
                Provide.value<Counter>(context).increment();
              },
              child: Text('增加'),
            ),
          ),
        );
      }
    

    获取数据流

    可参考  https://juejin.im/post/5c6d4b52f265da2dc675b407

  • 相关阅读:
    css知识点
    javascript 中闭包
    javascript 继承方法总结
    css滚动滚轮事件
    关于闭包的总结
    xpth xslt
    好的js函数
    自动化测试实施(4)
    自动化测试实施(5)
    自动化测试实施(3)
  • 原文地址:https://www.cnblogs.com/john-hwd/p/10790460.html
Copyright © 2011-2022 走看看