flutter使用getx进行数据状态管理,实现页面响应式

无论是什么样的应用,都还是需要最基础的数据来支撑的,而且不同的页面之间可能需要共享数据状态,这就显得数据状态管理非常有必要了。因为我这里使用了get依赖库,所以就可以直接在项目中使用getx来管理状态,不想再使用别的框架了。而且getx使用起来也挺方便的。

在flutter中文网里面还是有许多状态管理依赖库推荐的:状态 (State) 管理参考 - Flutter 中文文档 - Flutter 中文开发者网站 - Flutter

但是我这里就讲一下getx的使用,很简单,三步就可以完成使用。

get依赖包地址:get | Flutter Package

添加get依赖

在pubspec.yaml文件中添加所需要的第三方依赖库:

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  get: ^4.6.6

 

创建store

在项目目录下面创建stores文件夹,用来管理全局的数据状态,可以通过分类将不同的状态封装在不同的dart文件中:

例如user.dart源代码:

import 'package:get/get.dart';

class UserInfo extends GetxController {
  // 用户名字
  var name = "".obs;

  // 用户密码
  var passwd = "".obs;

  // 用户年龄
  var age = 0.obs;

  // 用户权限
  var power = [].obs;

  // 以下为周期函数
  @override
  void onInit() {
    print('onInit');
    super.onInit();
  }

  @override
  void onClose() {
    // 控制器绑定在路由上的话,路由销毁则触发
    print('onClose');
    super.onClose();
  }

  @override
  void onReady() {
    print('onReady');
    super.onReady();
  }

  // 增加状态管理的数值
  void addAge() {
    age.value++;
    update(); // 调用obx更新数据,不然数据不会更新
  }

  // 减少状态管理的数值
  void setName(String val) {
    name.value = val;
    update();
  }

  // 修改用户密码
  void setPasswd(String pw) {
    passwd.value = pw;
    update();
  }

  // 配置用户权限
  void addPower(pws) {
    var pwsTemp = [...power, ...pws];
    power.value = pwsTemp;
  }

  // 清空状态数据
  void clear() {
    name.value = "";
    passwd.value = "";
    age.value = 0;
    power.value = [];
  }
}

在页面中引用 

在main.dart中使用GetMaterialApp创建的app才可以哦,使用后就可以到页面中引入并使用了,直接使用即可,注意需要引入get:

import 'package:get/get.dart';


UserInfo user = Get.put(UserInfo());

如果想在页面中使用这个状态数据:

Obx(() => Text("${user.age}")),

想要点击按钮设置里面的值:直接调用里面的方法就好

            ElevatedButton(
                onPressed: () {
                  print("添加Powers");
                  user.addPower([10]);
                },
                child: Text("添加Power:10")),

 

比如我在登录页面添加用户名和密码,到首页就可以看到我的那些数据:

首页展示数据:

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/324276.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

PXE 高效批量网络装机

前提: 虚拟机恢复到初始化 调整网卡为vm1 关闭防火墙 安全linux systemctl stop firewalld vim /etc/selinux/config 配置IP地址 vim /etc/sysconfig/network-scripts/ifcfg-ens33 重启网卡 systemctl restart network 挂载磁盘 安装yum源 安装服务 yum install vs…

如何购买腾讯云服务器?图文教程超详细

腾讯云服务器购买流程很简单,有两种购买方式,直接在官方活动上购买比较划算,在云服务器CVM或轻量应用服务器页面自定义购买价格比较贵,但是自定义购买云服务器CPU内存带宽配置选择范围广,活动上购买只能选择固定的活动…

算法-二分专题

文章目录 概念应用场景代码模板OJ练习寻找指定元素1题目描述输入描述输出描述样例题解 寻找指定元素2题目描述输入描述输出描述样例题解 寻找指定元素3题目描述输入描述输出描述样例题解 寻找指定元素4题目描述输入描述输出描述样例题解 寻找指定元素5题目描述输入描述输出描述…

SpringBoot教程(十四) | SpringBoot集成Redis(全网最全)

SpringBoot教程(十四) | SpringBoot集成Redis(全网最全) 一、Redis集成简介 Redis是我们Java开发中,使用频次非常高的一个nosql数据库,数据以key-value键值对的形式存储在内存中。redis的常用使用场景,可以做缓存,分布式锁&…

Java多线程——并发和并行、实现方法

多线程 并发和并行 实现方法 代码演示 方式一 package com.qiong.thread1;public class MyThread extends Thread{Overridepublic void run() {for (int i 0; i < 20; i) {System.out.println(getName() "Hello World");}} }package com.qiong.thread1;public…

随心玩玩(十二)通义千问——LLM大模型微调

写在前面&#xff1a;使劲的摸鱼&#xff0c;摸到的鱼才是自己的~ 文章目录 简介环境配置模型加载jupyter远程配置快速使用微调示例部署方案总结附录&#xff1a; ReAct Prompting 示例准备工作一&#xff1a;样例问题、样例工具准备工作二&#xff1a;ReAct 模版步骤一&#x…

高通sm7250与765G芯片是什么关系?(一百八十一)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

【翻译】Qt Designer 如何使用资源文件

