Flutter：getX的学习

news2024/10/5 14:08:20

前言

学习教程：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 {
  // 重写重定向
  @override
  redirect(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);

  @override
  Widget 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');

  @override
  Widget 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: () {
                // 加1
                countController.add();
              },
              child: const Text("加1")),
          //   监听值的变化
          Obx(() => Text("当前值：${countController.count.value}"))
        ],
      ),
    );
  }
}

其他页面使用

class MyInfoState extends State<MyInfo> {
  // 获取示例
  late final CountController countController;

  @override
  void initState() {
    super.initState();
    countController = Get.find(tag: 'countController');
  }

  @override
  Widget 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 {
  @override
  void 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});

  @override
  Widget 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并且指定了泛型，因此可以获取到对应controller
            controller.del();
          },
        ),
      ),
    );
  }
}

几种使用情况：

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

多语言配置

略，可以自行观看视频。

工具类——GetUtils

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

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

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

相关文章

JDK源码解析-Object

JDK源码解析-Object

1. Object类 所有类的基类——java.lang.Object Object 类是所有类的基类&#xff0c;当一个类没有直接继承某个类时&#xff0c;默认继承Object类Object 类属于 java.lang 包&#xff0c;此包下的所有类在使用时无需手动导入&#xff0c;系统会在程序编译期间自动导入。 思…
阅读更多...
（二）范数与距离

（二）范数与距离

本文主要内容如下&#xff1a; 1. 范数的定义2. 常见的范数举例3. 范数的等价4. 距离与度量空间的定义 1. 范数的定义 定义1-1&#xff1a;设 E E E 为向量空间&#xff0c; R \mathbb{R} R 为实数域。若映射 ∥ ⋅ ∥ : E → R : x ↦ ∥ x ∥ \begin{equation*} \lVert\cd…
阅读更多...
12.物联网LWIP之消息处理机制，lwip消息传递机制

12.物联网LWIP之消息处理机制，lwip消息传递机制

