zoukankan      html  css  js  c++  java
  • 2019.9.20 状态管理的使用。

    今天要介绍的是provider,,,谷歌自己提供的管理状态的插件。今天学习了下,还是很nice的。

    目前使用的provider是这个版本的:

    provider: ^3.1.0

    案例: 

    以一个简单的例子来解释下怎么弄的吧。

    假如有一个展示数字的widget,还有一个按钮,点击按钮数字自动增加

     -----  分割线、、

    1:以下是页面显示的代码

    class ShowNum extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Container(
          margin: EdgeInsets.only(top: 150),
          child: Text(
            '${Provider.of<Counter>(context).getCount}', // 数据的自动更新
            style: TextStyle(fontSize: 24),
          ),
        );
      }
    }
    
    
    class ClickBtn extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Container(
          margin: EdgeInsets.only(top: 40),
          child: RaisedButton(
            onPressed: () {
              Provider.of<Counter>(context).add(); // 点击事件处理。
            },
            child: Text(
              '按钮+',
              style: TextStyle(fontSize: 18),
            ),
          ),
        );
      }
    }

    2:需要新建文件来处理增加的逻辑。

    import 'package:flutter/material.dart';
    
    // ChangeNotifier  改变的通知
    class Counter with ChangeNotifier { // 1:改变的通知
      int _count = 0;
      Counter(this._count);
      add() {
        _count ++;
        print(_count);
        notifyListeners(); // 2:通知听众值改变了,需要刷新页面
      }
      get getCount => _count; //  3:get方法
    }

    3 :需要在顶层监听整个通知。

    此处一共监听了两个不同地方的状态,然后例子中使用的是第一个状态。

    // 有多个状态需要管理的时候
    void main() {
      runApp(MultiProvider(
        providers: [
          ChangeNotifierProvider<Counter>.value(value: Counter(10)), // 状态1
          ChangeNotifierProvider<Chooser>.value(value: Chooser(6)), // 状态2
        ],
        child: MyApp(),
      ));
    }

    当点击按钮的时候数字就会自动增加了,

    然后整个页面和逻辑都是分开的。基本上就算是达到解耦的目的了,

  • 相关阅读:
    动态规划问题
    神经网络学习总结第二天
    神经网络学习第一天总结
    解决Python2.7的UnicodeEncodeError: ‘ascii’ codec can’t encode异常错误
    IntelliJ IDEA 历史版本下载地址
    第九章 数据查询基础
    第八章 用SQL语句操作数据
    第七章 用表组织数据
    第六章 程序数据库集散地:数据库
    linux文件或文件夹常见操作,排查部署在linux上程序问题常用操作
  • 原文地址:https://www.cnblogs.com/110-913-1025/p/11558498.html
Copyright © 2011-2022 走看看