Flutter Getx状态管理

news2024/11/18 3:57:09

在 Flutter 开发中，状态管理是一个非常重要的话题。随着应用变得更加复杂，状态管理的方式也变得越来越多。Flutter 提供了多种状态管理的解决方案，如 Provider、Riverpod、BLoC 等，而在这些选项中，GetX 作为一个轻量级、高效且易用的状态管理库，受到了很多开发者的青睐。

本文将介绍如何使用 GetX 进行状态管理，并通过一个实际的 Demo 演示如何在 Flutter 项目中实现响应式状态管理。

什么是 GetX？

GetX 是一个为 Flutter 提供的高效且轻量级的状态管理库。它不仅支持响应式状态管理，还提供了路由管理、依赖注入等功能。GetX 的优势在于其简单易用，性能非常高，而且代码量少。

GetX 的主要特点

  1. 简洁的 API：GetX 提供了简单且易于理解的 API，使用起来非常方便。
  2. 响应式编程：通过 Rx 类型的变量，实现自动监听和更新 UI。
  3. 性能优秀：相比于其他状态管理库，GetX 的性能更优秀，尤其是在响应式状态管理方面。
  4. 全局依赖注入：可以通过 GetX 方便地进行依赖注入，解耦各个部分。

如何使用 GetX 进行状态管理

1. 安装 GetX

首先，在你的 Flutter 项目的 pubspec.yaml 文件中添加 GetX 依赖：

dependencies:
  flutter:
    sdk: flutter
  get: ^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/RxBool
    2、也可以用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 {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: CounterPage(),
    );
  }
}

class CounterPage extends StatelessWidget {
  // 获取 Controller 实例
  final CounterController controller = Get.put(CounterController());

  @override
  Widget 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 {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: CounterPage(),
    );
  }
}

class CounterPage extends StatelessWidget {
  // 获取 Controller 实例
  final CounterController controller = Get.put(CounterController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("GetX with GetBuilder")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 使用 GetBuilder 来手动更新 UI
            GetBuilder<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 {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: UserPage(),
    );
  }
}

class UserPage extends StatelessWidget {
  final UserController controller = Get.put(UserController());

