Flutter：getX的学习

前言

学习教程：Getx教程_Flutter+Getx系列实战教程

简介
getX是第三方的状态管理插件，不仅具有状态管理的功能，还具有路由管理、主题管理、国际化多语言管理、网络请求、数据验证等功能。相比其他状态管理组件，getX简单、功能强大。

官方文档
https://pub-web.flutter-io.cn/packages/get

安装

flutter pub add get

将MaterialApp修改为GetMaterialApp

GetMaterialApp(title: 'getx',theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),useMaterial3: true,),home: const MyHomePage(title: 'getx'),);

Dialog、snackbar、bottomSheet

Dialog

ElevatedButton(onPressed: () {Get.defaultDialog(title: "默认弹窗",middleText: '弹出内容，你确定要卸载吗？',confirm:TextButton(onPressed: () {Get.back();}, child: const Text("确定")),cancel:TextButton(onPressed: () {Get.back();}, child: const Text("取消")));},child: const Text("getx 默认dialog"))

在这里插入图片描述

snackbar

ElevatedButton(onPressed: () {Get.snackbar("提示", "删除成功");},child: const Text("snack-bar"))

在这里插入图片描述
bottomSheet

ElevatedButton(onPressed: () {Get.bottomSheet(Container(color: Colors.white,height: 130,child: Column(children: [ListTile(leading: const Icon(Icons.wb_sunny_outlined),title: const Text("白天模式"),onTap: () {Get.changeTheme(ThemeData.light());Get.back();},),const Divider(),ListTile(leading: const Icon(Icons.wb_sunny),title: const Text("夜间模式"),onTap: () {Get.changeTheme(ThemeData.dark());Get.back();},),],),));},child: const Text("snack-bar"))

在这里插入图片描述

路由管理

GetX 为我们封装了Navigation，无需context可进行跳转。使用GetX进行路由跳转更加的简单。只需要使用Get.to() 可进行路由跳转，GetX对路由跳转简化了跳转动画设置、动画时长定义、动画曲线设置

我们可以通过Get.to()实现普通的路由跳转，通过Get.toNamed实现命名路由跳转，通过Get.back()实现返回上一级路由，通过Get.ofAll()返回跟路由，可以通过Get.off()将当前页面从页面栈中移除，并将新的页面添加到页面栈中，可以通过Get.arguments获取到路由传参

配置路由及路由动画

GetMaterialApp(title: 'getx',theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),useMaterial3: true,),// home 和 initialRoute同时存在的话initialRoute会优先生效home: const MyHomePage(title: 'getx'), // 主页initialRoute: '/', // 默认显示的路由页面defaultTransition: Transition.leftToRight, // 设置所有页面默认的路由跳转动画getPages: [//路由地址GetPage(name: '/', page: () => const MyHomePage(title: 'getx')),GetPage(name: '/my',page: () => const MyInfo(),transition: Transition.leftToRight // 设置路由过度动画)],)

 Get.toNamed('my', arguments: {"message": 'Hello Flutter'});

  Widget build(BuildContext context) {String mes = Get.arguments?["message"] ?? '11';return Scaffold(appBar: AppBar(title: const Text('我的'),),body: Center(child: Text("个人信息:$mes"),),);}

在这里插入图片描述

路由抽离

