Flutter开发入门——路由

什么是路由?

移动端应用开发中,路由技术是一个非常重要的组成部分。路由技术负责管理应用中各个页面之间的跳转、导航以及参数传递等关键功能。在移动端应用中,一个高效、易于维护的路由系统对于提高开发效率和用户体验具有重要意义。

Flutter 中的路由管理和原生开发类似,无论是 Android 还是 iOS,导航管理都会维护一个路由栈,路由入栈(push)操作对应打开一个新页面,路由出栈(pop)操作对应页面关闭操作,而路由管理主要是指如何来管理路由栈。

在Android里进行页面跳转:

// 创建一个Intent对象,指定要跳转的Activity
Intent intent = new Intent(MainActivity.this, SecondActivity.class);
// 可选:传递数据到目标Activity
intent.putExtra("key", "value");
// 可选:设置标志位或其他属性
intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
// 启动目标Activity
startActivity(intent);

在Flutter里如何跳转呢?

在 Flutter 中,路由技术的核心概念包括两个要素:Route 和 Navigator。

        //导航到新路由   Navigator.push( context,MaterialPageRoute(builder: (context) {return NewRoute();//从此页面跳转到NewRoute页面}),);

MaterialPageRoute介绍

MaterialPageRoute继承自PageRoute类,PageRoute类是一个抽象类,表示占有整个屏幕空间的一个模态路由页面,它还定义了路由构建及切换时过渡动画的相关接口及属性。MaterialPageRoute 是 Material组件库提供的组件,它可以针对不同平台,实现与平台页面切换动画风格一致的路由切换动画

它的构造函数 

  • builder 是一个WidgetBuilder类型的回调函数,它的作用是构建路由页面的具体内容,返回值是一个widget。我们通常要实现此回调,返回新路由的实例。
  • settings 包含路由的配置信息,如路由名称、是否初始路由(首页)。
  • maintainState:默认情况下,当入栈一个新路由时,原来的路由仍然会被保存在内存中,如果想在路由没用的时候释放其所占用的所有资源,可以设置maintainState为 false
  • fullscreenDialog表示新的路由页面是否是一个全屏的模态对话框,在 iOS 中,如果fullscreenDialogtrue,新页面将会从屏幕底部滑入(而不是水平方向)。

Navigator介绍

Navigator是一个路由管理的组件,它提供了打开和退出路由页方法。Navigator通过一个栈来管理活动路由集合。通常当前屏幕显示的页面就是栈顶的路由。Navigator提供了一系列方法来管理路由栈,最常用的两个方法:

1.Future push(BuildContext context, Route route)

将给定的路由入栈(即打开新的页面),返回值是一个Future对象,用以接收新路由出栈(即关闭)时的返回数据。

 2.bool pop(BuildContext context, [ result ])

将栈顶路由出栈,result 为页面关闭时返回给上一个页面的数据

命名路由

和Android里的一些路由框架其实很像,命名,传参等等。给个名字,就可以直接用名字去进行路由的跳转管理了。

1.创建路由表

///它是一个Map,key为路由的名字,是个字符串;value是个builder回调函数,用于生成相应的路由widget
Map<String, WidgetBuilder> routes;

2.注册路由

MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),//注册路由表routes:{"new_page":(context) => NewRoute(),"/":(context) => MyHomePage(title: 'Flutter Demo Home Page'), //注册首页路由... // 省略其他路由注册信息} ,initialRoute:"/", //名为"/"的路由作为应用的home(首页));

3.打开路由

Future pushNamed(BuildContext context, String routeName,{Object arguments})

4.参数传递

注册路由

 routes:{"new_page":(context) => EchoRoute(),} ,

在modalRoute界面传递参数

Navigator.of(context).pushNamed("new_page", arguments: "hi");

在EchoRoute获取参数

class EchoRoute extends StatelessWidget {@overrideWidget build(BuildContext context) {//获取路由参数  var args=ModalRoute.of(context).settings.arguments;//...省略无关代码}
}

Get库

  • GetX 是 Flutter 上的一个轻量且强大的解决方案:高性能的状态管理、智能的依赖注入和便捷的路由管理。

详细使用查看官方文档:https://github.com/jonataslaw/getx/blob/master/README.zh-cn.md

  • 高性能的状态管理、智能的依赖注入和便捷的路由管理。

  • 解耦,Api简洁,库很小

状态管理

Get有两个不同的状态管理器:简单的状态管理器(GetBuilder)和响应式状态管理器(GetX)。

项目常用方式:

1.对想监听的变量加 .obs后缀 让它变得可观察

var name = 'Jonatas Borges'.obs;

2.在UI中,当你想显示该值并在值变化时更新页面,只需这样做。

Obx(() => Text("${controller.name}"));

其中controller是我们自己定义的GetxController

例如:

1.在Creo项目中,定义buttonActive为obs

class KycWorkViewModel extends GetxController {

... var buttonActive = false.obs; ...

}

2.build里使用GetBuilder状态管理器

或者注入一个controller,例如

3.obx监听此控件,vm,buttonActive是个被监听的obs值,当他变化时,这个控价的颜色就会有变化

这样,就可以实时刷新UI.

路由管理

1.优点:

  • 避免上下文(context)使用路由

  • 使用简单

在MaterialApp前加上 "Get",把它变成GetMaterialApp,即可使用Getx的路由管理

GetMaterialApp( // Before: MaterialApp( home: MyHome(), )

2.常用方法

Get.to(nextPage);

导航到新页面

Get.toNamed('/details');

用别名导航到新页面。

Get.back();

返回上一级(疑问:弹窗之类的呢)

Get.off(NextScreen());

进入这个界面后,不能返回上一级界面(splash,login)

Get.offAll(NextScreen());

Get.offAllNamed(LoginRoutes.loginPath);

跳转目标页面,并且把前面的路由全部出栈

(疑问:和until的区别)

GetPage( name: loginPath, page: () => const UserLoginView(), binding: UserLoginBinding(),

使用 GetPage,您可以通过指定路由名称、页面构建器、中间件和其他参数来定义页面路由

通过将控制器绑定类分配给binding属性,Get库将自动创建并绑定控制器到页面上。这对于在页面进入时初始化控制器,并在页面退出时自动释放资源非常有用。

Get.currentRoute

判断当前路由

Get.arguments['xxxx'];

获取参数

Get.lazyPut()

延迟加载,再被第一次使用时才会初始化

Get.mediaQuery

用于获取当前屏幕的媒体查询信息。

媒体查询信息提供了关于屏幕尺寸、屏幕方向、设备像素密度等的有用信息。通过使用Get.mediaQuery,您可以轻松地访问这些信息,并根据需要进行布局和设计调整。

Get.until((route) => Get.currentRoute == RootRoutes.rootPath);

导航到指定路由并关闭中间的所有路由,以实现所需的导航效果和堆栈管理

依赖管理

Get有一个简单而强大的依赖管理器,它允许你只用1行代码就能检索到与你的Bloc或Controller相同的类,无需Provider context,无需inheritedWidget。

Controller controller = Get.put(Controller());//注入controller

Controller controller = Get.find(); //使用Get获取控制器,并将其提供给你。

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

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

相关文章

MySQL 多表查询与事务的操作

一,多表联查 有些数据我们已经拆分成多个表,他们之间通过外键进行连接.当我们要查询两个表的数据,各取其中的一列或者多列. 这时候就需要使用多表联查. 数据准备: # 创建部门表 create table dept(id int primary key auto_increment,name varchar(20) ) insert into dept (n…

【机器学习系列】M3DM工业缺陷检测部署与训练

一.基础资料 1.Git 地址 地址 2.issues issues 3.参考 参考 csdn 二.服务器信息 1.GPU 服务器 GPU 服务器自带 CUDA 安装(前提是需要勾选上)CUDA 需要选择大于 11.3 的版本登录服务器后会自动安装 GPU 驱动 2.CUDA 安装 GPU 服务器自带 CUDA CUDA 版本查看 3.登录信…

软件杯 深度学习 python opencv 实现人脸年龄性别识别

文章目录 0 前言1 项目课题介绍2 关键技术2.1 卷积神经网络2.2 卷积层2.3 池化层2.4 激活函数&#xff1a;2.5 全连接层 3 使用tensorflow中keras模块实现卷积神经网络4 Keras介绍4.1 Keras深度学习模型4.2 Keras中重要的预定义对象4.3 Keras的网络层构造 5 数据集处理训练5.1 …

软件企业在咨询第三方软件测试机构报价时,应提前准备什么资料?

近年来&#xff0c;随着软件行业的迅速发展&#xff0c;软件企业对于软件质量的重视程度日益增加。为了确保软件产品的质量以及用户的满意度&#xff0c;越来越多的企业倾向于委托第三方软件测试机构进行测试工作。在咨询第三方软件测试机构报价之前&#xff0c;软件企业需要提…

软考81-上午题-【面向对象技术3-设计模式】-行为型设计模式01

一、行为型设计模式一览 二、责任链模式 2-1、意图 使多个对象都有机会处理请求&#xff0c;从而避免请求的发送者和接收者之间的耦合关系。将这些对象连成一条链&#xff0c;并沿着这条链传递该请求&#xff0c;直到有一个对象处理它为止。 1-2、结构 1-3、代码实现 1-4、适…

C/C++炸弹人游戏

参考书籍《啊哈&#xff0c;算法》&#xff0c;很有意思的一本算法书&#xff0c;小白也可以看懂&#xff0c;详细见书&#xff0c;这里只提供代码和运行结果。 这里用到的是枚举思想&#xff0c;还有更好地搜索做法。 如果大家有看不懂的地方或提出建议&#xff0c;欢迎评论区…

【Linux】Linux基本开发工具(yum) (vi/vim)的使用

本文章内容&#xff1a; 学习yum工具&#xff0c;进行软件安装掌握vim编辑器使用 Linux 软件包管理器 yum 什么是软件包 在Linux下安装软件, 一个通常的办法是下载到程序的源代码, 并进行编译, 得到可执行程序.但是这样太麻烦了, 于是有些人把一些常用的软件提前编译好, 做成…

基于python的4s店客户管理系统

技术&#xff1a;pythonmysqlvue 一、背景 进入21世纪网络和计算机得到了飞速发展&#xff0c;并和生活进行了紧密的结合。目前&#xff0c;网络的运行速度以达到了千兆&#xff0c;覆盖范围更是深入到生活中的角角落落。这就促使管理系统的发展。网上办公可以实现远程处理事务…

2024.03.19日志

今日复盘 1 学习导师给的项目 1.1 了解项目的业务背景&#xff1a;经销商-银行贷款 1.2 了解了大致的业务流程 经销商添加客户贷款信息->提交贷款信息->银行审核->审核通过经销商提交客户贷款信息资料->银行审核->制作名单导入网贷系统 1.3 业务功能 经销…

Java 设计模式系列:行为型-状态模式

简介 状态模式&#xff08;State Pattern&#xff09;是一种行为型设计模式&#xff0c;允许一个对象在其内部状态改变时改变其行为。状态模式中类的行为是由状态决定的&#xff0c;在不同的状态下有不同的行为。 状态模式主要解决的是当控制一个对象状态的条件表达式过于复杂…

linux下关闭swap文件系统

临时关闭&#xff08;马上生效&#xff09; 永久关闭&#xff08;重启计算机才能生效&#xff09; vim /etc/fstab

深入浅出Hive性能优化策略

我们将从基础的HiveQL优化讲起&#xff0c;涵盖数据存储格式选择、数据模型设计、查询执行计划优化等多个方面。会的直接滑到最后看代码和语法。 目录 引言 Hive架构概览 示例1&#xff1a;创建表并加载数据 示例2&#xff1a;优化查询 Hive查询优化 1. 选择适当的文件格…

基于springboot+vue的交通管理在线服务系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…

苏州工业园区党工委书记沈觅一行莅临聚合数据走访调研

3月7日&#xff0c;市委常委、苏州工业园区党工委书记沈觅莅临聚合数据&#xff0c;就数字经济企业情况展开专题调研。园区党工委委员、管委会副主任邹小伟&#xff0c;科创区、经发委、科创委、金融局主要负责人参加调研&#xff0c;聚合数据董事长左磊等人接待来访。 调研组…

Transformer学习笔记(二)

一、文本嵌入层Embedding 1、作用&#xff1a; 无论是源文本嵌入还是目标文本嵌入&#xff0c;都是为了将文本中词汇的数字表示转变为向量表示&#xff0c;希望在这样的高维空间捕捉词汇间的关系。 二、位置编码器Positional Encoding 1、作用&#xff1a; 因为在Transformer的…

将 OpenCV 与 Eclipse 结合使用(插件 CDT)

返回&#xff1a;OpenCV系列文章目录&#xff08;持续更新中......&#xff09; 上一篇&#xff1a;将OpenCV与gcc和CMake结合使用 下一篇&#xff1a;OpenCV4.9.0在windows系统下的安装 警告&#xff1a; 本教程可以包含过时的信息。 先决条件 两种方式&#xff0c;一种…

数据治理之数据标准管理及实践方法

什么是数据标准&#xff1f;提到数据标准大家肯定会想到我们公司也有相关的产品设计的标准、质量检验的标准、安全环保的标准&#xff0c;对于金融企业的话&#xff0c;还有市场监管相关的一些标准。些标准其实都不是我们要讲的数据标准&#xff0c;以上的标准最多只能被称作规…

OpenCV系列文章目录(持续更新中......)

引言&#xff1a; OpenCV是一个开源的计算机视觉库&#xff0c;由英特尔公司开发并开源的一组跨平台的C函数和少量的C函数组成&#xff0c;用于实时图像处理、计算机视觉和机器学习等应用领域。OpenCV可以在包括Windows、Linux、macOS等各种操作系统平台上使用&#xff0c;具…

OPENCV(0-1之0.2)

OPENCV-0.2 学习安排图像基础像素访问和修改像素值 色彩空间转换RGB到灰度的转换RGB到HSV的转换 图像操作裁剪缩放旋转和翻转 图像滤波平滑和模糊图像边缘检测 图像变换仿射变换透视变换 总结 官方文档 学习安排 图像基础 像素&#xff1a;了解像素的概念&#xff0c;包括像素…

大厂面试--是否熟悉Node, 主要做过哪些业务,平时用过什么包?

什么是Node ​ Node是一个让Javascript运行在服务端的开发平台&#xff0c;它让Javascript成为了与PHP、Python、Perl、Ruby等服务器语言平起平坐的脚本语言。目前Nodejs已发展成一个成熟的开发平台&#xff0c;吸引了许多开发者。有许多大型高流量网站都采用Nodejs进行开发&a…