一。LWIP数据包消息处理 1.接受数据包 2.构造消息 3.投递消息 4.获取消息 5.处理数据包 api_msg 这个结构体包括执行函数所必需的一切,对于另一个线程上下文中的netconn(主要用于处理netconn)在tcpip_thread上下文中(线程安全)。 struct api_msg { /* 大家可以理解为是一个so…
阅读更多...
ssm学生信息管理系统源码和论文

ssm学生信息管理系统源码和论文

ssm学生信息管理系统源码和论文075 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm 摘 要 传统办法管理学生信息首先需要花费的时间比较多&#xff0c;其次数据出错率比较高&#xff0c;而且对错误的数据进行…
阅读更多...
多目标应用：基于多目标向日葵优化算法（MOSFO）的微电网多目标优化调度MATLAB

多目标应用：基于多目标向日葵优化算法（MOSFO）的微电网多目标优化调度MATLAB

一、微网系统运行优化模型 参考文献&#xff1a; [1]李兴莘,张靖,何宇,等.基于改进粒子群算法的微电网多目标优化调度[J].电力科学与工程, 2021, 37(3):7 二、多目标向日葵优化算法 多目标向日葵优化算法&#xff08;Multi-objective sunflower optimization&#xff0c;MOS…
阅读更多...
企业网络安全：威胁检测和响应 （TDR）

企业网络安全：威胁检测和响应 （TDR）

什么是威胁检测和响应 威胁检测和响应&#xff08;TDR&#xff09;是指识别和消除 IT 基础架构中存在的恶意威胁的过程。它涉及主动监控、分析和操作&#xff0c;以降低风险并防止未经授权的访问、恶意活动和数据泄露&#xff0c;以免它们对组织的网络造成任何潜在损害。威胁检…
阅读更多...
新开通的抖店没有销量和体验分，如何找达人带货起店？教程如下

新开通的抖店没有销量和体验分，如何找达人带货起店？教程如下

我是王路飞。 做抖店&#xff0c;想要快速起店&#xff0c;无非就是做动销&#xff0c;或者货损。 但是动销比较有风险&#xff0c;货损的话&#xff0c;一个是新手不会具体的操作和设置&#xff0c;一个是自己利润受损。 所以今天给你们说下&#xff0c;新开通的抖店在没有…
阅读更多...
Java EE 突击 15 - Spring Boot 统一功能处理

Java EE 突击 15 - Spring Boot 统一功能处理

Spring Boot 统一功能处理 一 . 统一功能的处理1.1 初级阶段 : 不断重复1.2 中级阶段 : 集成方法1.3 高级阶段 : Spring AOP1.4 超高级阶段 : Spring 拦截器准备工作实现拦截器自定义拦截器将自定义拦截器加入到系统配置 拦截器实现原理扩展 : 统一访问前缀添加 二 . 统一异常的…
阅读更多...
机器学习的第一节基本概念的相关学习

机器学习的第一节基本概念的相关学习

目录 1.1 决策树的概念 1.2 KNN的概念 1.2.1KNN的基本原理 1.2.2 流程&#xff1a; 1.2.3 优缺点 1.3 深度学习 1.4 梯度下降 损失函数 1.5 特征与特征选择 特征选择的目的 1.6 python中dot函数总结 一维数组的点积&#xff1a; 二维数组&#xff08;矩阵&#xff09;的乘法&am…
阅读更多...
结构体对齐原理及在STM32中的设计原则和实现

结构体对齐原理及在STM32中的设计原则和实现

在嵌入式系统开发中&#xff0c;结构体作为一种常见的数据组织方式&#xff0c;在内存中的布局方式对于程序性能和内存占用具有重要影响。本文将深入探讨单片机C语言中的结构体对齐原理、重要性以及不同的对齐方式&#xff0c;并通过示例演示结构体对齐如何影响内存占用、访问性…
阅读更多...
SpringBoot：一个注解就能帮你下载任意对象

SpringBoot：一个注解就能帮你下载任意对象

一 前言 下载功能应该是比较常见的功能了&#xff0c;虽然一个项目里面可能出现的不多&#xff0c;但是基本上每个项目都会有&#xff0c;而且有些下载功能其实还是比较繁杂的&#xff0c;倒不是难&#xff0c;而是麻烦。 如果我说现在只需要一个注解就能帮你下载任意的对象&…
阅读更多...
纪念我的第一个稍微有用一点的python代码的成功——利用最近邻插值法实现图像的放大

纪念我的第一个稍微有用一点的python代码的成功——利用最近邻插值法实现图像的放大

一、技术来源&#xff1a; 插值算法 &#xff5c; 最近邻插值法_哔哩哔哩_bilibili 感谢这位的技术分享&#xff0c;讲解得通俗易懂 二、一些磕磕绊绊&#xff1a; 1.首先&#xff0c;pycharm的使用&#xff0c;通过file创建一个新的项目&#xff08;最好可以记住文件路径&am…
阅读更多...
Java9-17新特性

Java9-17新特性

文章目录 一、简介二、新特性接口私有方法&#xff08;JDK9&#xff09;String存储结构的变化&#xff08;JDK9&#xff09;快速创建只读集合&#xff08;JDK9、10&#xff09;文本块&#xff08;JDK13、14、15&#xff09;更直观的 NullPointerException 提示&#xff08;JDK1…
阅读更多...
exe软件监控看门狗使用说明

exe软件监控看门狗使用说明

作为物联网数据采集解决方案专业提供商,数采物联网 小编daq-iot在这里做以下内容介绍,并诚挚的欢迎大家讨论和交流。 1.软件概述 本软件功能用途&#xff1a;监控电脑或服务器exe程序运行&#xff0c;在exe程序由于异常或其他原因退出后&#xff0c;自动启动exe程序&#xff0…
阅读更多...
goroutine的一点东西

goroutine的一点东西

前面的两篇&#xff0c;从相对比较简单的锁的内容入手(也是干货满满)&#xff0c;开始了go的系列。这篇开始&#xff0c;进入更核心的内容。我们知道&#xff0c;go应该是第一门在语言层面支持协程的编程语言(可能是我孤陋寡闻)&#xff0c;goroutine也完全算的上是go的门面。g…
阅读更多...
文件属性查看和修改学习

文件属性查看和修改学习

这个是链接&#xff0c;相当于快捷方式&#xff0c;指向usr/bin这个目录&#xff0c;链接到这个目录
阅读更多...
NRF52832一主多从ble_app_multilink_central

NRF52832一主多从ble_app_multilink_central

下载官方SDK后打开路径&#xff1a;nRF5SDK153059ac345\nRF5_SDK_15.3.0_59ac345\examples\ble_central\ble_app_multilink_central\pca10040\s132\arm5_no_packs 下的工程文件&#xff0c;确定把log开启 编译后下载完程序(要下载协议栈&#xff0c;这里用6.1.1的)&#xff0c…
阅读更多...
FPGA原理与结构——时钟IP核原理学习

FPGA原理与结构——时钟IP核原理学习

一、前言 在之前的文章中&#xff0c;我们介绍了FPGA的时钟结构 FPGA原理与结构——时钟资源https://blog.csdn.net/apple_53311083/article/details/132307564?spm1001.2014.3001.5502 在本文中我们将学习xilinx系列的FPGA所提供的时钟IP核&#xff0c;来帮助我们进一…
阅读更多...
实现带头双向循环链表

实现带头双向循环链表

&#x1f308;带头双向循环链表 描述&#xff1a;一个节点内包含两个指针&#xff0c;一个指向上一个节点&#xff0c;另一个指向下一个节点。哨兵位指向的下一个节点为头节点&#xff0c;哨兵位的上一个指向尾节点。 结构优势&#xff1a;高效率找尾节点&#xff1b;高效率插入…
阅读更多...
RabbitMQ工作模式-主题模式

RabbitMQ工作模式-主题模式

主题模式 官方文档参考&#xff1a;https://www.rabbitmq.com/tutorials/tutorial-five-python.html 使用topic类型的交换器&#xff0c;队列绑定到交换器、bingingKey时使用通配符&#xff0c;交换器将消息路由转发到具体队列时&#xff0c;会根据消息routingKey模糊匹配&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023