原文地址&#xff1a;https://doc.qt.io/qt-6/designer-resources.html Qt的资源浏览器是用于管理应用程序资源的工具&#xff0c;可以让开发者方便地查看和管理应用程序中的各种资源文件&#xff0c;例如图像、字体、布局文件、对话框等。 资源浏览器提供了一个可视化的界面&…

【BBuf的CUDA笔记】十二,LayerNorm/RMSNorm的重计算实现

带注释版本的实现被写到了这里&#xff1a;https://github.com/BBuf/how-to-optim-algorithm-in-cuda/tree/master/apex 由于有很多个人理解&#xff0c;读者可配合当前文章谨慎理解。 0x0. 背景 我也是偶然在知乎的一个问题下看到这个问题&#xff0c;大概就是说在使用apex的…

移动端开发进阶之蓝牙通讯(二)

移动端开发进阶之蓝牙通讯&#xff08;二&#xff09; 蓝牙广播是一种无线通讯技术&#xff0c;通过无线电波传输数据&#xff1b; 在蓝牙低功耗&#xff08;BLE&#xff09;协议中&#xff0c;广播通信是其重要组成部分&#xff0c;主要有两类使用场景&#xff1a; 单一方向的…

QT-day6

作业1&#xff1a;数据库增删查改 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);if (!db.contains("stu.db")){db QSqlDatabase::addDatabase(&q…

2024年腾讯云服务器多少钱1个月?

2024年腾讯云服务器多少钱1个月&#xff1f;5元一个月&#xff0c;62元一年&#xff0c;更多腾讯云服务器精准报价。腾讯云服务器租用优惠价格表&#xff1a;轻量应用服务器2核2G3M价格62元一年、2核2G4M价格118元一年&#xff0c;540元三年、2核4G5M带宽218元一年&#xff0c;…

Uibot (RPA设计软件)Mage AI智能识别(发票识别)———课前材料五

微信群发助手机器人的小项目友友们可以参考小北的课前材料二博客~ (本博客中会有部分课程ppt截屏,如有侵权请及请及时与小北我取得联系~&#xff09; 紧接着小北的前两篇博客&#xff0c;友友们我们即将开展新课的学习~RPA 培训前期准备指南——安装Uibot(RPA设计软件&#x…

搜维尔科技:【简报】元宇宙数字人赛道,《寒朵鹿》赏析!

寒朵鹿的外观是柔和无攻击性的小鹿拟人样&#xff0c;头上长有一对鹿角及鹿耳&#xff0c;虽然绝大部分雌鹿并不会长角&#xff0c;但由于寒朵鹿是AI的智能机器人&#xff0c;所以为了依照普遍大众对鹿的印象依旧帮她加上了角。 学校&#xff1a; 台北商业大学 选手&#xff1…

【翻译】在Qt Designer中创建主窗口(Main Windows)

原文地址&#xff1a;https://doc.qt.io/qt-6/designer-creating-mainwindows.html Qt Designer 可用于为不同用途创建用户界面&#xff0c;并为每个用户界面提供不同类型的模板。主窗口模板用于创建具有菜单栏、工具栏和停靠窗口部件的应用程序窗口。 通过打开文件菜单并选择…

vue3项目部署到服务器,刚打开没事,一刷新页面就404

vue3项目部署到服务器&#xff0c;刚打开没事&#xff0c;一刷新页面就404 vue3项目&#xff0c;在本地调试时各方面都没毛病&#xff0c;刷新也没毛病&#xff0c;但是&#xff0c;扔到服务器上&#xff0c;第一次打开是正常的&#xff0c;再刷新下就404了&#xff0c;不知道什…

java+vue基于Spring Boot的渔船出海及海货统计系统

该渔船出海及海货统计系统采用B/S架构、前后端分离进行设计&#xff0c;并采用java语言以及springboot框架进行开发。该系统主要设计并完成了管理过程中的用户注册登录、个人信息修改、用户信息、渔船信息、渔船航班、海货价格、渔船海货、非法举报、渔船黑名单等功能。该系统操…

含PEMFC的热电联供系统能量管理策略Simulink仿真

1.光伏发电系统 在直流微电网中&#xff0c;光伏电池系统经过升压DC/DC变换器接入直流微电网提供功率。在不同的系统运行条件下&#xff0c;光伏电池系统有三种工作模式&#xff1a;MPPT 模式、下垂模式和空闲模式。由于光伏阵列的输出特性随着环境条件影响&#xff0c;光伏电池…

docker-compose安装HertzBeat赫兹跳动监控H3C交换机

前面我们用docker方式安装了HertzBeat&#xff0c;现在我们自己写个docker-compose.yml文件、创建文件直接docker-compose up -d直接启动运行 使用docker-compose需要先安装docker和docker-compose1、输入以下两段命令 mkdir 123 && cd 123 && mkdir data &a…

Spring Cloud + Vue前后端分离-第12章 通用权限设计

源代码在GitHub - 629y/course: Spring Cloud Vue前后端分离-在线课程 Spring Cloud Vue前后端分离-第12章 通用权限设计 这一章我们不依赖第三方框架&#xff0c;我会从权限相关表的设计&#xff0c;到权限的配置&#xff0c;到权限的拦截&#xff0c;带大家一步一步的做出…