【Flutter】GetX状态管理及路由管理用法

目录

  • 一、安装
  • 二、使用
    • 1.安装GetX插件,快捷生成模版代码
    • 2.主入口MaterialApp改成GetMaterialApp
    • 3.定义路由常量RoutePath类、别名映射页面RoutePages类
    • 4. 初始initialRoute,getPages。
    • 5.调用
  • 总结

一、安装

dependencies:
get: ^4.6.6

二、使用

1.安装GetX插件,快捷生成模版代码

在这里插入图片描述
GetX插件用法Flutter GetX使用—简洁的魅力!

2.主入口MaterialApp改成GetMaterialApp

3.定义路由常量RoutePath类、别名映射页面RoutePages类

route_path.dart类

class RoutePath {///主页面static const String main = "/";///设置static const String setting = "/setting";///设置多语言界面static const String theme = "/theme";///设置多语言界面static const String multiLanguage = "/multiLanguage";///主页面static const String l10n_main = "/l10n_main";///设置static const String l10n_setting = "/l10n_setting";///设置多语言界面static const String l10n_theme = "/l10n_theme";///设置多语言界面static const String l10n_multiLanguage = "/l10n_multiLanguage";
}

route_pages.dart类

import 'package:get/get.dart';
import 'package:brave_component/routes/route_path.dart';import '../example/pages/getx/home/home_view.dart';
import '../example/pages/getx/setting/multi_language/multi_language_binding.dart';
import '../example/pages/getx/setting/multi_language/multi_language_view.dart';
import '../example/pages/getx/setting/setting/setting_binding.dart';
import '../example/pages/getx/setting/setting/setting_view.dart';
import '../example/pages/getx/setting/theme/theme_binding.dart';
import '../example/pages/getx/setting/theme/theme_view.dart';
import '../example/pages/l10n/l10n_home/l10n_home_view.dart';
import '../example/pages/l10n/l10n_setting/l10n_multi_language/l10n_multi_language_binding.dart';
import '../example/pages/l10n/l10n_setting/l10n_multi_language/l10n_multi_language_view.dart';
import '../example/pages/l10n/l10n_setting/l10n_setting/l10n_setting_binding.dart';
import '../example/pages/l10n/l10n_setting/l10n_setting/l10n_setting_view.dart';
import '../example/pages/l10n/l10n_setting/l10n_theme/l10n_theme_binding.dart';
import '../example/pages/l10n/l10n_setting/l10n_theme/l10n_theme_view.dart';class RoutePages {static final List<GetPage> getPages = [GetPage(name: RoutePath.l10n_main,page: () => L10nHomePage(),),GetPage(name: RoutePath.l10n_setting,page: () => L10nSettingPage(),binding: L10nSettingBinding(),),GetPage(name: RoutePath.l10n_multiLanguage,page: () => L10nMultiLanguagePage(),binding: L10nMultiLanguageBinding(),),GetPage(name: RoutePath.l10n_theme,page: () => L10nThemePage(),binding: L10nThemeBinding(),),GetPage(name: RoutePath.main,page: () => HomePage(),),GetPage(name: RoutePath.setting,page: () => SettingPage(),binding: SettingBinding(),),GetPage(name: RoutePath.multiLanguage,page: () => MultiLanguagePage(),binding: MultiLanguageBinding(),),GetPage(name: RoutePath.theme,page: () => ThemePage(),binding: ThemeBinding(),),];
}

4. 初始initialRoute,getPages。

GetMaterialApp(initialRoute: RoutePath.main,getPages: RoutePages.getPages,title: 'component',theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),useMaterial3: true,),translations: Messages(),locale: LanguageUtils.getLocale(),fallbackLocale: const Locale("zh", "CN"),localeResolutionCallback: (deviceLocale, supportedLocales) {print('当前语言:${deviceLocale.toString()}');return;},supportedLocales: AppLocalizations.supportedLocales,localizationsDelegates: const [AppLocalizations.delegate,GlobalCupertinoLocalizations.delegate,GlobalWidgetsLocalizations.delegate,GlobalMaterialLocalizations.delegate],);

5.调用

在这里插入图片描述
setting_view.dart类 视图层

import 'package:brave_component/core/utils/language_utils.dart';
import 'package:brave_component/routes/route_path.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';import '../../../../../core/language/local.dart';
import '../../../../../core/res/colours.dart';
import '../../../../../widgets/base/texts.dart';
import 'setting_logic.dart';class SettingPage extends StatelessWidget {SettingPage({super.key});final logic = Get.find<SettingLogic>();@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Texts.fontSize18Normal(Local.setting.tr,color: Colours.titleColor),),body: GetBuilder<SettingLogic>(builder: (logic) {return Container(padding: const EdgeInsets.only(top: 20),child: Container(padding: const EdgeInsets.all(15),child: Column(children: [GestureDetector(onTap: () {logic.toName(RoutePath.multiLanguage);},child: Row(children: [Expanded(child: Texts.fontSize14Normal(Local.multiLanguage.tr,color: Colours.titleColor),),Texts.fontSize14Normal(LanguageUtils.getLanguage(context, logic.countryCode),color: Colours.titleColor),const Icon(Icons.chevron_right)],),),const SizedBox(height: 12),GestureDetector(onTap: () {logic.toName(RoutePath.theme);},child: Row(children: [Expanded(child: Texts.fontSize14Normal(Local.theme.tr,color: Colours.titleColor),),Texts.fontSize14Normal(Local.theme.tr,color: Colours.titleColor),const Icon(Icons.chevron_right)],),),],),),);}));}
}

