Flutter中GetX的用法(路由管理)

目录

前言

一.安装

二.从一个计时器开始

三.Getx路由管理

1.普通路由导航

1.导航到新的页面

2.关闭SnackBars、Dialogs、BottomSheets或任何你通常会用Navigator.pop(context)关闭的东西

3.进入下一个页面，但没有返回上一个页面的选项（用于SplashScreens，登录页面等）

4.进入下一个界面并取消之前的所有路由

5.要导航到下一条路由，并在返回后立即接收或更新数据

2.别名路由导航

1.导航到下一个页面

2.浏览并删除前一个页面

3.浏览并删除所有以前的页面

4.别名路由传值

5.动态网页链接

3.中间件

4.免context导航

1.SnackBars

2.Dialogs

3.BottomSheets

四.文章中的完整demo

前言

        正如Get官方介绍，GetX 是 Flutter 上的一个轻量且强大的解决方案：高性能的状态管理、智能的依赖注入和便捷的路由管理。GetX 有3个基本原则：

        性能： GetX 专注于性能和最小资源消耗。

        效率： GetX 的语法非常简捷，并保持了极高的性能，能极大缩短你的开发时长。

        结构： GetX 可以将界面、逻辑、依赖和路由之间低耦合,逻辑更清晰，代码更容易维护。

        这篇文章主要是介绍下GetX的用法。

一.安装

        目前get最新的版本是4.6.6。安装方式如下：

dependencies:
  get: ^4.6.6

二.从一个计时器开始

        但我们创建一个flutter工程的时候，系统会生成一个计时器的示例代码，代码大致如下(我删除了部分注释代码)：

import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),useMaterial3: true,),home: const MyHomePage(title: 'Flutter Demo Home Page'),);}
}class MyHomePage extends StatefulWidget {const MyHomePage({super.key, required this.title});final String title;@overrideState<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {int _counter = 0;void _incrementCounter() {setState(() {_counter++;});}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: Text(widget.title),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[const Text('You have pushed the button this many times:',),Text('$_counter',style: Theme.of(context).textTheme.headlineMedium,),],),),floatingActionButton: FloatingActionButton(onPressed: _incrementCounter,tooltip: 'Increment',child: const Icon(Icons.add),), // This trailing comma makes auto-formatting nicer for build methods.);}
}

        主要功能是点击+按钮，每次计时器的个数+1.点击按钮之后，调用setState方法刷新_counter变量。

        下面我们看一下如何使用getx来实现上述的功能：

        第一步：把系统的MaterialApp改成GetMaterialApp:

void main() => runApp(GetMaterialApp(home: Home()));

        第二步：创建业务类，我们把_counter变量放在Controller类中：

class Controller extends GetxController{
  var counter = 0.obs;
  increment() => counter++;
}

        第三步：使用StatelessWidget代替StatefulWidget，节省下内存。修改之后的完整代码如下：

import 'package:flutter/material.dart';
import 'package:get/get.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return GetMaterialApp(title: 'Flutter Demo',theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),useMaterial3: true,),home: const MyHomePage(title: 'Flutter Demo Home Page'),);}
}
class Controller extends GetxController{var counter = 0.obs;incrementCounter()=>counter++;
}class MyHomePage extends StatelessWidget {const MyHomePage({super.key, required this.title});final String title;@overrideWidget build(BuildContext context) {final Controller controller = Get.put(Controller());return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: Text(title),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[const Text('You have pushed the button this many times:',),Obx(() => Text('${controller.counter}',style: Theme.of(context).textTheme.headlineMedium,)),],),),floatingActionButton: FloatingActionButton(onPressed: (){controller.incrementCounter();},tooltip: 'Increment',child: const Icon(Icons.add),), // This trailing comma makes auto-formatting nicer for build methods.);}
}

三.Getx路由管理

1.普通路由导航

1.导航到新的页面

        假如我们有一个新页面NextScreenPage,代码如下：

import 'package:flutter/material.dart';class NextScreenPage extends StatelessWidget {const NextScreenPage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: const Text("新页面"),),body: Container(), // This trailing comma makes auto-formatting nicer for build methods.);}
}

        从当前页面跳转到NextScreenPage页面，代码如下：

