Flutter Getx状态管理
在 Flutter 开发中,状态管理是一个非常重要的话题。随着应用变得更加复杂,状态管理的方式也变得越来越多。Flutter 提供了多种状态管理的解决方案,如 Provider、Riverpod、BLoC 等,而在这些选项中,GetX 作为一个轻量级、高效且易用的状态管理库,受到了很多开发者的青睐。
本文将介绍如何使用 GetX 进行状态管理,并通过一个实际的 Demo 演示如何在 Flutter 项目中实现响应式状态管理。
什么是 GetX?
GetX 是一个为 Flutter 提供的高效且轻量级的状态管理库。它不仅支持响应式状态管理,还提供了路由管理、依赖注入等功能。GetX 的优势在于其简单易用,性能非常高,而且代码量少。
GetX 的主要特点
- 简洁的 API:GetX 提供了简单且易于理解的 API,使用起来非常方便。
- 响应式编程:通过
Rx类型的变量,实现自动监听和更新 UI。 - 性能优秀:相比于其他状态管理库,GetX 的性能更优秀,尤其是在响应式状态管理方面。
- 全局依赖注入:可以通过 GetX 方便地进行依赖注入,解耦各个部分。
如何使用 GetX 进行状态管理
1. 安装 GetX
首先,在你的 Flutter 项目的 pubspec.yaml 文件中添加 GetX 依赖:
dependencies:flutter:sdk: flutterget: ^4.6.5
然后运行 flutter pub get 来安装依赖。
2. 创建 Controller 类
在 GetX 中,通常会通过一个 Controller 类来管理状态。Controller 类是存放所有业务逻辑和状态的地方。你可以在其中定义响应式的变量和方法来更新这些变量。
示例:CounterController
创建一个简单的 CounterController 来管理计数器的状态:
两种写法:
1、如果是int String double bool等类型,可以直接用get自带的RXInt/RxString/RxDouble/RxBool
2、也可以用Rx<T>,这样就可以支持自定义类型了,更改值时需要加上.value
import 'package:get/get.dart';class CounterController extends GetxController {/*定义一个响应式的变量两种写法:1、如果是int String double bool等类型,可以直接用get自带的RXInt/RxString/RxDouble/RxBool2、也可以用Rx<T>,这样就可以支持自定义类型了,更改值时需要加上.value*/// RxInt count = 0.obs;Rx<int> count = 0.obs;// 定义一个方法来更新计数器void increment() {// count++;count.value++;}
}
在上面的代码中:
count是一个响应式变量,使用了.obs来声明它是响应式的。每当count变化时,任何监听它的 UI 组件都会自动刷新。increment()方法用于增加count的值。
3. 在 UI 中使用 GetX
接下来,我们需要在 UI 中使用 GetX 来显示和更新 count。
示例:使用 GetX 在界面中显示计数器
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'counter_controller.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return GetMaterialApp(home: CounterPage(),);}
}class CounterPage extends StatelessWidget {// 获取 Controller 实例final CounterController controller = Get.put(CounterController());@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("GetX State Management")),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [// 使用 GetX 监听响应式变量 count 的变化Obx(() => Text('Counter: ${controller.count}', // UI 会自动更新style: TextStyle(fontSize: 32),),),SizedBox(height: 20),ElevatedButton(onPressed: controller.increment, // 调用 increment 方法child: Text('Increment'),),],),),);}
}
在这个例子中:
- 我们使用
Get.put(CounterController())来将CounterController注册到依赖注入容器中,这样我们就可以在整个应用中共享它。 - 使用
Obx小部件来监听controller.count变量的变化。当count更新时,Obx会自动重新构建 UI。
4. 使用 GetBuilder 更新 UI
除了 Obx,GetX 还提供了 GetBuilder 作为更新 UI 的另一种方式。GetBuilder 不依赖于响应式变量,而是通过显式的 update() 方法来触发 UI 更新。使用 GetBuilder 可以在需要时手动控制 UI 更新,适用于更复杂的场景。
创建controller类:
如果用GetBuilder刷新需要手动加上update方法,有点像setstate,只不过setState触发的是整个 build 方法的执行,而 update() 只会触发 GetBuilder 相关部分的重新构建。update() 提供了一种更精细的 UI 更新机制,适用于那些需要手动控制何时更新 UI 的场景,而不依赖自动响应式变量的场景。
import 'package:get/get.dart';class CounterController extends GetxController {//如果用GetBuilder就不用.obs了,正常类型就行int count = 0;void increment() {count++;update();}
}
示例:使用 GetBuilder 更新 UI
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'counter_controller.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return GetMaterialApp(home: CounterPage(),);}
}class CounterPage extends StatelessWidget {// 获取 Controller 实例final CounterController controller = Get.put(CounterController());@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("GetX with GetBuilder")),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [// 使用 GetBuilder 来手动更新 UIGetBuilder<CounterController>(builder: (_) {return Text('Counter: ${controller.count}', // UI 会通过控制器手动更新style: TextStyle(fontSize: 32),);},),SizedBox(height: 20),ElevatedButton(onPressed: controller.increment, // 调用 increment 方法child: Text('+++'),),],),),);}
}
在这个例子中:
GetBuilder<CounterController>监听了CounterController类,并通过builder方法来构建 UI。当调用controller.increment()时,controller会调用update()来手动触发 UI 更新。GetBuilder不会像Obx那样自动监听响应式变量,它依赖于controller.update()来手动触发 UI 更新。
5. 使用 GetX 更新多个变量
在实际开发中,我们可能需要更新多个响应式变量。GetX 允许你轻松地管理多个响应式变量,并且可以通过 update() 方法来通知 UI 更新。
示例:管理多个状态
import 'package:get/get.dart';class UserController extends GetxController {var name = 'John'.obs;var age = 25.obs;void updateName(String newName) {name.value = newName;}void incrementAge() {age++;}
}
在 UI 中监听并更新这两个变量:
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'user_controller.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return GetMaterialApp(home: UserPage(),);}
}class UserPage extends StatelessWidget {final UserController controller = Get.put(UserController());@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('User Info')),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [// 使用 Obx 来监听并显示多个响应式变量Obx(() => Text('Name: ${controller.name}\nAge: ${controller.age}',style: TextStyle(fontSize: 24),textAlign: TextAlign.center,),),SizedBox(height: 20),ElevatedButton(onPressed: () => controller.updateName('Alice'),child: Text('改名'),),ElevatedButton(onPressed: controller.incrementAge,child: Text('+++'),),],),),);}
}
6. 使用 Get.find 获取控制器实例
当多个页面需要共享同一个控制器实例时,你应该使用 Get.find 来查找控制器,而不是使用 Get.put。Get.put用于将控制器放入依赖注入容器,并在页面加载时创建新的实例,而 Get.find 则是用于查找已有的控制器实例。
示例:在不同页面使用同一个 Controller
假设我们有两个页面需要共享同一个 CounterController 实例:
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'counter_controller.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return GetMaterialApp(home: FirstPage(),);}
}class FirstPage extends StatelessWidget {@overrideWidget build(BuildContext context) {final CounterController controller = Get.put(CounterController());return Scaffold(appBar: AppBar(title: Text("First Page")),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Obx(() => Text('Counter: ${controller.count}',style: TextStyle(fontSize: 32),),),ElevatedButton(onPressed: () => Get.to(SecondPage()),child: Text('Go to Second Page'),),],),),);}
}class SecondPage extends StatelessWidget {@overrideWidget build(BuildContext context) {// 使用 Get.find 获取共享的 Controller 实例final CounterController controller = Get.find();return Scaffold(appBar: AppBar(title: Text("Second Page")),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Obx(() => Text('Counter: ${controller.count}',style: TextStyle(fontSize: 32),),),ElevatedButton(onPressed: controller.increment,child: Text('Increment'),),],),),);}
}
总结
使用 Get.put 来创建和注册控制器,Obx用于响应式 UI 更新,而 GetBuilder 则用于手动控制 UI 更新。通过 Get.find 可以在多个页面中共享同一个控制器实例,从而确保应用状态的一致性。
通过 GetX,Flutter 开发变得更加简单和高效,尤其在处理复杂的应用状态时,它能轻松地管理和更新状态。
希望这篇博客对你了解 GetX 状态管理有所帮助!
相关文章:
Flutter Getx状态管理
在 Flutter 开发中,状态管理是一个非常重要的话题。随着应用变得更加复杂,状态管理的方式也变得越来越多。Flutter 提供了多种状态管理的解决方案,如 Provider、Riverpod、BLoC 等,而在这些选项中,GetX 作为一个轻量级…...
《成法》读书笔记
稻盛和夫的《成法》是一部关于个人和企业成功哲学的作品,结合了他在经营京瓷和KDDI,以及重建日航(JAL)过程中的经验和智慧。 以下是这本书的读书笔记,涵盖其核心思想和重要概念: 1. 以“心”为本 内容概…...
TensorFlow 2.0 环境配置
官方文档:CUDA Installation Guide for Windows 官方文档有坑,windows的安装指南直接复制了linux的指南内容:忽略这些离谱的信息即可。 可以从官方文档知悉,cuda依赖特定版本的C编译器。但是我懒得为了一个编译器就下载整个visua…...
Ekman理论回归
Scientific reportsEkman revisited: Surface currents to the left of the winds in the Northern HemisphereVagn Walfrid Ekman1905年的理论描述了地球旋转受到风的作用,摩擦边界层中的流场,北半球总是在海表风的右侧,南半球总是在海表风的…...
算法演练----24点游戏
给定4个整数,数字范围在1~13之间任意使用-*/(),构造出一个表达式,使得最终结果为24, 方法一 算法分析:加括号和取出重复表达式 # 导入精确除法模块,使得在Python2中除法运算的行为更…...
【学习心得】Python好库推荐——tiktoken
一、tiktoken是什么? tiktoken是一个快速BPE分词器,是由 OpenAI 开发的一个用于文本处理的 Python 库,主要用于将文本编码为数字序列(称为 "tokens"),或将数字序列解码为文本。这一过程被称为 &q…...
MacBook不额外安装软件,怎样投屏到安卓手机上?
提起iPhone或MacBook的投屏,人们总会想到airplay功能。但离开了苹果生态,其他品牌的手机电脑就未必配备airplay功能了。 如果想要将MacBook的电脑屏幕共享到安卓手机或平板上,到底要怎样做?需要安装什么软件吗? 不需要…...
flink sql + kafka + mysql 如何构建实时数仓
构建一个基于 Flink SQL、Kafka 和 MySQL 的实时数据仓库(Data Warehouse)架构,可以通过流处理的方式实现高效、实时的数据集成与分析。以下是如何利用这三者构建实时数仓的步骤与实现: 架构概述 Kafka:作为流数据平台,负责接收和传输来自不同源系统(如应用日志、传感器…...
Go语言开发基于SQLite数据库实现用户表查询详情接口(三)
背景 上一章 Go语言开发基于SQLite数据库实现用户表新增接口(二) 这一章我们实现用户表的查询详情接口 代码实现 mapper层 type UserMapper interface {GetById(id uint64) (*model.User, error)}type userMapper struct { }func (m *userMapper) GetById(id uint64) (*mod…...
(11)(2.1.7) FETtec OneWire ESCs(二)
文章目录 前言 3 组态 4 可选功能 5 SITL模拟 6 故障排除 前言 !Note 此功能在固件版本4.1.1及更高版本上可用。 3 组态 FTW掩码 SERVO_FTW_MASK 参数选择将哪些伺服输出(如果有的话)路由到 FETtec ESC。更改此参数后需要重新启动。…...
Springboot maven常见依赖、配置文件笔记
pom.xml文件 一、<parent> 在Maven项目中,pom.xml 文件中的 <parent> 元素用于定义父项目的坐标。使用 <parent> 可以实现继承机制,子项目可以从父项目继承配置信息,比如依赖管理、插件配置等。这样可以避免在多个子项目…...
Ceph后端两种存储引擎介绍
Ceph是一个可靠的、自治的、可扩展的分布式存储系统,它支持文件系统存储、块存储、对象存储三种不同类型的存储,以满足多样存储的需求。在Ceph的存储架构中,FileStore和BlueStore是两种重要的后端存储引擎,下面将分别进行详细介绍…...
C++入门基础知识140—【关于C++ 类构造函数 析构函数】
成长路上不孤单😊😊😊😊😊😊 【14后😊///C爱好者😊///持续分享所学😊///如有需要欢迎收藏转发///😊】 今日分享关于C 类构造函数 & 析构函数的相关内容…...
基于标签相关性的多标签学习
✨✨ 欢迎大家来访Srlua的博文(づ ̄3 ̄)づ╭❤~✨✨ 🌟🌟 欢迎各位亲爱的读者,感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢,在这里我会分享我的知识和经验。&am…...
macOS系统下使用SQLark连接达梦数据库
目录 下载 SQLark 客户端 安装 SQLark 客户端 SQLark用户界面 使用SQLark连接达梦数据库 1. 选择达梦数据库 2. 输入连接信息 3. 测试连接 4. 创建连接 5. 验证连接成功 作为一名数据库开发者,在macOS系统上找到一款支持达梦数据库的数据库开发和管理工具&…...
爬虫如何解决短效代理被封的问题?
在数据采集的征途上,短效代理如同一把双刃剑,它既能为我们带来速度和效率,也可能因为频繁更换IP地址而遭遇被封禁的风险。那么,作为数据采集er的我们,该如何巧妙应对,确保爬虫的稳定运行呢?今天…...
Jmeter基础篇(22)服务器性能监测工具Nmon的使用
一、前言 我们在日常做压测的过程中,不仅仅需要监控TPS,响应时间,报错率等这些系统基础性能数据,还需要对服务器的性能(如CPU、磁盘、内存、网络IO等)做监控,以求对系统运行过程中的硬件性能有…...
Spring Boot 集成 RabbitMQ:消息生产与消费详解
在现代微服务架构中,消息队列扮演着至关重要的角色,RabbitMQ 是其中一种广泛使用的消息中间件。本文将详细介绍如何在 Spring Boot 项目中集成 RabbitMQ,实现消息的生产和消费,并提供相应的代码示例。 一、环境准备与依赖配置 首…...
JSON-RPC-CXX深度解析:C++中的远程调用利器
一、引言 1. JSON-RPC 简介及其在 C 开发中的重要性 JSON-RPC(JavaScript Object Notation - Remote Procedure Call)是一种基于 JSON 格式的远程过程调用协议。在 C 开发中,它扮演着至关重要的角色。随着软件系统的日益复杂和分布式架构的…...
【后端速成Vue】模拟实现翻译功能
前言: 本期将会介绍 Vue 中的 watch 侦听器,它语法是怎么样的呢?具有怎样的功能呢?最后用模拟实现百度翻译来更进一步练习 watch 侦听器 篮球哥找工作专属IT岗位内部推荐: 专属内推链接:内推通道 1、认识翻…...
Spark 之 入门讲解详细版(1)
1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室(Algorithms, Machines, and People Lab)开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目,8个月后成为Apache顶级项目,速度之快足见过人之处&…...
(十)学生端搭建
本次旨在将之前的已完成的部分功能进行拼装到学生端,同时完善学生端的构建。本次工作主要包括: 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...
大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动(如演唱会、马拉松赛事、高考中考等)期间,城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例,暖城商圈曾因观众集中离场导致周边…...
Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)
概述 在 Swift 开发语言中,各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过,在涉及到多个子类派生于基类进行多态模拟的场景下,…...
vscode(仍待补充)
写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh? debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...
从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路
进入2025年以来,尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断,但全球市场热度依然高涨,入局者持续增加。 以国内市场为例,天眼查专业版数据显示,截至5月底,我国现存在业、存续状态的机器人相关企…...
LeetCode - 394. 字符串解码
题目 394. 字符串解码 - 力扣(LeetCode) 思路 使用两个栈:一个存储重复次数,一个存储字符串 遍历输入字符串: 数字处理:遇到数字时,累积计算重复次数左括号处理:保存当前状态&a…...
Objective-C常用命名规范总结
【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名(Class Name)2.协议名(Protocol Name)3.方法名(Method Name)4.属性名(Property Name)5.局部变量/实例变量(Local / Instance Variables&…...
抖音增长新引擎:品融电商,一站式全案代运营领跑者
抖音增长新引擎:品融电商,一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中,品牌如何破浪前行?自建团队成本高、效果难控;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...
STM32标准库-DMA直接存储器存取
文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA(Direct Memory Access)直接存储器存取 DMA可以提供外设…...