setting_logic.dart类 逻辑层继承GetxController,状态逻辑多的情况还可增加一个state层

import 'package:brave_component/core/cache/helpers/cache_helper.dart';
import 'package:brave_component/routes/route_path.dart';
import 'package:get/get.dart';class SettingLogic extends GetxController {late String countryCode;@overridevoid onInit() {super.onInit();countryCode = CacheHelper.countryCode;}void toName(String page) {switch (page) {case RoutePath.multiLanguage:Get.toNamed(RoutePath.multiLanguage)?.then((value) => {getCountryCode()});break;case RoutePath.theme:Get.toNamed(RoutePath.theme);break;default:Get.toNamed(RoutePath.multiLanguage);break;}}void getCountryCode() {countryCode = CacheHelper.countryCode;print('setting getCountryCode:$countryCode');update();}
}

setting_binding.dart类 binding层以lazy的方式获取setting_logic的实例,手动添加到RoutePages 类

import 'package:get/get.dart';import 'setting_logic.dart';class SettingBinding extends Bindings {@overridevoid dependencies() {Get.lazyPut(() => SettingLogic());}
}

总结

  1. logic层已经lazy的形式添加过,其他类需要用它的时候final logic = Get.find<SettingLogic>();
  2. logic层处理好逻辑,需要通知视图层更新时,logic层调用update();,视图层通过GetBuilder包裹需要更新的widget
  3. 将光标放到需要创建GetBuilder的widget上,alt/options+enter
  4. 路由跳转,使用命名路由Get.toNamed(RoutePath.multiLanguage);

源码

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

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

相关文章

MDK-ARM Keil5.38 下载安装环境搭建

一、keil软件介绍 KEIL是公司的名称&#xff0c;有时候也指KEIL公司的所有软件开发工具&#xff0c;目前2005年Keil由ARM公司收购&#xff0c;成为ARM的公司之一。 MDK&#xff08;Microcontroller Development Kit&#xff09; 也称MDK-ARM、KEIL MDK、RealView MDK、KEIL For…

[最新]访问/加速StackOverFlow的方法

但是有很多问题都是在StackOverFlow上有现成的解决方案&#xff0c;而某度搜索引擎…前一页的回答互相抄袭&#xff0c;看着实在胀眼睛。 话不多说&#xff0c;解决办法&#xff1a; 直接访问插件商店下载插件&#xff08;最快捷方便&#xff0c;点点就行&#xff09;&#x…

Python中的迭代器:深入理解与实用指南

文章目录 1. 迭代器的基本概念2. Python中的迭代器实例3. 自定义迭代器3.1 例子3.2 详细过程 4. 迭代器的高级应用5. 常见问题与解答 迭代器是Python中非常核心的概念之一&#xff0c;在面试中也会被问到。下面我会详细介绍什么是迭代器&#xff0c;使用方法&#xff0c;以及使…

python_表格处理_pandas_pd.read_csv输入输出参数说明

pd.read_csv 输入参数说明 pd.read_csv() 函数用于从 CSV 文件中读取数据&#xff0c;并返回一个 DataFrame 对象。它的常用输入参数说明如下&#xff1a; filepath_or_buffer&#xff1a;CSV 文件的路径或者文件对象&#xff0c;可以是本地文件路径、URL、文件类对象等。sep&…

怎么转行做产品经理?

小白转产品经理第一点要先学基础理论知识&#xff0c;学了理论再去实践&#xff0c;转行&#xff0c;跳槽&#xff01; 学理论比较好的就是去报NPDP的系统班&#xff0c;考后也会有面试指导课、职场晋升课程&#xff0c;对小白来说非常合适了~&#xff08;B站&#xff1a;不爱…

linux驱动开发中jiffies的使用

Linux 内核使用全局变量 jiffies 来记录系统从启动以来的系统节拍数&#xff0c;系统启动的时候会将 jiffies 初始化为 0&#xff0c;jiffies 定义在文include/linux/jiffies.h 中&#xff0c;定义如下&#xff1a; extern u64 __jiffy_data jiffies_64; // 64位的jiffie…

探索 IntelliJ IDEA 2024.1最新变化:全面升级助力编码效率

探索 IntelliJ IDEA 2024.1最新变化&#xff1a;全面升级助力编码效率 文章目录 探索 IntelliJ IDEA 2024.1最新变化&#xff1a;全面升级助力编码效率摘要引言 IntelliJ IDEA 2024.1 最新变化关键亮点全行代码补全 Ultimate对 Java 22 功能的支持新终端 Beta编辑器中的粘性行 …

mac安装idea、安装Tomcat,idea配置tomcat,mac安装Maven