Get.to(()=>NextScreen());

2.关闭SnackBars、Dialogs、BottomSheets或任何你通常会用Navigator.pop(context)关闭的东西

        还是以上面的代码为例，我们添加一个返回按钮，点击返回按钮的时候，回到当前页面。主需要在按钮的点击事件中添加如下代码即可：

Get.back();

        NextScreenPage页面完整代码如下：

import 'package:flutter/material.dart';
import 'package:get/get.dart';class NextScreenPage extends StatelessWidget {const NextScreenPage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: const Text("新页面"),),body: Center(child: ElevatedButton(onPressed: (){Get.back();}, child: const Text("返回上一个页面")),), // This trailing comma makes auto-formatting nicer for build methods.);}
}
3.进入下一个页面，但没有返回上一个页面的选项（用于SplashScreens，登录页面等）

        主要的代码如下：

Get.off(()=>const NormalRoutePage(title: "主页面"));

        这里我们模拟一个登陆页面的场景，假设当前页面(NormalRoutePage)有一个按钮，点击按钮之后，我们跳转到登陆页面(LoginPage)，登陆成功之后，进入个人中心页面(ProfilePage)，这个时候，个人中心页面有个返回按钮，我们点击返回按钮的时候回到主页面，主要的代码如下：

        登陆页面代码如下：

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getx_demos/route_manager/login/profile_page.dart';class LoginPage extends StatelessWidget {const LoginPage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: const Text("登陆页面"),),body: Center(child: ElevatedButton(onPressed: (){Get.to(()=>const ProfilePage());}, child: const Text("点击进入个人中心页面")),), // This trailing comma makes auto-formatting nicer for build methods.);}
}

        个人中心页面代码如下：

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getx_demos/route_manager/normal_route_page.dart';class ProfilePage extends StatelessWidget {const ProfilePage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: const Text("个人中心页面"),),body: Center(child: ElevatedButton(onPressed: (){Get.off(const NormalRoutePage(title: "主页面"));}, child: const Text("返回主页面")),), // This trailing comma makes auto-formatting nicer for build methods.);}
}
4.进入下一个界面并取消之前的所有路由

Get.offAll(NextScreen());

5.要导航到下一条路由，并在返回后立即接收或更新数据

        假设当前页面是SecondPage,当我们跳转按钮之后跳转到ThirdPage,按钮的点击事件中我们使用下面的代码获取ThirdPage回传的值:

var data = await Get.to(const ThirdPage());        

        SecondPage页面代码如下：

import 'package:getx_demos/route_manager/login/third_page.dart';class SecondPage extends StatelessWidget {const SecondPage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: const Text("回调传值"),),body: Column(children: [Center(child: ElevatedButton(onPressed: () async {var data = await Get.to(const ThirdPage());debugPrint("下个页面回调值:$data");Get.to(()=>const ThirdPage());}, child: const Text("跳转Third页面")),),],), // This trailing comma makes auto-formatting nicer for build methods.);}
}

        ThirdPage页面代码如下：

import 'package:flutter/material.dart';
import 'package:get/get.dart';class ThirdPage extends StatelessWidget {const ThirdPage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: const Text("Third"),),body: Column(children: [const Text("第二个页面传过来的值:"),Center(child: ElevatedButton(onPressed: (){Get.back(result: "555555");}, child: const Text("返回主页面")),),],), // This trailing comma makes auto-formatting nicer for build methods.);}
}

2.别名路由导航

        Get支持别名路由，使用别名路由的时候，我们需要在GetMaterialApp定义一下，假如我们有一个NextScreenPage页面，使用别名路由的时候，代码定义如下：

class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return GetMaterialApp(title: 'Flutter Demo',initialRoute: "/",getPages: [GetPage(name: "/next_screen", page: ()=>const NextScreenPage()),],theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),useMaterial3: true,),home: const MyHomePage(title: 'Flutter Demo Home Page'),);}
}
1.导航到下一个页面

