【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>();

  @override
  Widget 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;
  @override
  void 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 {
  @override
  void 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.mfbz.cn/a/557451.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Java八股文4

Linux篇 1.free命令-查看内存状态 free命令用于显示内存状态&#xff0c;它可以提供关于系统内存使用情况的详细信息。这个命令会显示出内存的使用情况&#xff0c;包括实体内存、虚拟的交换文件内存、共享内存区段&#xff0c;以及系统核心使用的缓冲区等。 其中&#xff0c;参…

2024年国内USB Type-C厂商的机遇与挑战分析

USB Type-C接口作为一种全新的连接标准&#xff0c;已经在各种电子设备中得到了广泛的应用。2024年&#xff0c;国内USB Type-C厂商将面临着诸多机遇和挑战&#xff0c;需要全面分析和应对&#xff0c;以确保在竞争激烈的市场中保持竞争力和持续增长。 USB TYPE-C厂商在2024年…

09-ARM开发板的HelloWorld

在ARM开发板上运行x86_64平台程序 前面在Ubuntu系统编译生成了X86_64平台的HelloWorld程序&#xff0c;通过NFS服务器&#xff0c;尝试在开发板上直接运行。 如图所示&#xff0c;程序无法正常运行&#xff0c;终端提示ARM开发板在执行x86架构&#xff08;Intel或AMD&#xff…

【Linux】地址空间虚拟地址

个人主页 &#xff1a; zxctscl 如有转载请先通知 文章目录 1. 虚拟地址1.1 虚拟地址引入1.2 虚拟地址理解1.3 虚拟地址细节问题 2. 地址空间2.1 理解地址空间2.2 页表和写时拷贝 3. 进程调度 1. 虚拟地址 1.1 虚拟地址引入 先先来一个测试代码&#xff1a; 1 #include<st…

Grass注册不了、按钮灰色的解决方案

近期相信grass挂机项目不少人有所有接触。还有不了解这个项目的可以看看博客&#xff1a; http://t.csdnimg.cn/bI4UO 但是不少人注册时遇到无法注册的问题&#xff0c;或者是注册按钮显示灰色&#xff0c;放上鼠标时显示禁止。这也是博主在尝试时遇到的问题。 经过探索&…

如何解决python安装mysqlclient失败问题

在使用Django等框架来操作MySQL时&#xff0c;实际上底层还是通过Python来操作的&#xff0c;首先需要安装一个驱动程序&#xff0c;在Python3中&#xff0c;驱动程序有多种选择&#xff0c;比如有pymysql以及mysqlclient等。使用pip命令安装mysqlclient失败应如何解决&#xf…

【Linux实践室】Linux高级用户管理实战指南:Linux用户与用户组编辑操作详解

&#x1f308;个人主页&#xff1a;聆风吟_ &#x1f525;系列专栏&#xff1a;Linux实践室、网络奇遇记 &#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 文章目录 一. ⛳️任务描述二. ⛳️相关知识2.1 &#x1f514;Linux查看用户属性命令2.1.1 &#x1f47b;…

测试用例的编写评审

1、什么叫软件测试用例 什么是测试用例 测试用例(TestCase) 是为项目需求而编制的一组测试输入、执行条件 以及预期结果&#xff0c;以便测试某个程序是否满足客户需求。–测试依据 可以总结为:每一个测试点的数据设计和步骤设计。–测试用例 2、测试用例的重要性(了解) 2.1…

社媒矩阵运营解决方案:海外云手机

在全球化的浪潮下&#xff0c;企业愈发认识到通过海外社交媒体平台扩大影响力、树立品牌形象及抢占国际市场的巨大机遇。因此&#xff0c;运营海外社交媒体账户已逐渐成为企业战略部署的重要组成部分。为了全面捕捉多渠道的流量&#xff0c;众多企业选择同时运营多个平台的多个…

基于Spring Boot的校园招聘系统

文章目录 项目介绍主要功能截图&#xff1a;部分代码展示设计总结项目获取方式 &#x1f345; 作者主页&#xff1a;超级无敌暴龙战士塔塔开 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、 简历模板、学习资料、面试题库【关注我&#xff0c;都给你】 &…

基于SkyEye运行Qt:著名应用程序开发框架

Qt是一个著名的跨平台的C图形用户界面应用程序开发框架&#xff0c;目前包括Qt Creator、Qt Designer等等快速开发工具&#xff0c;还支持2D/3D图形渲染、OpenGL&#xff0c;允许真正的组件编程&#xff0c;是与GTK、MFC、OWL、ATL一样的图形界面库。使用Qt开发的软件可以做到一…

抖音直播间没流量怎么办?如何快速提升直播间人气?

抖音直播间人气低迷&#xff0c;是否因为投入的资金不足或是数据表现不够抢眼而让你感到困惑&#xff1f;要提升抖音直播间的人气&#xff0c;首先需要深入了解抖音的推荐逻辑&#xff0c;探究直播间人气的真正来源。 抖音直播间的人气来源有哪些&#xff1f; 抖音直播间人气…

SpringMVC核心流程解析

SpringMVC核心流程解析 DispatcherServlet的继承关系请求流程分析获取HandlerChain(ControllrtMethod拦截器)获取HandlerAdapter handlerMappings的初始化过程 DispatcherServlet的继承关系 DispatcherServlet本质是一个servlet&#xff0c;既然是servlet&#xff0c;一个请求…

Pytorch-自动微分模块

&#x1f947;接下来我们进入到Pytorch的自动微分模块torch.autograd~ 自动微分模块是PyTorch中用于实现张量自动求导的模块。PyTorch通过torch.autograd模块提供了自动微分的功能&#xff0c;这对于深度学习和优化问题至关重要&#xff0c;因为它可以自动计算梯度&#xff0c…

视觉位置识别与多模态导航规划

前言 机器人感知决策是机器人移动的前提&#xff0c;机器人需要对周围环境实现理解&#xff0c;而周围环境通常由静态环境与动态环境构成。机器人在初始状态或者重启时需要确定当前所处的位置&#xff0c;然后根据用户的指令或意图&#xff0c;开展相应移动或抓取操作。通过视觉…

Mamba:使用选择性状态空间的线性时间序列建模

本文主要是关于mamba论文的详解~ 论文&#xff1a;Mamba: Linear-Time Sequence Modeling with Selective State Spaces 论文地址&#xff1a;https://arxiv.org/ftp/arxiv/papers/2312/2312.00752.pdf 代码&#xff1a;state-spaces/mamba (github.com) Demo:state-spaces (St…

Java 算法篇-深入了解 BF 与 KMP 算法

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 BF 算法概述 1.1 BF 算法实际使用 2.0 KMP 算法概述 2.1 KMP 算法实际使用 2.2 相比于 BF 算法实现&#xff0c;KMP 算法的重要思想 2.3 为什么要这样设计&#x…

C++面向对象程序设计-北京大学-郭炜【课程笔记(六)】

C面向对象程序设计-北京大学-郭炜【课程笔记&#xff08;六&#xff09;】 1、可变长数组类的实现2、流插入运算符和流提取运算符的重载2.1、对形如cout << 5 ; 单个"<<"进行重载2.2、对形如cout << 5 << “this” ;连续多个"<<&…

地埋电缆故障检测方法有哪些?地埋电缆故障检测费用是多少?

地埋电缆故障检测方法主要涵盖脉冲反射法、桥接法、高压闪络法和声波定位法等多种方法。选择适当的方法取决于故障类型、电缆类型和实际现场条件。至于地埋电缆故障检测费用则受到多个因素的影响&#xff0c;包括故障类型、检测方法的复杂性、检测设备的先进程度以及所处地区的…

【强化学习的数学原理-赵世钰】课程笔记(十)Actor-Critic 方法

目录 一.最简单的 actor-critic&#xff08;QAC&#xff09;&#xff1a;The simplest actor-critic (QAC) 二.Advantage actor-critic (A2C) 三.Off-policy actor-critic 方法 四. Deterministic actor critic(DPG) Actor-Critic 方法把基于 value 的方法&#xff0c;特别…