记录一下mac安装idea、安装Tomcat&#xff0c;idea配置tomcat&#xff0c;mac安装Maven的过程&#xff0c;及遇到的问题&#xff1a; &#xff08;1&#xff09;mac安装idea&#xff1a;idea有两个版本社区版和商业版本&#xff0c;其中社区版免费但是不能安装javaEE插件&…

『FPGA通信接口』串行通信接口-IIC(2)EEPROM读写控制器

文章目录 1.EEPROM简介2.AT24C04简介3.逻辑框架设计4.随机读写时序5.仿真代码与仿真结果分析6.注意事项7.效果8.传送门 1.EEPROM简介 EEPROM (Electrically Erasable Programmable read only memory) 是指带电可擦可编程只读存储器。是一种掉电后数据不丢失的存储芯片。在嵌入…

k8s一些难懂的技术点(1)

一、k8s api server的选举机制 API server&#xff08;API服务器&#xff09;的选举机制是指在这些系统中&#xff0c;如何选择一个或多个API服务器来处理客户端请求的过程。这种选举机制通常用于确保高可用性、负载均衡和故障转移。 以下是API server选举机制的一些关键点&a…

uniapp项目中表单输入完整项之后提交按钮颜色高亮显示并触发点击事件

1.效果图&#xff1a; 2.html <view class"add" :style"{background: dynamicBackgroundColor, border-color: white}" click"handleClick">添加新地址 </view> 3.js formData: {name: ,phoneNumber: ,addressDetail: }//利用com…

【AIGC调研系列】Dify平台是什么

Dify平台是一个专为大型语言模型&#xff08;LLM&#xff09;开发和运营设计的LLMOps&#xff08;Large Language Model Operations&#xff09;平台。它旨在简化AI应用的创建、部署和管理过程&#xff0c;使开发者能够更快速、更轻松地构建和运营基于GPT等模型的AI应用。 Dif…

电大搜题微信公众号:引领海南开放大学远程教育新风尚

随着信息技术的日新月异&#xff0c;远程教育已成为现代教育的重要组成部分。海南开放大学&#xff0c;作为我国广播电视大学系统的一员&#xff0c;始终紧跟时代步伐&#xff0c;不断创新教学方式和服务模式&#xff0c;旨在为广大学生提供更为优质、高效的教育资源。其中&…

JVM 性能调优命令(jps,jinfo,jstat,jstack,jmap)

常用命令&#xff1a;jps、jinfo、jstat、jstack、jmap jps jps查看java进程及相关信息 jps -l 输出jar包路径&#xff0c;类全名 jps -m 输出main参数 jps -v 输出JVM参数jps命令示例 显示本机的Java虚拟机进程&#xff1a; # jps 15729 jar 92153 Jps 90267 Jstat显示主类…

Java中方法值的传递机制详解

Java中方法值的传递机制详解 在Java中&#xff0c;当我们传递参数给方法时&#xff0c;实际上传递的是参数的“值”&#xff0c;而不是参数的“引用”。这意味着&#xff0c;在方法内部对参数所做的任何修改都不会影响到方法外部的原始变量。这种传递机制称为“值传递”。 下…

嵌入式Linux:Linux系统文件目录说明

在Linux系统中&#xff0c;系统文件和目录按照一定的约定被组织和分配到不同的位置。这些文件和目录通常用于存储系统配置、程序文件、库文件等。 以下是一些常见的系统文件目录及其用途的详细说明&#xff1a; /bin:存放系统中最基本的命令&#xff08;二进制文件&#xff09;…

算法:指针

常见的双指针 面试题 17.09. 第 k 个数----三指针 有些数的素因子只有 3&#xff0c;5&#xff0c;7&#xff0c;请设计一个算法找出第 k 个数。注意&#xff0c;不是必须有这些素因子&#xff0c;而是必须不包含其他的素因子。例如&#xff0c;前几个数按顺序应该是 1&#…

如何防止重复下单

文章目录 一&#xff1a;重复下单与幂等性问题二&#xff1a;如何解决重复下单问题三&#xff1a;总结 一&#xff1a;重复下单与幂等性问题 用户在下单页面进行下单时&#xff0c;由于用户点击下单按钮 多次 、或者 重试策略导致在订单服务中接收到了 两次同样 的下单请求。 …

YOLOv9改进策略 | Neck篇 | 2024.1最新MFDS-DETR的HS-FPN改进特征融合层(轻量化Neck、全网独家首发)

一、本文介绍 本文给大家带来的改进机制是最近这几天最新发布的改进机制MFDS-DETR提出的一种HS-FPN结构&#xff0c;其是一种为白细胞检测设计的网络结构&#xff0c;主要用于解决白细胞数据集中的多尺度挑战。它的基本原理包括两个关键部分&#xff1a;特征选择模块和特征融合…

【单调栈】力扣85.最大矩形

好久没更新了 ~ 我又回来啦&#xff01; 两个好消息&#xff1a; 我考上研了&#xff0c;收到拟录取通知啦&#xff01;开放 留言功能 了&#xff0c;小伙伴对于内容有什么疑问可以在文章底部评论&#xff0c;看到之后会及时回复大家的&#xff01; 前面更新过的算法&#x…