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

devtools/2024/9/23 10:24:05/

目录

  • 一、安装
  • 二、使用
    • 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.ppmy.cn/devtools/9078.html

相关文章

Linux 网络操作命令FTP

FTP命令 引言 文件传输协议&#xff08;FTP&#xff09;是一种用于在网络上进行文件传输的协议。在Linux系统中&#xff0c;FTP可以作为一个非常有用的工具来上传、下载和管理文件。本文将介绍如何在Linux系统中安装FTP服务器&#xff0c;以及如何使用FTP客户端进行文件传输。…

Redis中set数据类型详解

SADD key member [member …] summary: Add one or more members to a set since: 1.0.0 SCARD key summary: Get the number of members in a set since: 1.0.0 SDIFF key [key …] summary: Subtract multiple sets since: 1.0.0 SDIFFSTORE destination key [key …] sum…

从 Android 恢复已删除文件的 3 种简单方法

如何从 Android 恢复已删除的文件&#xff1f;毫不犹豫&#xff0c;有些人可能会认为从 Google 备份恢复 Android 文件太容易了。但是&#xff0c;如果删除的文件未同步到您的帐户或未备份怎么办&#xff1f;您错误的恢复可能会永久删除您想要的数据。因此&#xff0c;我们发布…

[Meachines][Easy]Devvortex

Main $ nmap -p- 10.10.11.242 --min-rate 1000 # echo 10.10.11.242 devvortex.htb>>/etc/hosts 子域名爆破 $ apt install seclists $ wfuzz -c -w /usr/share/seclists/Discovery/DNS/subdomains-top1million-5000.txt -u "http://devvortex.htb/" -H &…

【Linux基础】Linux基础概念

目录 前言 浅谈什么是文件&#xff1f; Linux下目录结构的认识及路径 目录结构 路径 家目录 什么是递归式的删除 重定向 输出重定向&#xff1a; 追加重定向&#xff1a; 输入重定向&#xff1a; 命令行管道 shell外壳 为什么需要shell外壳&#xff1f; shell外壳…

网络工程师----第四天

DNS DNS含义&#xff1a; DNS&#xff08;Domain Name System&#xff0c;域名系统&#xff09;&#xff0c;因特网上作为域名和IP地址互相映射的一个分布式数据库&#xff0c;能够使用户更方便的访问互联网&#xff0c;而不用去记住能够被机器直接读取的IP数串。通过主机名&a…

Excel VBA技术:编织数据之梦的魔法语言

想要让你的Excel技能瞬间升级&#xff0c;成为数据处理与展示的顶尖高手吗&#xff1f;Excel VBA技术正是你不可错过的魔法武器&#xff01;它能让你轻松驾驭复杂的数据任务&#xff0c;自动化处理繁琐操作&#xff0c;释放你的双手和大脑。通过VBA&#xff0c;你可以创建精美的…

科大讯飞星火开源大模型iFlytekSpark-13B GPU版部署方法

星火大模型的主页&#xff1a;iFlytekSpark-13B: 讯飞星火开源-13B&#xff08;iFlytekSpark-13B&#xff09;拥有130亿参数&#xff0c;新一代认知大模型&#xff0c;一经发布&#xff0c;众多科研院所和高校便期待科大讯飞能够开源。 为了让大家使用的更加方便&#xff0c;科…