  @override
  Widget 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 {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget 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 {
  @override
  Widget 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 状态管理有所帮助！

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

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

相关文章

腾讯IM web版本实现迅飞语音听写（流式版）

腾讯IM web版本实现迅飞语音听写（流式版）

本文基于TUIKit Demo项目集成迅飞语音听写&#xff08;流式版&#xff09;功能&#xff1a; 主要代码&#xff1a; // \src\TUIKit\components\TUIChat\message-input\index.vue <template><!-- 录音按钮 --><div touchstart.stop"touchstart" />…
阅读更多...
2024140读书笔记|《作家榜名著：生如夏花·泰戈尔经典诗选》——你从世界的生命的溪流浮泛而下，终于停泊在我的心头

2024140读书笔记|《作家榜名著：生如夏花·泰戈尔经典诗选》——你从世界的生命的溪流浮泛而下，终于停泊在我的心头

2024140读书笔记|《作家榜名著&#xff1a;生如夏花泰戈尔经典诗选》——你从世界的生命的溪流浮泛而下&#xff0c;终于停泊在我的心头 《作家榜名著&#xff1a;生如夏花泰戈尔经典诗选》[印]泰戈尔&#xff0c;郑振铎译&#xff0c;泰戈尔的诗有的清丽&#xff0c;有的童真&…
阅读更多...
物理hack

物理hack

声明 声明 文章只是方便各位师傅学习知识&#xff0c;以下网站只涉及学习内容&#xff0c;其他的都与本人无关&#xff0c;切莫逾越法律红线&#xff0c;否则后果自负。 ✍&#x1f3fb;作者简介&#xff1a;致力于网络安全领域&#xff0c;目前作为一名学习者&#xff0c;很荣…
阅读更多...
【运维实施资料集】软件全套运维，实施管理方案，运维建设方案，运维检查单，软件项目运维方案（word原件）

【运维实施资料集】软件全套运维，实施管理方案，运维建设方案，运维检查单，软件项目运维方案（word原件）

1 编制目的 2 系统运行维护 2.1 系统运维内容 2.2 日常运行维护方案 2.2.1 日常巡检 2.2.2 状态监控 2.2.3 系统优化 2.2.4 软件系统问题处理及升级 2.2.5 系统数据库管理维护 2.2.6 灾难恢复 2.3 应急运行维护方案 2.3.1 启动应急流程 2.3.2 成立应急小组 2.3.3 应急处理过程 …
阅读更多...
大学语文教材电子版（第十一版）教学用书PDF及课件

大学语文教材电子版（第十一版）教学用书PDF及课件

大学语文课件&#xff1a;https://caiyun.139.com/m/i?005CiDusEVWnR 《大学语文》&#xff08;第十一版&#xff09;主编&#xff1a;徐中玉 齐森华 谭帆。 大学语文教材电子版教师用书PDF第一课《齐桓晋文之事》艺术赏析&#xff1a; 孟子四处游说&#xff0c;养成善辩的…
阅读更多...
java模拟键盘实现selenium上下左右键 table中的左右滚动条实现滚动

java模拟键盘实现selenium上下左右键 table中的左右滚动条实现滚动

在这篇文章中&#xff0c;我们将学习如何使用Java编程语言模拟键盘输入&#xff0c;特别是模拟上下左右方向键的操作。这是一个很有趣的项目&#xff0c;尤其适合刚入行的开发者。我们将分步进行&#xff0c;接下来&#xff0c;我们会通过表格展示整个实现过程&#xff0c;然后…
阅读更多...
量子计算与人工智能的交汇：科技未来的新引擎

量子计算与人工智能的交汇：科技未来的新引擎

引言 在当今飞速发展的科技世界&#xff0c;人工智能&#xff08;AI&#xff09;和量子计算无疑是最受瞩目的两大前沿领域。人工智能凭借其在数据处理、模式识别以及自动化决策中的强大能力&#xff0c;已经成为推动各行业数字化转型的重要力量。而量子计算则通过颠覆传统计算机…
阅读更多...
【Oracle篇】掌握SQL Tuning Advisor优化工具：从工具使用到SQL优化的全方位指南（第六篇，总共七篇）

【Oracle篇】掌握SQL Tuning Advisor优化工具：从工具使用到SQL优化的全方位指南（第六篇，总共七篇）

&#x1f4ab;《博主介绍》&#xff1a;✨又是一天没白过&#xff0c;我是奈斯&#xff0c;DBA一名✨ &#x1f4ab;《擅长领域》&#xff1a;✌️擅长Oracle、MySQL、SQLserver、阿里云AnalyticDB for MySQL(分布式数据仓库)、Linux&#xff0c;也在扩展大数据方向的知识面✌️…
阅读更多...
变分自编码器（VAE, Variational Autoencoder）

变分自编码器（VAE, Variational Autoencoder）

代码说明 VAE 模型结构&#xff1a; 编码器将输入数据&#xff08;如 MNIST 图像&#xff09;映射到潜在空间&#xff0c;生成均值 (mu) 和对数方差 (logvar)。 通过重新参数化技巧 (reparameterize) 从正态分布中采样潜在向量 z。 解码器将潜在向量 z 映射回原始空间&#xf…
阅读更多...
DataWorks on EMR StarRocks，打造标准湖仓新范式

DataWorks on EMR StarRocks，打造标准湖仓新范式

在大数据领域&#xff0c;数据仓库和实时分析系统扮演着至关重要的角色。DataWorks 基于大数据引擎&#xff0c;为数据仓库/数据湖/湖仓一体等解决方案提供统一的全链路大数据开发治理平台&#xff0c;为用户带来智能化的数据开发和分析体验。而阿里云提供的 EMR Serverless St…
阅读更多...
Redis系列之底层数据结构ZipList

Redis系列之底层数据结构ZipList

Redis系列之底层数据结构ZipList 实验环境 Redis 6.0 什么是Ziplist&#xff1f; Ziplist&#xff0c;压缩列表&#xff0c;这种数据结构会根据存入数据的类型和大小&#xff0c;分配大小不同的空间&#xff0c;所以是为了节省内存而采用的。因为这种数据结构是一种完整连续…
阅读更多...
【FPGA开发】AXI-Stream总线协议解读

【FPGA开发】AXI-Stream总线协议解读

文章目录 AXI-Stream概述协议中一些定义字节定义流的定义 数据流类别字节流连续对齐流连续不对齐流稀疏流 协议的信号信号列表 文章为个人理解整理&#xff0c;如有错误&#xff0c;欢迎指正&#xff01; 参考文献 ARM官方手册 《IHI0051B》 AXI-Stream概述 协议中一些定义 A…
阅读更多...
c# 调用c++ 的dll 出现找不到函数入口点

c# 调用c++ 的dll 出现找不到函数入口点

今天在调用一个设备的dll文件时遇到了一点波折&#xff0c;因为多c 不熟悉&#xff0c;调用过程张出现了找不到函数入口点&#xff0c;一般我们使用c# 调用c 文件&#xff0c;还是比较简单。 [DllImport("AtnDll2.dll",CharSet CharSet.Ansi)]public static extern …
阅读更多...
L11.【LeetCode笔记】有效的括号

L11.【LeetCode笔记】有效的括号

目录 1.题目 2.分析 理解题意 解决方法 草稿代码 ​编辑 逐一排错 1.当字符串为"["时,分析代码 2.当字符串为"()]"时,分析代码 正确代码(isValid函数部分) 提交结果 3.代码优化 1.题目 https://leetcode.cn/problems/valid-parentheses/descri…
阅读更多...
Unity类银河战士恶魔城学习总结（P129 Craft UI 合成面板UI）

Unity类银河战士恶魔城学习总结（P129 Craft UI 合成面板UI）

【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili 教程源地址&#xff1a;https://www.udemy.com/course/2d-rpg-alexdev/ 本章节实现了合成面板的UI设置 UI_CraftWindow.cs 字段作用&#xff1a; UI 组件&#xff1a; itemName / itemDescription / icon&#…
阅读更多...
Python酷库之旅-第三方库Pandas(221)

Python酷库之旅-第三方库Pandas(221)

目录 一、用法精讲 1036、pandas.DatetimeIndex.to_pydatetime方法 1036-1、语法 1036-2、参数 1036-3、功能 1036-4、返回值 1036-5、说明 1036-6、用法 1036-6-1、数据准备 1036-6-2、代码示例 1036-6-3、结果输出 1037、pandas.DatetimeIndex.to_series方法 10…
阅读更多...
通过JS实现下载图片到本地教程分享

通过JS实现下载图片到本地教程分享

今天分享的这个方法我之前自己试了一下&#xff0c;感觉还行&#xff0c;原理就是通过<a>标签的新增属性实现的&#xff0c;然后可以强制触发下载功能&#xff0c;废话不多说&#xff0c;直接上教程。 首先在HTML写下面的代码: <a href"img.jpg" download…
阅读更多...
二、神经网络基础与搭建

二、神经网络基础与搭建

神经网络基础 前言一、神经网络1.1 基本概念1.2 工作原理 二、激活函数2.1 sigmoid激活函数2.1.1 公式2.1.2 注意事项 2.2 tanh激活函数2.2.1 公式2.2.2 注意事项 2.3 ReLU激活函数2.3.1 公式2.3.2 注意事项 2.4 SoftMax激活函数2.4.1 公式2.4.2 Softmax的性质2.4.3 Softmax的应…
阅读更多...
Unreal engine5实现类似鬼泣5维吉尔二段跳

Unreal engine5实现类似鬼泣5维吉尔二段跳

系列文章目录 文章目录 系列文章目录前言一、实现思路二、具体使用蓝图状态机蓝图接口三、中间遇到的问题 前言 先看下使用Unreal engine5实现二段跳的效果 一、实现思路 在Unreal Engine 5 (UE5) 中使用蓝图系统实现类似于《鬼泣5》中维吉尔的二段跳效果&#xff0c;可以通…
阅读更多...
RAG经验论文《FACTS About Building Retrieval Augmented Generation-based Chatbots》笔记

RAG经验论文《FACTS About Building Retrieval Augmented Generation-based Chatbots》笔记

《FACTS About Building Retrieval Augmented Generation-based Chatbots》是2024年7月英伟达的团队发表的基于RAG的聊天机器人构建的文章。 这篇论文在待读列表很长时间了&#xff0c;一直没有读&#xff0c;看题目以为FACTS是总结的一些事实经验&#xff0c;阅读过才发现FAC…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023