Get.toNamed("/next_screen");

2.浏览并删除前一个页面

Get.offNamed("/next_screen");

3.浏览并删除所有以前的页面

Get.offAllNamed("/next_screen");

4.别名路由传值

Get.toNamed("/rename_main",arguments: "Getx route manager");

5.动态网页链接

        Get提供高级动态URL，就像在Web上一样。

Get.offAllNamed("/NextScreen?device=phone&id=354&name=Enzo");

        第二个页面获取数据：

debugPrint("id = ${Get.parameters['id']} ");
debugPrint("device = ${Get.parameters['device']} ");
debugPrint("name = ${Get.parameters['name']} ");

3.中间件

        如果你想通过监听Get事件来触发动作，你可以使用routingCallback来实现。

GetMaterialApp( routingCallback: (routing) { if(routing.current == '/second'){ openAds(); } } )

4.免context导航

        如果你想通过监听Get事件来触发动作，你可以使用routingCallback来实现。

1.SnackBars

        GetX创建一个SnackBars代码如下：

Get.snackbar('SnackBar', '我是SnackBar');

2.Dialogs

        打开默认Dialogs：

Get.defaultDialog(
onConfirm: () => debugPrint("Ok"),
middleText: "我是Dialog"
);

3.BottomSheets

        Get.bottomSheet类似于showModalBottomSheet，但不需要context：

Get.bottomSheet(
Wrap(
children: <Widget>[
ListTile(
leading: const Icon(Icons.music_note),
title: const Text('Music'),
onTap: () {}
),
ListTile(
leading: const Icon(Icons.videocam),
title: const Text('Video'),
onTap: () {},
),
],
)
);

5.嵌套导航

        Get让Flutter的嵌套导航更加简单。 你不需要context，而是通过Id找到你的导航栈。

Navigator(
  key: Get.nestedKey(1), // create a key by index
  initialRoute: '/',
  onGenerateRoute: (settings) {
    if (settings.name == '/') {
      return GetPageRoute(
        page: () => Scaffold(
          appBar: AppBar(
            title: Text("Main"),
          ),
          body: Center(
            child: TextButton(
              color: Colors.blue,
              onPressed: () {
                Get.toNamed('/second', id:1); // navigate by your nested route by index
              },
              child: Text("Go to second"),
            ),
          ),
        ),
      );
    } else if (settings.name == '/second') {
      return GetPageRoute(
        page: () => Center(
          child: Scaffold(
            appBar: AppBar(
              title: Text("Main"),
            ),
            body: Center(
              child:  Text("second")
            ),
          ),
        ),
      );
    }
  }
),

四.文章中的完整demo

        本文实例中的demo地址。

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

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

相关文章

python读取文件中相对路径和绝对路径

python读取文件中相对路径和绝对路径

如果python执行文件和要读取的文件在同一目录&#xff0c;也就是同一个文件夹里&#xff0c;代码中就不必添加文件的路径。如果说要读取的文件在另外一个文件夹里&#xff0c;而这个文件夹又和pythou文件在同一个文件夹里&#xff0c;就要在代码中添加目标文件的路径&#xff0…
阅读更多...
如何实现扩展Spring MVC框架的消息转换器？

如何实现扩展Spring MVC框架的消息转换器？

扩展 Spring MVC 框架的消息转换器通常涉及编写自定义的 HttpMessageConverter 实现。HttpMessageConverter 是 Spring MVC 中用于处理 HTTP 请求和响应的消息转换器接口&#xff0c;它负责将 HTTP 请求中的数据转换为 Java 对象&#xff0c;并将 Java 对象转换为 HTTP 响应的数…
阅读更多...
【STM32定时器 TIM小总结】

【STM32定时器 TIM小总结】

STM32 TIM详解 TIM介绍定时器类型基本定时器通用定时器高级定时器常用名词时序图预分频时序计数器时序图 定时器中断配置图定时器定时 代码调试 TIM介绍 定时器&#xff08;Timer&#xff09;是微控制器中的一个重要模块&#xff0c;用于生成定时和延时信号&#xff0c;以及处…
阅读更多...
Vue3+TypeScript 学习回顾，温故而知新

