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.hqwc.cn/news/90235.html

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

相关文章

Node爬虫项目精简版 wallhaven网站实操 2023.8.29

Node爬虫项目精简版 wallhaven网站实操 2023.8.29

练习地址&#xff1a; https://wallhaven.cc/toplist const express require(express); const axios require(axios); const cheerio require(cheerio); const schedule require(node-schedule); const fs require(fs);async function downloadImage(url) {const response…
阅读更多...
漏洞发现-web应用发现探针类型利用

漏洞发现-web应用发现探针类型利用

关于在真实环境下面&#xff0c;这个漏洞该如何发现 这里老师把它分成了三块第一类是 #已知cms 如常见的dedecms&#xff0c;discuz&#xff0c;wordpress等源码结构&#xff0c;这些都是网上比较知名的php源码的cms的名称&#xff0c;这是我们在国内常见的几个程序&#xf…
阅读更多...
WPF基础入门-Class5-WPF命令

WPF基础入门-Class5-WPF命令

WPF基础入门 Class5-WPF命令 1、xaml编写一个button&#xff0c;Command绑定一个命令 <Grid><ButtonWidth"100"Height"40" Command"{Binding ShowCommand}"></Button> </Grid>2、编写一个model.cs namespace WPF_Le…
阅读更多...
华为OD机试 - 数字序列比大小 - 贪心算法（Java 2023 B卷 100分）

华为OD机试 - 数字序列比大小 - 贪心算法（Java 2023 B卷 100分）

目录 一、题目描述二、输入描述三、输出描述四、解题思路五、Java算法源码六、效果展示1、输入2、输出3、说明 华为OD机试 2023B卷题库疯狂收录中&#xff0c;刷题点这里 一、题目描述 A&#xff0c;B两个人万一个数字比大小的游戏&#xff0c;在游戏前&#xff0c;两个人会拿…
阅读更多...
【Unity】常见的角色移动旋转

【Unity】常见的角色移动旋转

在Unity 3D游戏引擎中&#xff0c;可以使用不同的方式对物体进行旋转。以下是几种常见的旋转方式&#xff1a; 欧拉角&#xff08;Euler Angles&#xff09;&#xff1a;欧拉角是一种常用的旋转表示方法&#xff0c;通过绕物体的 X、Y 和 Z 轴的旋转角度来描述物体的旋转。在Un…
阅读更多...
Java版工程行业管理系统源码-专业的工程管理软件-提供一站式服务 em

Java版工程行业管理系统源码-专业的工程管理软件-提供一站式服务 em

​ 鸿鹄工程项目管理系统 Spring CloudSpring BootMybatisVueElementUI前后端分离构建工程项目管理系统 1. 项目背景 一、随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大。为了提高工程管理效率、减轻劳动强度、提高信息处理速度和准确性&#xff0c;公司对内部工…
阅读更多...
【LeetCode-中等题】230. 二叉搜索树中第K小的元素

【LeetCode-中等题】230. 二叉搜索树中第K小的元素

文章目录 题目方法一&#xff1a;层序遍历 集合排序方法二&#xff1a;中序遍历&#xff08;栈 或者 递归 &#xff09;方法三&#xff08;方法二改进&#xff09;&#xff1a;中序遍历&#xff08;栈 &#xff09; 题目 该题最大的特点就是这个树是二叉树&#xff1a; 所以…
阅读更多...
C语言：递归思想及实例详解

C语言：递归思想及实例详解

简介&#xff1a;在计算机科学中是指一种通过重复将问题分解为同类的子问题而解决问题的方法。通过函数的自调用化繁为简。 递归可以说是编程中最神奇的一种算法。因为我们有时候可能不能完全明晰代码的运行过程&#xff0c;但是我们却知道代码可以跑出正确的结果。而当我们使…
阅读更多...
高等职业学校物联网实训室建设方案

高等职业学校物联网实训室建设方案

一、概述 1.1专业背景 物联网&#xff08;Internet of Things&#xff09;被称为继计算机、互联网之后世界信息产业第三次浪潮&#xff0c;它并非一个全新的技术领域&#xff0c;而是现代信息技术发展到一定阶段后出现的一种聚合性应用与技术提升&#xff0c;是随着传感网、通…
阅读更多...
WordPress导航主题/酷啦鱼导航主题模板

WordPress导航主题/酷啦鱼导航主题模板

酷啦鱼导航主题模板&#xff0c;是一款基于WordPress的导航主题&#xff0c;酷啦鱼导航主题是个人基于wordpresscodestar work框架设计的简洁导航主题。 下载地址&#xff1a;https://bbs.csdn.net/topics/616084697
阅读更多...
element ui-Pagination

element ui-Pagination

页面分为两个表格&#xff0c;当两边的表格数据量大时&#xff0c;分页样式就会受到影响&#xff0c;可以将跳转按钮的个数减少 页面分页代码如下 页面效果
阅读更多...
css自学框架之消息弹框

css自学框架之消息弹框

首先我们还是看看消息弹框效果&#xff1a; 主要实现代码分为三部分 一、CSS部分&#xff0c;这部分主要是定义样式&#xff0c;也就是我们看到的外表&#xff0c;主要代码&#xff1a; /* - 弹窗 */notice{top: 0;left: 0;right: 0;z-index: 10;padding: 1em;position: fix…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023