当前位置: 首页 > news >正文

深入解析 Flutter GetX

深入解析 Flutter GetX:从原理到实战

GetX 是 Flutter 中一个轻量级且功能强大的状态管理、路由管理和依赖注入框架。它以简单、快速、高效著称,适合从小型到大型项目的开发需求。GetX 的设计理念是一体化解决方案,通过一个框架解决状态管理、路由管理和依赖注入的问题。


1. 什么是 GetX?

1.1 GetX 的核心概念

  • 状态管理:通过响应式编程实现高效的状态管理。
  • 路由管理:无需 BuildContext,支持命名路由和动态路由。
  • 依赖注入:通过 Get.putGet.lazyPut 等方法实现依赖注入。

1.2 GetX 的优点

  1. 简单易用:API 简洁,学习曲线低。
  2. 高性能:响应式状态管理,支持局部刷新。
  3. 一体化解决方案:集成状态管理、路由管理和依赖注入。
  4. 无上下文限制:无需 BuildContext,可以在任何地方访问状态和路由。

2. GetX 的核心原理

2.1 GetX 的三大核心模块

  1. 状态管理
    • 支持响应式状态管理(Rx)和简单状态管理(GetBuilder)。
  2. 路由管理
    • 支持命名路由、动态路由和路由守卫。
  3. 依赖注入
    • 通过 Get.putGet.lazyPut 等方法管理依赖。

2.2 GetX 的工作流程

  1. 状态声明
    • 使用 RxController 声明状态。
  2. 状态消费
    • 使用 ObxGetBuilder 监听状态变化并更新 UI。
  3. 路由管理
    • 使用 Get.toGet.off 实现页面跳转。
  4. 依赖注入
    • 使用 Get.put 提供依赖,在任何地方访问。

3. GetX 的常见用法

3.1 状态管理

3.1.1 响应式状态管理
示例:计数器应用
import 'package:flutter/material.dart';
import 'package:get/get.dart';// 定义控制器
class CounterController extends GetxController {var count = 0.obs; // 响应式变量void increment() {count++;}
}void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {Widget build(BuildContext context) {return GetMaterialApp(home: CounterHomePage(),);}
}class CounterHomePage extends StatelessWidget {final CounterController controller = Get.put(CounterController()); // 注入控制器Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("GetX 示例")),body: Center(child: Obx(() => Text("点击次数:${controller.count}")), // 监听状态变化),floatingActionButton: FloatingActionButton(onPressed: controller.increment,child: Icon(Icons.add),),);}
}
代码解析
  1. 状态声明
    • 使用 Rx(如 0.obs)声明响应式变量。
  2. 状态消费
    • 使用 Obx 监听状态变化并更新 UI。
  3. 依赖注入
    • 使用 Get.put 提供控制器实例。

3.1.2 简单状态管理
示例:计数器应用
class CounterController extends GetxController {int count = 0;void increment() {count++;update(); // 通知监听者更新}
}class CounterHomePage extends StatelessWidget {final CounterController controller = Get.put(CounterController());Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("GetBuilder 示例")),body: Center(child: GetBuilder<CounterController>(builder: (controller) => Text("点击次数:${controller.count}"),),),floatingActionButton: FloatingActionButton(onPressed: controller.increment,child: Icon(Icons.add),),);}
}
代码解析
  1. 状态声明
    • 使用普通变量声明状态。
  2. 状态消费
    • 使用 GetBuilder 监听状态变化并更新 UI。
  3. 状态更新
    • 调用 update 方法通知监听者更新。

3.2 路由管理

