高效Flutter应用开发:GetX状态管理实战技巧

news2024/12/23 1:55:13

探索GetX状态管理的使用

前言

在之前的文章中,我们详细介绍了 Flutter 应用中的状态管理,setStateProvider库以及Bloc的使用。

本篇我们继续介绍另一个实现状态管理的方式:GetX


一、GetX状态管理

基础介绍

GetX 是一个在 Flutter 中提供状态管理和依赖注入的强大工具包。

它为开发者提供了一种简单、高效的方式来管理应用程序的状态和依赖关系。

GetX 使用 Rx 类来表示可观察的数据,当数据发生变化时,会自动通知订阅了该数据的观察者。

缺优点

1.优点:

(1)功能强大:集成了状态管理、路由管理、主题管理、国际化多语言管理、网络请求、数据验证等多种功能,几乎覆盖了应用开发中的大部分基础需求。
(2)简单易用:提供了简单直观的API,降低了学习成本。
(3)高性能:专注于性能和最小资源消耗,适用于各种规模和复杂度的应用。
(4)便捷路由管理:由管理不依赖于上下文,使得页面跳转更加灵活,同时也增强了代码的可维护性。

2.缺点

(1)生态系统依赖性:GetX 是一个第三方库,其未来发展可能受到 Flutter 框架和社区的影响。
(2)功能过剩:对于只需要简单状态管理的应用来说,GetX 可能提供了过多的功能。
(3)对应用的侵入性较强: 使用 GetX 的导航需要使用 GetMaterialAppGetCupertinoApp 包裹应用,这在某些情况下可能增加了对应用的侵入性。

二、GetX的使用

引入库

dependencies:
  flutter:
    sdk: flutter
  get: ^4.6.6

状态管理

GetX 的状态管理是其核心功能之一,它提供了一种简单而高效的方式来管理 Flutter 应用中的状态。

GetX 的状态管理主要依赖于 Rx(响应式变量)和 GetxController(控制器)

依赖注入

1.定义可注入的类:这些类通常是控制器或服务,它们包含应用的业务逻辑或状态。

2.注册依赖:在应用的某个初始化阶段,将需要被注入的类注册到 GetX 的依赖容器中。这可以通过 Get.put() 或在 GetMaterialAppbindings 数组中完成。

3.注入依赖:在需要这些依赖的组件中,通过 Get.find<T>() 方法获取它们的实例。但是,在 GetX 中,更常见的做法是使用 Get.to()Get.toNamed() 导航到页面时,通过路由参数自动注入控制器。

使用

(1)定义控制器

// counter_controller.dart  
import 'package:get/get.dart';  
  
class CounterController extends GetxController {  
  var count = 0.obs; // 使用.obs将变量转换为可观察对象  
  
  void increment() {  
    count++;  
  }  
}

(2)注册依赖

在入口文件使用GetMaterialApp包裹,并使用 GetMaterialAppbindings 参数来注册定义好的控制器。

// main.dart  
import 'package:flutter/material.dart';  
import 'package:get/get.dart';  
import 'counter_controller.dart';  
  
void main() {  
  runApp(MyApp());  
}  
  
class MyApp extends StatelessWidget {  
    
  Widget build(BuildContext context) {  
    return GetMaterialApp(  
      title: 'Flutter Demo',  
      theme: ThemeData(  
        primarySwatch: Colors.blue,  
      ),  
      initialRoute: '/',  
      getPages: [  
        GetPage(name: '/', page: () => HomePage(), binding: BindingsBuilder(() {  
          Get.put(CounterController()); // 在这里注册控制器  
        })),  
      ],  
    );  
  }  
}

注意:在上面的示例中,我使用了 getPagesGetPage,这是 GetX 5.x 版本中引入的新路由管理方式。

如果你使用的是旧版本的 GetX,你可能需要使用 home 属性和 initialBinding

然而,对于简单的应用或当你不希望将控制器与特定路由绑定时,你可以直接在需要的地方使用 Get.put()Get.find<>()

(3)在页面中使用控制器

常用的状态管理器: GetBuilderObx

GetBuilder 相比 Obx , GetBuilder 是手动的状态管理器,需要更改的时候主动需要调用 update()

因为 GetBuilder 是手动的状态管理器,所以相比 Obx,内部没有维护 StreamSubscription ,内存消耗就会少

Obx 实现了自动响应数据变化,使用的时候用 Obx 包裹需要自动响应数据的 ui

如果你已经通过路由参数或全局方式注册了控制器,你可以在页面中使用 Get.find<CounterController>() 来获取它。

在ui中使用状态管理控制器:

第一种:使用 GetViewGetWidget(对于无状态组件)来自动注入控制器:

// home_page.dart  
import 'package:flutter/material.dart';
import 'package:get/get.dart';

import 'counter_controller.dart';

class HomePage extends GetView<CounterController> {
  // 继承自 GetView 并指定控制器类型
  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Obx(() => Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('Count: ${controller.count}'),
                ElevatedButton(
                  onPressed: controller.increment,
                  child: Text('Increment'),
                ),
              ],
            ),
          )),
    );
  }
}