Vue3+TypeScript 学习回顾，温故而知新

文章简介&#xff1a; &#xff08;1&#xff09;简介&#xff1a; 在 Vue3 中编码规范如下&#xff1a; 编码语言: JavaScript代码风格: 组合式API选项式、API简写形式: setup语法糖 &#xff08;2&#xff09;复习内容&#xff1a; 1.核心: ref、reactive、computed、w…
阅读更多...
路由器端口转发远程桌面控制：一电脑连接不同局域网的另一电脑

路由器端口转发远程桌面控制：一电脑连接不同局域网的另一电脑

一、引言 路由器端口转发&#xff1a;指在路由器上设置一定的规则&#xff0c;将外部的数据包转发到内部指定的设备或应用程序。这通常需要对路由器进行一些配置&#xff0c;以允许外部网络访问内部网络中的特定服务和设备。端口转发功能可以实现多种应用场景&#xff0c;例如远…
阅读更多...
写个树型穿梭框

写个树型穿梭框

以下是一个简单的树型穿梭框的示例代码&#xff08;使用HTML、CSS和JavaScript&#xff09;&#xff1a; HTML部分&#xff1a; <div id"tree"><ul><li><span>节点1</span><ul><li><span>节点1.1</span><…
阅读更多...
游戏引擎中的动画基础

游戏引擎中的动画基础

一、动画技术简介 视觉残留理论 - 影像在我们的视网膜上残留1/24s。 游戏中动画面临的挑战&#xff1a; 交互&#xff1a;游戏中的玩家动画需要和场景中的物体进行交互。实时&#xff1a;最慢需要在1/30秒内算完所有的场景渲染和动画数据。&#xff08;可以用动画压缩解决&am…
阅读更多...
QT 状态机的使用

QT 状态机的使用

QT 状态机的使用场景&#xff1a; QT 状态机适用于需要管理复杂状态和状态转换的场景&#xff0c;例如游戏开发、UI界面控制、自动化控制系统等。它可以帮助组织和管理程序中的各种状态&#xff0c;并定义状态之间的转换规则&#xff0c;使程序逻辑清晰、易于维护。 QT 状态机…
阅读更多...
iOS 开发 block 等待 block 或 block 等待

iOS 开发 block 等待 block 或 block 等待

block 等待 在 iOS 开发中&#xff0c;如果你想要一个 block&#xff08;闭包&#xff09;等待执行完成&#xff0c;通常意味着你想要同步地执行这个 block&#xff0c;而不是异步地。然而&#xff0c;block 本身并不直接支持同步等待&#xff0c;因为它们是作为函数对象来设计…
阅读更多...
用SeaTunnel从SQL Server向Elasticsearch同步数据

用SeaTunnel从SQL Server向Elasticsearch同步数据

文章目录 引言I 步骤1.1 环境准备1.2 配置JDBC插件1.3 编写SeaTunnel任务配置II Enable Sql Server CDC引言 SeaTunnel 的官网 https://seatunnel.apache.org/ Support SQL Server Version: server:2008 (Or later version for information only)Supported DataSource Info： …
阅读更多...
抖去推无人直播+矩阵托管+AI文案撰写一体化工具如何开发搭建

抖去推无人直播+矩阵托管+AI文案撰写一体化工具如何开发搭建

一、 开发和搭建抖去推无人直播矩阵托管AI文案撰写一体化工具需要以下步骤&#xff1a; 确定功能需求&#xff1a;确定抖去推无人直播、矩阵托管和AI文案撰写的具体功能需求&#xff0c;如直播推流、直播管理、托管服务、AI文案生成等。 技术选型&#xff1a;选择适合开发该工…
阅读更多...
LeetCode 395. 至少有K个重复字符的最长子串

LeetCode 395. 至少有K个重复字符的最长子串

