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 {

  @override
  Widget 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获取控制器,并将其提供给你。

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

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

相关文章

基于Java中的SSM框架实现医院院内物资管理系统项目【项目源码+论文说明】

基于Java中的SSM框架实现医院院内物资管理系统演示 摘要 在当今的中国改革开放经济体制下&#xff0c;中国经济正以快速稳健的步伐前行。并且随着经济的发展&#xff0c;各领域的信息化管理也得到了充足的发展&#xff0c;而且愈发普及。现如今&#xff0c;几乎所有的行业中都…

机器学习_自我总结

文章目录 简介优化算法的方法诊断偏差和方差 简介 我只是一个小白,很多东西写不好,也不是很懂只是记一下笔记对自己的映像更深,也希望有人能够指导我学习(谢谢!) 优化算法的方法 (1)修改学习速率,还有各种(可变)参数1.尝试减少特征的数量2.尝试获得更多的特征3.尝试增加多项…

elment-ui el-tabs组件 每次点击后 created方法都会执行2次

先看错误的 日志打印: 错误的代码如下: 正确的日志打印: 正确的代码如下: 前言: 在element-ui的tabs组件中,我们发现每次切换页面,所有的子组件都会重新渲染一次。当子页面需要发送数据请求并且子页面过多时,这样会过多的占用网络资源。这里我们可以使用 v-if 来进行…

科技助力高质量发展:新质生产力的崛起与企业数字化转型

引言 随着科技的飞速发展&#xff0c;我们正逐渐步入数字化智能时代&#xff0c;这个时代不仅为企业带来了无限的机遇&#xff0c;也让其面对前所未有的挑战。在这个快速变革的时代&#xff0c;企业必须不断调整自己的经营策略&#xff0c;适应数字化转型的浪潮&#xff0c;以…

SQL-Labs靶场“32-33”关通关教程

君衍. 一、32关 GET单引号闭合宽字节注入1、源码分析2、宽字节注入原理3、联合查询注入4、updatexml报错注入5、floor报错注入 二、33关 GET单引号addslashes逃逸注入1、源码分析2、联合查询注入3、updatexml报错注入4、floor报错注入 SQL-Labs靶场通关教程&#xff1a; SQL注入…

【Linux】多线程 --- 同步+POSIX信号量+基于环形队列的生产者消费者模型

线程同步 1. 通过条件变量抛出线程同步概念 在上一篇线程互斥博客就说过&#xff0c;在抢票逻辑中&#xff0c;刚释放完锁的线程由于竞争能力比较强&#xff0c;导致其他线程无法申请到锁&#xff0c;那么长时间其他线程都无法申请到锁&#xff0c;只能阻塞等待着&#xff0c…

福克斯2010 1.8L 手动档

老车了记录点东西 好看也便宜 福克斯维修保养费用调查_保养维护_车系文章_空港平行进口汽车交易服务中心 https://tjautoland.net/article-40.html 福克斯自从上市后&#xff0c;凭借其时尚动感的外形、良好的操控性和极佳的驾乘舒适度&#xff0c;在国内紧凑型市场上持续热…

HJDZ-E800静态中间继电器 DC24V 35mm卡导轨安装 JOSEF约瑟

HJDZ静态中间继电器 系列型号&#xff1a; HJDZ-A200静态中间继电器&#xff1b;HJDZ-A110静态中间继电器&#xff1b; HJDZ-A002静态中间继电器&#xff1b;HJDZ-A004静态中间继电器&#xff1b; HJDZ-E112静态中间继电器&#xff1b;HJDZ-E112L静态中间继电器&#xff1b; HJ…

一步将查询功能添加到公众号菜单和文章

易查分如何将查询功能添加到公众号菜单和文章&#xff0c;实现菜单栏、文章、自动回复均可进行查询。本文给大家详细讲解。 &#x1f50e;接入方式&#xff1a; ✅1.公众号菜单栏接入查询网址 ✅2.公众号菜单栏接入查询小程序 ✅3.公众号菜单栏点击发送查询二维码 ✅4.公众…

提升口才与演讲技巧的有效方法

提升口才与演讲技巧的有效方法 口才与演讲技巧在现代社会中扮演着举足轻重的角色。无论是在职场、学校还是日常生活中&#xff0c;我们都需要借助良好的口才和演讲技巧来表达自己的思想&#xff0c;传递信息&#xff0c;并有效地影响他人。因此&#xff0c;提升口才与演讲技巧…

02分布式搜索引擎ES

elasticsearch查询 1.DSL查询文档1.1.DSL查询分类1.2.全文检索查询1.3.精准查询1.4.地理坐标查询1.5.复合查询 2.搜索结果处理2.1.排序2.2.分页2.3.高亮2.4.总结 3.RestClient查询文档3.1.快速入门3.2.match查询3.3.精确查询3.4.布尔查询3.5.排序、分页3.6.高亮 1.DSL查询文档 …

HTML中的常用标签用法总结(持续更新...)

&#x1f31f; 欢迎来到 我的博客&#xff01; &#x1f308; &#x1f4a1; 探索未知, 分享知识 !&#x1f4ab; 本文目录 1. 标题标签2. 段落标签3. 链接标签4. 列表标签5. 图像标签6. 表格标签 1. 标题标签 <h1>至<h6>用于定义标题。<h1>是最大的标题&am…

交叉注意力融合时域、频域特征的FFT + CNN -BiLSTM-CrossAttention电能质量扰动识别模型

往期精彩内容&#xff1a; 电能质量扰动信号数据介绍与分类-Python实现-CSDN博客 Python电能质量扰动信号分类(一)基于LSTM模型的一维信号分类-CSDN博客 Python电能质量扰动信号分类(二)基于CNN模型的一维信号分类-CSDN博客 Python电能质量扰动信号分类(三)基于Transformer…

一款博客网站源码

一款博客网站源码 源码软件库 为大家内置了主题 清爽又强大真正的永久可用的一条源码&#xff0c;该版本为整合版本&#xff0c;内置了Joe主题&#xff0c;搭建后直接启用即可~ 安装环境要求&#xff1a; PHP 7.2 以上 MySQL, PostgreSQL, SQLite 任意一种数据库支持&#xff…

「滚雪球学Java」:内存管理和垃圾回收(章节汇总)

咦咦咦&#xff0c;各位小可爱&#xff0c;我是你们的好伙伴——bug菌&#xff0c;今天又来给大家普及Java SE相关知识点了&#xff0c;别躲起来啊&#xff0c;听我讲干货还不快点赞&#xff0c;赞多了我就有动力讲得更嗨啦&#xff01;所以呀&#xff0c;养成先点赞后阅读的好…

AI:150-基于深度学习的医学数据挖掘与病症关联发现

🚀点击这里跳转到本专栏,可查阅专栏顶置最新的指南宝典~ 🎉🎊🎉 你的技术旅程将在这里启航! 从基础到实践,深入学习。无论你是初学者还是经验丰富的老手,对于本专栏案例和项目实践都有参考学习意义。 ✨✨✨ 每一个案例都附带关键代码,详细讲解供大家学习,希望…

品牌软文推广怎么做?实战攻略分享

品牌软文推广作为一种隐性广告形式&#xff0c;越来越受到企业的重视。一篇优质的软文&#xff0c;不仅能够提高品牌知名度&#xff0c;还能够增强用户粘性&#xff0c;促进产品销售。然而&#xff0c;如何写出既符合用户需求&#xff0c;又能有效推广品牌的软文&#xff0c;成…

Java使用itextpdf往pdf中插入图片

引入maven依赖 <dependency><groupId>com.itextpdf</groupId><artifactId>itextpdf</artifactId><version>5.5.9</version> </dependency>java代码 import cn.hutool.extra.qrcode.QrCodeUtil; import com.itextpdf.text.*; i…

微信小程序 ---- 慕尚花坊 结算支付

结算支付 01. 配置分包并跳转到结算页面 思路分析&#xff1a; 随着项目功能的增加&#xff0c;项目体积也随着增大&#xff0c;从而影响小程序的加载速度&#xff0c;影响用户的体验。 因此我们需要将 结算支付 功能配置成一个分包&#xff0c; 当用户在访问设置页面时&a…

Python字典:存储键值的可变容器

文章目录 一、字典1.创建字典2.访问字典元素3.修改字典元素4.添加字典元素5.删除字典元素 二、字典的常见操作1.遍历字典2.获取键列表和值列表3.检查键是否存在4.获取键的值 三、字典内置函数&方法1.内置函数len()2.内置函数str()3.内置函数type()4.内置方法 四、总结 一、…