在这个例子中,HomePage 继承自 GetView<CounterController>,这使得它可以直接通过 this.controller 访问 CounterController 的实例,而无需调用 Get.find<>()

这是 GetX 依赖注入系统的一个非常方便的特性。

第二种:使用 Get.put() 或者使用 Get.find<>()(前面已注册过该控制器了)直接注入依赖(有状态或无状态组件均可使用):

例子1:通过 Obx 实现了自动响应数据变化

// counter_controller.dart  
import 'package:flutter/material.dart';
import 'package:get/get.dart';

import 'counter_controller.dart';

class HomePage extends StatelessWidget {
  final controller = Get.put(CounterController());

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Obx(() => Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('Count: ${controller.count}'),
                ElevatedButton(
                  onPressed: controller.increment,
                  child: Text('Increment'),
                ),
              ],
            ),
          )),
    );
  }
}

例子2:通过 GetBuilder手动响应数据变化

// counter_controller.dart  

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: GetBuilder<CounterController>(
        builder: (lic) => Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Count: ${controller.count}'),
              ElevatedButton(
                onPressed: controller.increment,
                child: Text('Increment'),
              ),
            ],
          ),
        ),
      ),
    );
  }
class CounterController extends GetxController {
  var count = 0.obs; // 使用.obs将变量转换为可观察对象

  void increment() {
    count++;
    update(); // 更改的时候主动需要调用update()
  }
}

提示:响应数组和对象数据变化时通常使用GetBuilder手动响应

上述代码的运行结果如下:

总结

GetX 状态管理是 Flutter 开发中一个非常有用的工具,它通过简洁的语法、强大的功能和高效的性能为开发者提供了构建现代应用程序的坚实基础。

GetX 还有很多非常有用且强大的功能,是一个值得学习和使用的框架。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【原创】【总结】【C++类的设计要点】一道十分典型的含继承与虚函数的类设计题

设计类时的要点 1构造函数与析构函数&#xff1a;先在public中写上构造函数与析构函数 2成员函数&#xff1a;根据题目要求在public中声明成员函数&#xff1b;成员函数的实现在类内类外均可&#xff0c;注意若在类外实现时用::符号表明是哪个类的函数 3数据成员&#xff1a;关…

STM32L051K8U6-HAL-串口中断控制灯闪烁速度

HAL三步法&#xff1a; 1、配置下载线 2、配置晶振 3、配置时钟 4、 配置灯引脚属性为输出模式。并设置标签为LED 5、配置串口1 串口常用函数说明&#xff1a; 需要实现的伪代码&#xff1a; 示例&#xff1a;链接&#xff1a;https://pan.baidu.com/s/1u6FamKgZhvcEsFAdgGeaw…

Realsense D455 imu 数据不输出?

现象 realsense_viewer 可以可视化查看imu数据, 但是realsense-ros 查看/camera/accel/sample和/camera/gyro/sample没有数据输出 背景 realsense_viewer 安装: sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-key F6E65AC044F831AC80A06380C8B3A55A6F3EFCDE…

移动通信为啥要用双极化天线?

❝本文简单介绍下移动通信为啥要用双极化天线及其简单概述。 移动通信为啥要用双极化天线&#xff1f; - RFASK射频问问❝本文简单介绍下移动通信为啥要用双极化天线及其简单概述。什么是极化&#xff1f;电磁波的极化通常是用其电场矢量的空间指向来描述&#xff1a;在空间某…

Leetcode 字母异位词分组

这道题目的意思就是&#xff1a;把包含字母字符相同的单词分到同一组。 算法思路&#xff1a; 使用哈希表来解决。 首先将每个字符串进行排序&#xff0c;将排序之后的字符串作为 key&#xff0c;然后将用 key 所对应的异位词组 作为value。然后我们使用 std::pair 来遍历 键…

Vue的学习(三)

目录 一、for循环中key的作用 1‌.提高性能‌&#xff1a; ‌2.优化用户体验‌&#xff1a; ‌3.辅助Vue进行列表渲染‌&#xff1a; 4‌.方便可复用组件的使用‌&#xff1a; 二、methods及computed及wacth的区别 三、过滤器 1.Vue 2 过滤器简介 定义过滤器 使用过滤…

八、适配器模式

适配器模式&#xff08;Adapter Pattern&#xff09;是一种结构型设计模式&#xff0c;它允许不兼容的接口之间进行合作。适配器模式通过创建一个适配器类来转换一个接口的接口&#xff0c;使得原本由于接口不兼容无法一起工作的类可以一起工作。 主要组成部分&#xff1a; 目标…

CUDA-中值滤波算法

作者&#xff1a;翟天保Steven 版权声明&#xff1a;著作权归作者所有&#xff0c;商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处 实现原理 中值滤波是一种常用的图像处理方法&#xff0c;特别适用于去除图像中的脉冲噪声&#xff08;如椒盐噪声&#xff09;。…