3.2.1 基本用法
示例:页面跳转
class HomePage extends StatelessWidget {Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("首页")),body: Center(child: ElevatedButton(onPressed: () {Get.to(DetailsPage()); // 跳转到详情页},child: Text("跳转到详情页"),),),);}
}class DetailsPage extends StatelessWidget {Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("详情页")),body: Center(child: ElevatedButton(onPressed: () {Get.back(); // 返回上一页},child: Text("返回首页"),),),);}
}
代码解析
  1. 页面跳转
    • 使用 Get.to 跳转到新页面。
  2. 页面返回
    • 使用 Get.back 返回上一页。

3.2.2 命名路由
示例:命名路由跳转
void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {Widget build(BuildContext context) {return GetMaterialApp(initialRoute: '/',getPages: [GetPage(name: '/', page: () => HomePage()),GetPage(name: '/details', page: () => DetailsPage()),],);}
}class HomePage extends StatelessWidget {Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("首页")),body: Center(child: ElevatedButton(onPressed: () {Get.toNamed('/details'); // 跳转到详情页},child: Text("跳转到详情页"),),),);}
}class DetailsPage extends StatelessWidget {Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("详情页")),body: Center(child: ElevatedButton(onPressed: () {Get.back(); // 返回上一页},child: Text("返回首页"),),),);}
}
代码解析
  1. 路由配置
    • 使用 GetPage 配置命名路由。
  2. 命名路由跳转
    • 使用 Get.toNamed 跳转到命名路由。

3.2.3 路由守卫
示例:登录验证
class AuthMiddleware extends GetMiddleware {RouteSettings? redirect(String? route) {final isLoggedIn = false; // 模拟登录状态if (!isLoggedIn) {return RouteSettings(name: '/login');}return null;}
}void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {Widget build(BuildContext context) {return GetMaterialApp(initialRoute: '/',getPages: [GetPage(name: '/', page: () => HomePage()),GetPage(name: '/details', page: () => DetailsPage(), middlewares: [AuthMiddleware()]),GetPage(name: '/login', page: () => LoginPage()),],);}
}
代码解析
  1. 路由守卫
    • 使用 GetMiddleware 实现路由拦截。
  2. 重定向
    • redirect 方法中检查登录状态,未登录时跳转到登录页。

3.3 依赖注入

示例:依赖注入
class ApiService {String fetchData() {return "数据加载完成";}
}class HomeController extends GetxController {final ApiService apiService = Get.find();String getData() {return apiService.fetchData();}
}void main() {Get.put(ApiService()); // 注入依赖runApp(MyApp());
}class MyApp extends StatelessWidget {Widget build(BuildContext context) {return GetMaterialApp(home: HomePage(),);}
}class HomePage extends StatelessWidget {final HomeController controller = Get.put(HomeController());Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("依赖注入示例")),body: Center(child: Text(controller.getData()),),);}
}
代码解析
  1. 依赖注入
    • 使用 Get.put 提供依赖。
  2. 依赖获取
    • 使用 Get.find 获取依赖实例。

4. 项目实战:实现一个电商应用

4.1 功能需求

  1. 首页:展示商品列表。
  2. 商品详情页:展示商品详情。
  3. 购物车页:展示已添加的商品。

4.2 完整代码

class ProductController extends GetxController {var cart = <String>[].obs;void addToCart(String product) {cart.add(product);}
}void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {Widget build(BuildContext context) {return GetMaterialApp(home: ProductListPage(),);}
}class ProductListPage extends StatelessWidget {final ProductController controller = Get.put(ProductController());Widget build(BuildContext context) {final products = ["商品 1", "商品 2", "商品 3"];return Scaffold(appBar: AppBar(title: Text("商品列表"),actions: [IconButton(icon: Icon(Icons.shopping_cart),onPressed: () {Get.to(CartPage());},),],),body: ListView.builder(itemCount: products.length,itemBuilder: (context, index) {final product = products[index];return ListTile(title: Text(product),trailing: ElevatedButton(onPressed: () {controller.addToCart(product);},child: Text("添加到购物车"),),);},),);}
}class CartPage extends StatelessWidget {final ProductController controller = Get.find();Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("购物车")),body: Obx(() => ListView.builder(itemCount: controller.cart.length,itemBuilder: (context, index) {return ListTile(title: Text(controller.cart[index]),);},)),);}
}

5. 总结

5.1 GetX 的优点

  1. 简单易用:API 简洁,学习曲线低。
  2. 高性能:响应式状态管理,支持局部刷新。
  3. 一体化解决方案:集成状态管理、路由管理和依赖注入。

5.2 实践建议

  1. 小型项目:使用 GetX 的状态管理和路由管理。
  2. 中型项目:结合依赖注入,构建模块化的状态管理体系。
  3. 大型项目:合理拆分控制器,避免单一控制器过于复杂。

相关文章:

深入解析 Flutter GetX

深入解析 Flutter GetX&#xff1a;从原理到实战 GetX 是 Flutter 中一个轻量级且功能强大的状态管理、路由管理和依赖注入框架。它以简单、快速、高效著称&#xff0c;适合从小型到大型项目的开发需求。GetX 的设计理念是一体化解决方案&#xff0c;通过一个框架解决状态管理…...

Java 大视界 -- 人才需求与培养:Java 大数据领域的职业发展路径(92)

&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎来到 青云交的博客&#xff01;能与诸位在此相逢&#xff0c;我倍感荣幸。在这飞速更迭的时代&#xff0c;我们都渴望一方心灵净土&#xff0c;而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识&#xff0c;也…...

顺序表常用操作和笔试题

1、顺序表的常用操作 1.1 顺序表的创建 如下代码所示&#xff1a;创建了一个默认空间为10的整型顺序表&#xff0c;如果空间不足则会以1.5倍扩容。 List<Integer> list new ArrayList<>(); 创建一个空间为15的整型顺序表 List<Integer> list2 new ArrayL…...

List<Map<String, Object>> 如何对某个字段求和

在Java中&#xff0c;如果你有一个List<Map<String, Object>>的结构&#xff0c;并且你想要对某个特定字段进行求和&#xff0c;你可以使用Java 8的Stream API来简化这个过程。下面是一个示例代码&#xff0c;演示如何对某个字段进行求和。 假设你有一个List<M…...

2024亚马逊数据分析!

整体财务数据23 净销售额&#xff1a;全年净销售额达 6380 亿美元&#xff0c;同比增长 11%。 净利润&#xff1a;全年净利润为 592 亿美元&#xff0c;较上年同期的 304 亿美元增长 95%。 经营活动现金流&#xff1a;经营活动现金流达 1159 亿美元&#xff0c;同比增加了 36…...

foobar2000设置DSP使用教程及软件推荐

foobar2000安卓中文版&#xff1a;一款高品质手机音频播放器 foobar2000安卓中文版是一款备受好评的高品质手机音频播放器。 几乎支持所有的音频格式&#xff0c;包括 MP3、MP4、AAC、CD 音频等。不论是经典老歌还是最新的流行音乐&#xff0c;foobar2000都能完美播放。除此之…...

Apache Logic4j 库反序列化漏洞复现与深度剖析

前言 在渗透测试领域&#xff0c;反序列化漏洞一直是安全研究人员和攻击者关注的焦点。今天&#xff0c;我们将深入探讨 Apache Logic4j 库中的反序列化漏洞&#xff0c;详细了解其原理&#xff0c;并进行完整的复现演示。 一、漏洞原理 Apache Logic4j 库在处理对象的反序列…...

FPGA VIVADO:axi-lite 从机和主机

FPGA VIVADO:axi-lite 从机和主机 TOC在这里插入代码片 前言 协议就不详细讲解了&#xff0c;直接看手册即可。下面主要如何写代码和关键的时序。 此外下面的代码可以直接用于实际工程 一、AXI-LITE 主机 数据转axi lite接口&#xff1a; 读/写数据FIFO缓存 仲裁&#xff1a…...

LabVIEW 中的 3dgraph.llb库

3dgraph.llb 库位于C:\Program Files (x86)\National Instruments\LabVIEW 2019\vi.lib\Platform目录下&#xff0c;是 LabVIEW 系统里用于 3D 图形相关操作的关键库。它为 LabVIEW 用户提供众多功能&#xff0c;可在应用程序内创建、显示和交互各类 3D 图形&#xff0c;极大增…...

【Linux】文件系统:文件fd

&#x1f525;个人主页&#xff1a;Quitecoder &#x1f525;专栏&#xff1a;linux笔记仓 目录 01.回顾C文件接口02.系统文件I/O02.1 openflags 参数&#xff08;文件打开模式&#xff09;标记位传参1. 访问模式&#xff08;必须指定一个&#xff09;2. 额外控制标志&#xf…...

Vue学习记录19

TransitonGroup <TransitionGroup> 是一个内置组件&#xff0c;用于对 v-for 列表中的元素或组件的插入、移除和顺序改变添加动画效果。 和 <Transtion> 的区别 <TranstionGroup> 支持和 <Transtion> 基本相同的 props、CSS过渡 class 和 JavaScript…...

MATLAB更改图论的布局:设置layout

在图论那一章&#xff0c;我们讲过最小生成树和单源最短路径&#xff08;见&#xff1a;从零开始学数学建模&#xff09;&#xff1a; 以最短路径那节课为例&#xff0c;把绘图pplot那部分代码写为&#xff1a; % plot绘图有很多参数可以设置&#xff0c;使图尽量美观 P plot…...

【分果果——DP(困难)】

题目 分析 分果果题解参考&#xff0c;下面是补充https://blog.csdn.net/AC__dream/article/details/129431299 关于状态 设f[i][j][k]表示第i个人取到的最后一个糖果编号是j&#xff0c;第i-1个人取到的最后一个糖果编号小于等于k时的最大重量的最小值 关于转移方程 关于 j …...

禁止WPS强制打开PDF文件

原文网址&#xff1a;禁止WPS强制打开PDF文件_IT利刃出鞘的博客-CSDN博客 简介 本文介绍如何避免WPS强制打开PDF文件。 方法 1.删除注册表里.pdf的WPS绑定 WinR&#xff0c;输入&#xff1a;regedit&#xff0c;回车。找到&#xff1a;HKEY_CLASSES_ROOT\.pdf删除KWPS.PDF…...

罗技鼠标接收器丢了,怎么用另一个logi接收器重新配对?

1.首先接收器得是logi的&#xff0c;其次看这个接收器是什么类型的&#xff0c;一共有以下3种。&#xff08;这几种接收器都可以给其他logi鼠标用&#xff09; 下图左侧带红标的这个&#xff08;标可能带颜色或者是透明&#xff0c;都一样&#xff09;&#xff0c;叫多设备接收…...

ffmpeg configure 研究2:分析屏幕输出及文件输出的具体过程

author: hjjdebug date: 2025年 02月 17日 星期一 16:57:55 CST description: ffmpeg configure 研究2 分析屏幕输出及文件输出的具体过程 文章目录 0. 执行./configure 命令1. sed: cant read 信息是从哪里来的 ?1.1 find_filters_extern()1.2 find_things_extern() 2. 屏幕输…...

软件内有离线模型,效果也很实用......

今天给大家带来一款超实用的图片画质增强软件&#xff0c;完全不需要联网&#xff0c;随时随地都能用。 图片画质增强 一键增强画质 使用起来也超简单&#xff0c;完全不需要安装。 软件主要有两个功能&#xff1a;图片增强和视频增强。 在使用之前&#xff0c;先确定一下输出…...

Linux下ioctl的应用

文章目录 1、ioctl简介2、示例程序编写2.1、应用程序编写2.2、驱动程序编写 3、ioctl命令的构成4、测试 1、ioctl简介 ioctl&#xff08;input/output control&#xff09;是Linux中的一个系统调用&#xff0c;主要用于设备驱动程序与用户空间应用程序之间进行设备特定的输入/…...

如何通过 prometheus-operator 实现服务发现

在之前的章节中,我们讲解了如何编写一个自定义的 Exporter,以便将指标暴露给 Prometheus 进行抓取。现在,我们将进一步扩展这个内容,介绍如何使用 prometheus-operator 在 Kubernetes 集群中自动发现并监控这些暴露的指标。 部署应用 在 Kubernetes 集群中部署我们的自定…...

认识HTML的标签结构

一、HTML的基本概念 1.什么是HTML&#xff1f; ①HTML是描述网页的一种标记语言&#xff0c;也被称为超文本标记语言【并不是一种编程语言】 ②HTML包含了HTML标签和文本内容 ③HTML文档也称为web页面 2.HTML的标签 HTML的标签通常成对出现&#xff0c;HTML文档由标签和受…...

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

Spring Boot 实现流式响应(兼容 2.7.x)

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...