解题思路 一道滑动窗口题型&#xff0c;不过滑动窗口的长度是不同种类元素的个数。 这里需要定义两个变量 cnt,overk。overk表示的是满足大于k的字符数, cnt表示的是该窗口中不同元素的个数且cnt>1&&cnt<26。 相关代码 class Solution {public int longestSub…
阅读更多...
动手学习深度学习之环境配置

动手学习深度学习之环境配置

创建conda虚拟环境 下载anaconda&#xff0c;安装到计算机&#xff0c;修改镜像源到国内 show_channel_urls: true channels:- https://mirrors.tuna.tsinghua.edu.cn/anaconda/cloud/pytorch/- http://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/main/- http://mirrors.tu…
阅读更多...
52. 携带研究材料（第七期模拟笔试）

52. 携带研究材料（第七期模拟笔试）

52. 携带研究材料&#xff08;第七期模拟笔试&#xff09; 时间限制&#xff1a;1.000S 空间限制&#xff1a;128MB 题目描述 小明是一位科学家&#xff0c;他需要参加一场重要的国际科学大会&#xff0c;以展示自己的最新研究成果。他需要带一些研究材料&#xff0c;但是他的…
阅读更多...
CSS3技巧38：3D 翻转数字效果

CSS3技巧38：3D 翻转数字效果

博主其它CSS3 3D的文章&#xff1a; CSS3干货4&#xff1a;CSS中3D运用_css 3d-CSDN博客 CSS3干货5&#xff1a;CSS中3D运用-2_中3d-2-CSDN博客 CSS3干货6&#xff1a;CSS中3D运用-3_css3d 使用-CSDN博客 最近工作上烦心的事情太多&#xff0c;只有周末才能让我冷静一下 cod…
阅读更多...
LeetCode 每日一题 2024/3/11-2024/3/17

LeetCode 每日一题 2024/3/11-2024/3/17

记录了初步解题思路 以及本地实现代码&#xff1b;并不一定为最优 也希望大家能一起探讨 一起进步 目录 3/11 2129. 将标题首字母大写3/12 1261. 在受污染的二叉树中查找元素3/13 2864. 最大二进制奇数3/14 2789. 合并后数组中的最大元素3/15 2312. 卖木头块3/16 2684. 矩阵中移…
阅读更多...
HTTPS（超文本传输安全协议）工作过程

HTTPS（超文本传输安全协议）工作过程

一、简述HTTPS HTTPS超文本传输协议&#xff08;全称&#xff1a;Hypertext Transfer Protocol Secure &#xff09;&#xff0c;是以安全为目标的 HTTP 通道&#xff0c;在HTTP的基础上通过传输加密和身份认证保证了传输过程的安全性 。HTTPS 在HTTP 的基础下加入SSL&#x…
阅读更多...
对建造者模式的理解

对建造者模式的理解

目录 一、为什么需要建造者模式&#xff1f;1、场景12、场景23、解决上述场景的办法&#xff1a;建造者模式 二、练习1、题目描述 【[来源](https://kamacoder.com/problempage.php?pid1084)】2、输入描述3、输出描述4、输入示例5、输出示例6、参考 三、思考1、一般常用的是lo…
阅读更多...
vue 实现下载pdf格式的文件

vue 实现下载pdf格式的文件

第一步 安装下载插件 npm install html2canvas jspdf --save第二步 给vue原型上面挂载一个下载页面pdf的方法&#xff1b;在项目工具方法存放文件夹utils中创建htmlToPdf.js文件&#xff0c;代码如下 // 导出页面为PDF格式 import html2Canvas from html2canvas import JsP…
阅读更多...
Linux第78步_使用原子整型操作来实现“互斥访问”共享资源

Linux第78步_使用原子整型操作来实现“互斥访问”共享资源

使用原子操作来实现“互斥访问”LED灯设备&#xff0c;目的是每次只允许一个应用程序使用LED灯。 1、创建MyAtomicLED目录 输入“cd /home/zgq/linux/Linux_Drivers/回车” 切换到“/home/zgq/linux/Linux_Drivers/”目录 输入“mkdir MyAtomicLED回车”&#xff0c;创建MyA…
阅读更多...
最新文章

Copyright @ 2022~2023