import 'package:test/page/my.dart';
import 'package:get/get.dart';class AppPage {static final List<GetPage<dynamic>> routes = [GetPage(name: '/my',page: () => const MyInfo(),transition: Transition.leftToRight // 设置路由过度动画)];
}

GetMaterialApp(title: 'getx',theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),useMaterial3: true,),// home 和 initialRoute同时存在的话initialRoute会优先生效home: const MyHomePage(title: 'getx'), // 主页// 默认显示的路由页面defaultTransition: Transition.leftToRight, // 设置所有页面默认的路由跳转动画getPages: AppPage.routes,)

路由中间件（路由守卫）

import 'package:flutter/cupertino.dart';
import 'package:test/page/my.dart';
import 'package:get/get.dart';class AppPage {static final List<GetPage<dynamic>> routes = [GetPage(name: '/my',page: () => const MyInfo(),transition: Transition.leftToRight, // 设置路由过度动画middlewares: [MyMiddleWare()])];
}// 中间件
class MyMiddleWare extends GetMiddleware {// 重写重定向@overrideredirect(route) {String power = Get.arguments?['power'];if (power == 'no') {Get.snackbar("提示", "请先进行登录");return const RouteSettings(name: 'login');}// 放行，跳转到目标路由return null;}
}

状态管理

主要用与多个页面共享状态使用，某一个页面的状态改变，其他页面也随着改变。

单页面状态管理

class _MyHomePageState extends State<MyHomePage> {// 定义一个响应式的整数RxInt count = 0.obs;// 或者RxInt a = RxInt(0);@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: Text(widget.title),),// const Color(0x00cab6ec)body: Column(children: [ElevatedButton(onPressed: () {count.value += 1;},child: const Text("加1")),//   监听值的变化Obx(() => Text("当前值：${count.value}"))],),);}
}

如果使用过vue3，那么接受起来就非常容易了。

优点：如果使用setState 会重新运行build进行更新，如果内容过多的话，会产生较大的开销。使用Getx只会更新你监听的组件，实现一个局部更新。

多页面状态管理

定义一个Controller

import 'package:get/get.dart';class CountController extends GetxController {// 定义响应式变量RxInt count = 0.obs;
//  增加void add() {count.value++;// 调用GetxController内置方法进行更新update();}// 减少void del() {count.value--;// 调用GetxController内置方法进行更新update();}
}

主页面使用

class _MyHomePageState extends State<MyHomePage> {// 创建控制器示例CountController countController =Get.put(CountController(), tag: 'countController');@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: Text(widget.title),),// const Color(0x00cab6ec)body: Column(children: [ElevatedButton(onPressed: () {Get.toNamed('/my');},child: const Text("我的")),ElevatedButton(onPressed: () {// 加1countController.add();},child: const Text("加1")),//   监听值的变化Obx(() => Text("当前值：${countController.count.value}"))],),);}
}

其他页面使用

class MyInfoState extends State<MyInfo> {// 获取示例late final CountController countController;@overridevoid initState() {super.initState();countController = Get.find(tag: 'countController');}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('我的'),),body: Center(child: ElevatedButton(child: const Text("减1"),onPressed: () {countController.del();},),),);}
}

在这里插入图片描述

GetX Binding

在我们所有使用Getx状态管理器时，都需要手动创建一个示例，这样是是否麻烦的。而使用Binding可以在项目初始化时把需要使用的状态管理器统一进行初始化。

创建示例的几个方法

  • Get.put，不使用控制器实例也会被创建
  • Get.lazyPut，懒加载方式创建实例，只有在使用时才会被创建
  • Get.putAsync，Get.put的异步版本
  • Get.create，每次使用都会创建一个新的实例

创建绑定类

import 'package:get/get.dart';import 'count_controller.dart';class AllControllerBinding implements Bindings {@overridevoid dependencies() {// 初始化Get.lazyPut<CountController>(() => CountController());// 多个则多执行几次Get.lazyPut}
}

在main.dart中初始化

GetMaterialApp(title: 'getx',// 初始化绑定状态管理类initialBinding: AllControllerBinding(),theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),useMaterial3: true,),// home 和 initialRoute同时存在的话initialRoute会优先生效home: const MyHomePage(title: 'getx'), // 主页// 默认显示的路由页面defaultTransition: Transition.leftToRight, // 设置所有页面默认的路由跳转动画getPages: AppPage.routes,)

使用
初始化完成后，就不需要再进行创建。使用时只需要通过Get.find来获取实例即可

CountController  countController = Get.find<CountController>();

GetView

GetView是GetX框架中的一个重要组件，它主要用于简化页面组件的创建和管理。通过继承GetView，可以方便地创建一个具有状态管理和路由导航功能的页面。

GetView的作用主要有以下几点：

  • 简化页面的创建：继承GetView后，只需重写Widget build(BuildContext context)方法即可创建页面，无需再手动创建StatefulWidget或StatelessWidget。

  • 管理页面状态：GetView内部封装了GetX框架提供的状态管理功能，可以轻松实现状态的监听、更新和销毁，避免了手动管理状态的繁琐操作。

  • 路由导航：GetView提供了简单的路由导航功能，可以通过Get.to()、Get.off()等方法进行页面跳转，并且可以携带参数传递。

  • 依赖注入：GetView内置了依赖注入功能，可以通过Get.put()、Get.lazyPut()等方法来注册和获取全局的依赖对象，方便在页面中使用。

总的来说，GetView的作用是简化页面组件的创建和管理，提供了便捷的状态管理和路由导航功能，使得开发者可以更专注于业务逻辑的实现。

实例

// 需要指定要使用的状态管理类
class MyInfoPage extends GetView<CountController> {const MyInfoPage({super.key});@overrideWidget build(BuildContext context) {// 如果第一次使用还需要put（没有结合Binding时）Get.put(CountController());return Scaffold(appBar: AppBar(title: const Text('我的'),),body: Center(child: ElevatedButton(child: const Text("减1"),onPressed: () {// 因为几次了GetView并且指定了泛型，因此可以获取到对应controllercontroller.del();},),),);}
}

几种使用情况：

  • 只是单纯展示共享状态或者需要对共享状态操作
  • 既有共享状态又有私有状态，这是可以结合响应式状态变量来使用。这样就不需要创建StatefulWidget以及其对应的State

多语言配置

略，可以自行观看视频。

工具类——GetUtils

GetUtils是Getx提供的工具类库，包含值是否为空、是否是数字、视频、音频、ppt、邮箱、手机号等。

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

“智越”界限，SSOT上海国际智慧办公展览会来啦

“智越”界限，SSOT上海国际智慧办公展览会来啦

随着人工智能、大数据、云计算等技术的快速发展&#xff0c;目前物联网应用已经从概念踏进规模部署的阶段&#xff0c;场景化和规模化已成常态。传统办公室作为企业行政运营的核心场景&#xff0c;也开始受到“科技办公“移动办公”“共享办公”等非传“智慧办公”概念的影响不…
阅读更多...
vscode远程调试php

vscode远程调试php

使用vscode远程调试php的方法 1.安装remote ssh插件 2.连接服务器 可以点击左下角的绿色按钮&#xff0c;或者ctrlshiftp打开命令框输入remote ssh应该也有。 3.在服务器端vscode安装php debug插件 4.安装xdebug xdebug是用来调试php的软件&#xff0c;原本和vscode没什么关…
阅读更多...
04、添加 com.fasterxml.jackson.dataformat -- jackson-dataformat-xml 依赖报错

04、添加 com.fasterxml.jackson.dataformat -- jackson-dataformat-xml 依赖报错

Correct the classpath of your application so that it contains a single, compatible version of com.fasterxml.jackson.dataformat.xml.XmlMapper 解决&#xff1a; 改用其他版本&#xff0c;我没写版本号&#xff0c;springboot自己默认的是 2.11.4 版本 成功启动项目…
阅读更多...
DBeaver 23.1.5 发布

DBeaver 23.1.5 发布

导读DBeaver 是一个免费开源的通用数据库工具&#xff0c;适用于开发人员和数据库管理员。DBeaver 23.1.5 现已发布&#xff0c;更新内容如下. Data editor 重新设计了词典查看器面板 UI 空间数据类型&#xff1a;曲线几何线性化已修复 数据保存时结果选项卡关闭的问题已解决…
阅读更多...
【LeetCode】剑指 Offer ＜二刷＞（5）

【LeetCode】剑指 Offer ＜二刷＞（5）

目录 题目&#xff1a;剑指 Offer 10- II. 青蛙跳台阶问题 - 力扣&#xff08;LeetCode&#xff09; 题目的接口&#xff1a; 解题思路&#xff1a; 代码&#xff1a; 过啦&#xff01;&#xff01;&#xff01; 题目&#xff1a;剑指 Offer 11. 旋转数组的最小数字 - 力…
阅读更多...
超图嵌入论文阅读1：对偶机制非均匀超网络嵌入

超图嵌入论文阅读1：对偶机制非均匀超网络嵌入

超图嵌入论文阅读1&#xff1a;对偶机制非均匀超网络嵌入 原文&#xff1a;Nonuniform Hyper-Network Embedding with Dual Mechanism ——TOIS&#xff08;一区 CCF-A&#xff09; 背景 超边&#xff1a;每条边可以连接不确定数量的顶点 我们关注超网络的两个属性&#xff1…
阅读更多...
打破数据孤岛！时序数据库 TDengine 与创意物联感知平台完成兼容性互认

打破数据孤岛！时序数据库 TDengine 与创意物联感知平台完成兼容性互认

新型物联网实现良好建设的第一要务就是打破信息孤岛&#xff0c;将数据汇聚在平台统一处理&#xff0c;实现数据共享&#xff0c;放大物联终端的行业价值&#xff0c;实现系统开放性&#xff0c;以此营造丰富的行业应用环境。在此背景下&#xff0c;物联感知平台应运而生&#…
阅读更多...
计算机毕业设计 校园二手交易平台 Vue+SpringBoot+MySQL

计算机毕业设计 校园二手交易平台 Vue+SpringBoot+MySQL

作者主页&#xff1a;Designer 小郑 作者简介&#xff1a;Java全栈软件工程师一枚&#xff0c;来自浙江宁波&#xff0c;负责开发管理公司OA项目&#xff0c;专注软件前后端开发、系统定制、远程技术指导。CSDN学院、蓝桥云课认证讲师&#xff0c;全栈领域优质创作者。 项目内容…
阅读更多...
在IIS服务器上安装SSL证书（2023配置启用HTTPS部署教程）内容来源SSL市场网

在IIS服务器上安装SSL证书（2023配置启用HTTPS部署教程）内容来源SSL市场网

https://www.sslmarket.com.cn/146.html
阅读更多...
uni-app之android离线自定义基座

uni-app之android离线自定义基座

一 为什么要自定义基座 1&#xff0c;基座其实就是一个app&#xff0c;然后新开发的页面可以直接在手机上面显示&#xff0c;查看效果。 2&#xff0c;默认的基座就是uniapp帮我们打包好的基座app&#xff0c;然后我们可以进行页面的调试。 3&#xff0c;自定义基座主要用来…
阅读更多...
【MySQL】4、MySQL备份与恢复

【MySQL】4、MySQL备份与恢复

备份的主要目的是灾难恢复&#xff0c;备份还可以测试应用、回滚数据修改、查询历史数据、审计等 MySQL日志管理 MySQL 的日志默认保存位置为 /usr/local/mysql/data #配置文件 vim /etc/my.cnf 日志的分类 常见日志有&#xff1a; 错误日志&#xff0c;一般查询日志&…
阅读更多...
Windows下Redis的安装和配置

Windows下Redis的安装和配置

文章目录 一,Redis介绍二,Redis下载三,Redis安装-解压四,Redis配置五,Redis启动和关闭(通过terminal操作)六,Redis连接七,Redis使用 一,Redis介绍 远程字典服务,一个开源的,键值对形式的在线服务框架,值支持多数据结构,本文介绍windows下Redis的安装,配置相关,官网默认下载的是…
阅读更多...
SpringCloud（十）——ElasticSearch简单了解（三）数据聚合和自动补全

SpringCloud（十）——ElasticSearch简单了解（三）数据聚合和自动补全

文章目录 1. 数据聚合1.1 聚合介绍1.2 Bucket 聚合1.3 Metrics 聚合1.4 使用 RestClient 进行聚合 2. 自动补全2.1 安装补全包2.2 自定义分词器2.3 自动补全查询2.4 拼音自动补全查询2.5 RestClient 实现自动补全2.5.1 建立索引2.5.2 修改数据定义2.5.3 补全查询2.5.4 解析结果…
阅读更多...
XML—DTD、 Schema

XML—DTD、 Schema

目录 DTD是什么&#xff1f; DTD有什么用途&#xff1f; DTD与XML有什么联系&#xff1f; DTD原理图 外部DTD DTD文件book.dtd: 使用外部DTD文件的XML文件 PCDATA XML 文档构建模块 一、元素 1、元素声明 ①、有元素&#xff1a; ②、空元素&#xff1a; ③、ANY…
阅读更多...
ArcGIS将两个相同范围但不同比例或位置的矢量数据移动到相同位置

ArcGIS将两个相同范围但不同比例或位置的矢量数据移动到相同位置

有两个市图层&#xff0c;一个是正确经纬度的市行政范围图层&#xff0c;另一个是其他软件导出获取的不正确经纬度信息或缺失信息。 如果单纯的依靠移动图层&#xff0c;使不正确的移动到正确位置需要很久。尝试定义投影等也不能解决。 使用ArcMap 的空间校正工具条&#xff…
阅读更多...
单片机-控制按键点亮LED灯

单片机-控制按键点亮LED灯

1、按键电路图 定义四个按键引脚 1、按键按下 为 输入为低电平 2、按键不按下 IO有上拉电阻&#xff0c;为高电平 // 定义 按键的 管教 sbit KEY1 P3^1; sbit KEY2 P3^0; sbit KEY3 P3^2; sbit KEY4 P3^3; 2、LED灯电路图 LED 输出高电平为亮 // 定义LED灯 管教 sbit LED1…
阅读更多...
jmeter 性能测试工具的使用（Web性能测试）

jmeter 性能测试工具的使用（Web性能测试）

1、下载 该软件不用安装&#xff0c;直接解压打开即可使用。 2、使用 这里就在win下进行&#xff0c;图形界面较为方便 　　在目录apache-jmeter-2.13\bin 下可以见到一个jmeter.bat文件&#xff0c;双击此文件&#xff0c;即看到JMeter控制面板。主界面如下&#xff1a; 3、创…
阅读更多...
色温曲线坐标轴的选取：G/R、G/B还是R/G、B/G ？

色温曲线坐标轴的选取：G/R、G/B还是R/G、B/G ？

海思色温曲线坐标 Mstar色温曲线坐标 高通色温曲线坐标 联咏色温曲线坐标 查看各家白平衡调试界面&#xff0c;比如海思、Mstart、高通等调试资料&#xff0c;白平衡模块都是以R/G B/G作为坐标系的两个坐标轴&#xff0c;也有方案是以G/R G/B作为坐标系的两个坐标轴。 以G/R G…
阅读更多...
Windows安装配置Rust（附CLion配置与运行）

Windows安装配置Rust（附CLion配置与运行）

Windows安装配置Rust&#xff08;附CLion配置与运行&#xff09; 前言一、下载二、安装三、配置标准库&#xff01;&#xff01;&#xff01;四、使用 CLion 运行 rust1、新建rust项目2、配置运行环境3、运行 前言 本文以 windows 安装为例&#xff0c;配置编译器为 minGW&…
阅读更多...
机器学习——KNN算法

机器学习——KNN算法

1、&#xff1a;前提知识 KNN算法是机器学习算法中用于分类或者回归的算法&#xff0c;KNN全称为K nearest neighbour&#xff08;又称为K-近邻算法&#xff09; 原理&#xff1a;K-近邻算法采用测量不同特征值之间的距离的方法进行分类。 优点&#xff1a;精度高 缺点&…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023