基于IOT的供电房监控系统(实物)

aliyun_mqtt.cpp 本次设计利用ESP8266作为系统主控&#xff0c;利用超声波检测门的状态&#xff0c;利用DHT11检测环境温湿度、烟雾传感器检测空气中的气体浓度&#xff0c;利用火焰报警器模块检测火焰状态&#xff0c;使用OLED进行可视化显示&#xff0c;系统显示传感器数据&a…

同相放大器电路设计

1 简介 同相放大电路输入阻抗为运放的极高输入阻抗&#xff08;GΩ级&#xff09;&#xff0c;因此可处理高阻抗输入源信号。同相放大器的共模电压等于输入信号。 2 设计目标 2.1 输入 2.2 输出 2.3 频率 2.4 电源 3 电路设计 根据设计目标&#xff0c;最终设计的电路结构…

python-确定进制

题目描述 6 942 对于十进制来说是错误的&#xff0c;但是对于 13 进制来说是正确的。即 6(13)​ 9(13)​42(13)​&#xff0c;而 42(13)​4 13^12 13^054(10)​。 你的任务是写一段程序读入三个整数 p,q 和 r&#xff0c;然后确定一个进制 B(2≤B≤16) 使得 p qr 。如果 B 有…

Vue3: 使用ref自动补齐.value

目录 一.老版本&#xff08;已经弃用TypeScript Vue Plugin (Volar)&#xff09; 二.新版本&#xff08;Vue - Official&#xff09; 三.勾选后重启VScode 四.效果 VScode中搜索Vue - Official插件 一.老版本&#xff08;已经弃用TypeScript Vue Plugin (Volar)&#xff0…

学习之git的远程仓库操作的常用命令

1 git remote -v 查看当前所有远程地址别名 2 git remote add 别名 远程地址 3 git push 别名 分支&#xff08;本地分支名称&#xff09; 推送本地分支到远程仓库 4 git pull 远程库别名 远程分支别名 拉取远程库分支&#xff08;更新代码&#xff09; 5 git clone 远程库地址…

【时间盒子】-【6.任务页面】在同一个页面新建、编辑任务

Tips: Column组件的使用&#xff1b; color.json资源文件的使用。 一、页面布局 页面分为三个部分&#xff0c;从上往下分别是&#xff1a;标题菜单栏、时间选择器和任务列表。每个部分都可以设计为独立的组件&#xff0c;后续文章分别介绍。 二、新建页面 右击pages目录&…

Vue:指令

目录 指令概念内容渲染指令**{{ }}****v-text****v-html** 属性绑定指令 v-bind绑定属性**绑定class****绑定style**动态绑定属性**绑定对象** 事件绑定指令 v-onv-on 基础event**$event** 双向绑定指令 v-modelv-model 基础v-model 值绑定**v-model 指令的修饰符** 条件渲染指…

解锁全球机遇:澳大利亚服务器租用市场的独特魅力

在浩瀚的全球数字版图中&#xff0c;澳大利亚以其独特的地理位置、丰富的资源禀赋、以及日益增长的数字经济活力&#xff0c;成为了众多互联网企业竞相布局的重要市场。特别是当谈及服务器租用这一关键环节时&#xff0c;澳大利亚以其稳定的网络环境、先进的基础设施和开放的市…

使用原生HTML的drag实现元素的拖拽

HTML 拖放&#xff08;Drag and Drop&#xff09;接口使应用程序能够在浏览器中使用拖放功能。例如&#xff0c;用户可使用鼠标选择可拖拽&#xff08;draggable&#xff09;元素&#xff0c;将元素拖拽到可放置&#xff08;droppable&#xff09;元素&#xff0c;并释放鼠标按…

GPIO 简介(STM32F407)

一、GPIO简介 什么是GPIO GPIO即通用输入输出端口&#xff0c;全称General Purpose Input Output&#xff0c;是控制或者采集外部器件的信息的外设&#xff0c;即负责输入输出。 它按组分配存在&#xff0c;每组最多16个IO口&#xff0c;组数视芯片而定。比如STM32F407ZGT6是…

今年中秋节买什么东西划算?精选五款好物清单合集推荐!

谈及中秋佳节选购什么好物&#xff0c;你可真是找对人了&#xff01;作为一位专注于节日氛围与生活美学的博主&#xff0c;对于哪些中秋好物能为您的佳节增添温馨与喜悦&#xff0c;我可是了如指掌。恰逢中秋佳节临近&#xff0c;各大商家纷纷推出精彩纷呈的优惠活动&#xff0…

AI产品经理必备技能:技术与能力升级图谱

目 录 CONTENTS 前言 第1章 AI产品经理——不是简单的“当产品经理遇上“AI” 001 1.1 三大浪潮看AI技术发展 002 1.2 AI产品和AI产品经理 003 1.3 成为AI产品经理三步走 011 1.3.1 第一步&#xff1a;找到自己的糖山 011 1.3.2 第二步&#xff1a;找到自己的比较优势 …