Flutter开发入门——路由

news2025/5/22 19:50:30

什么是路由?

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

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

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

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

相关文章

AndroidLinux GPIO控制方法

目录 1 GPIO整体架构 2 user space 层 gpio使用方法 2.1 sysfs控制方法 2.1.1 kernel版本区别 2.1.2 /sys/class/gpio 2.1.3 /sys/bug/gpio/devices 2.2 chardev控制方法 2.2.1 chardev 示例代码 2.2.2 示例代码主要步骤描述 2.2.3 include/linux/gpio.h 全部代码 2.3…

代码随想录算法训练营第四十三天|卡码网52. 携带研究材料(第七期模拟笔试)、518. 零钱兑换 II、377. 组合总和 Ⅳ

卡码网52. 携带研究材料&#xff08;第七期模拟笔试&#xff09; 刷题https://kamacoder.com/problempage.php?pid1052文章讲解https://programmercarl.com/%E8%83%8C%E5%8C%85%E9%97%AE%E9%A2%98%E7%90%86%E8%AE%BA%E5%9F%BA%E7%A1%80%E5%AE%8C%E5%85%A8%E8%83%8C%E5%8C%85.…

STM32通信协议

STM32通信协议 STM32通信协议 STM32通信协议一、通信相关概念二、通信协议引脚作用三、通信方式四、采样方式五、电平信号六、通信对象 一、通信相关概念 通信接口 通信的目的&#xff1a;将一个设备的数据传送到另一个设备&#xff0c;扩展硬件系统 通信协议&#xff1a;制定…

sqlserver字段2按字段1分组后;合并字段2

效果 相同dzbm的mc通过‘;’合并 sqlserver语句 按字段dzbm分组,有相同dzbm的mc通过 ;合并成一个字段,其它字段都选择第一个 SELECT dzbm, STUFF((SELECT DISTINCT ; + mc FROM tablenameWHERE dzbm = p.dzbm FOR XML PATH()), 1

Json Web Token(JWT) 快速入门

推荐视频&#xff1a;【从零开始掌握JWT】 目录 第一章 会话跟踪 01 使用Cookie和Session&#xff0c;jsessionid 02 使用token 例子一&#xff1a;自定义token 例子二&#xff1a;使用redis存储token 第一章 会话跟踪 应用背景 &#xff1a;浏览器访问web应用&#xff…

Linux工具 - 强大的vim编辑器

~~~~ 前言vim是什么为什么有vimvim怎么用vim模式介绍模式切换命令模式(Normal mode)i/a/o 切换到插入模式: 切换到底行模式R 切换到替换模式光标移动删除文字复制撤销更改 插入模式(Insert mode)底行模式(last line mode)&#xff08;需整理20240311&#xff09;替换模式vim简单…

STP环路避免实验(思科)

华为设备参考&#xff1a;STP环路避免实验&#xff08;华为&#xff09; 一&#xff0c;技术简介 Spanning Tree Protocol&#xff08;STP&#xff09;&#xff0c;即生成树协议&#xff0c;是一种数据链路层协议。主要作用是防止二层环路&#xff0c;并自适应网络变化和故障…

大势智慧与云世纪签署战略合作,实景三维赋能低空经济,泛测绘助力城市数据更新更高效

2024年《政府工作报告》提出“要大力推进现代化产业体系建设&#xff0c;加快发展新质生产力”、“积极打造商业航天、低空经济等新增长引擎”。 近日&#xff0c;武汉大势智慧科技有限公司&#xff08;以下简称“大势智慧”&#xff09;和青岛云世纪信息科技有限公司&#xf…

Portraiture2024中文版PS/LR专用智能磨皮插件

打造完美肤质&#xff0c;Portraiture PS/LR专用智能磨皮插件让你的照片焕发魅力 副标题&#xff1a;让你的照片告别粗糙皮肤和毛孔&#xff0c;展现自然细腻的肤质 在摄影后期处理中&#xff0c;给照片进行磨皮和肤质优化是一项必不可少的步骤。 而今天&#xff0c;我们为你带…

不偷看密码的超萌猫头鹰

页面结构 不偷看密码的超萌猫头鹰.css * {/* 初始化 */margin: 0;padding: 0; }body {/* 100%窗口高度 */height: 100vh;/* 弹性布局 居中 */display: flex;justify-content: center;align-items: center;/* 渐变背景 */background: linear-gradient(200deg, #72afd3, #96fbc4)…

分布式接口幂等性解析

一、概述 幂等性定义&#xff1a;用户对于同一操作发起的一次请求或者多次请求的结果是一致的&#xff0c;不会因为多次点击而产生了副作用。【同一操作指的是同一个浏览器&#xff0c;发送相同的请求】。 常见场景&#xff1a; 提交订单接口。返回提交结果时网络出现故障&am…

如何在小程序上搭建积分商城呢_小程序搭建积分商城的优势

小程序积分商城&#xff1a;打造你的数字营销新引擎 在数字化营销的时代&#xff0c;如何有效吸引并留住用户&#xff0c;成为了每个企业都面临的重大课题。小程序积分商城&#xff0c;作为一种新兴的营销方式&#xff0c;正在以其独特的魅力&#xff0c;帮助企业实现用户增长…

Python进程与线程开发

目录 multiprocessing模块 线程的开发 threading模块 setDaemon 死锁 线程间的通信 multiprocessing模块 运行python的时候&#xff0c;我们都是在创建并运行一个进程&#xff0c;(linux中一个进程可以fork一个子进程&#xff0c;并让这个子进程exec另外一个程序)。在pyt…

MySQL如何用phpMyAdmin创建定时任务事件来执行SQL语句删除_edit_lock和_edit_last?

前面跟大家分享了『WordPress如何批量删除wp_postmeta数据表无用的_edit_lock和_edit_last数据&#xff1f;』和『宝塔面板在计划任务中怎么执行SQL语句删除_edit_lock和_edit_last&#xff1f;』&#xff0c;但是有些站长并不是使用宝塔面板&#xff0c;那么我们如何时间定时删…

阅读基础知识1

一 网络 1. 三次握手四次挥手 三次握手&#xff1a;为了建立长链接进行交互即建立一个会话&#xff0c;使用 http/https 协议 ① 客户端产生初始化序列号 Seqx &#xff0c;向服务端发送建立连接的请求报文&#xff0c;将 SYN1 同步序列号&#xff1b; ② 服务端接收建立连接…

走近 AI Infra 架构师:在高速飞驰的大模型“赛车”上“换轮子”的人

如果把大模型训练比作 F1 比赛&#xff0c;长凡所在的团队就是造车的人&#xff0c;也是在比赛现场给赛车换轮子的人。1% 的训练提速&#xff0c;或者几秒之差的故障恢复时间&#xff0c;累积起来&#xff0c;都能影响到几百万的成本。长凡说&#xff1a;“大模型起来的时候&am…

日本科技巨头富士通遭遇网络攻击,客户数据被窃

日本科技巨头富士通3月15日发布通告&#xff0c;宣称公司经历了一起网络攻击事件&#xff0c;客户个人数据已被黑客窃取。 富士通在一份通知中写道&#xff1a;“我们已经确认有几台商用计算机上存在恶意软件&#xff0c;并且经过我们的内部调查&#xff0c;发现包含个人信息和…

Linux权限维持后门及应急响应

本次应急响应实验用kali和centos7来充当攻击机和靶机 kali&#xff1a;192.168.10.130 centos7&#xff1a;192.168.10.155 前提&#xff1a; 用kali连接到centos7上面ssh root192.168.10.155 一、SSH软链接 任意密码登录即可发现程度&#xff1a;|||||| ln -sf /usr/sbi…

卓越巨人wzy

解法&#xff1a; 向下取整同理&#xff0c;f(n)20230416-n 当n20230416时&#xff0c;f&#xff08;n&#xff09;0&#xff0c;之后由于向上取整&#xff0c;结果恒为0. #include<iostream> #include<algorithm> #include<vector> using namespace std; …

网站如何搭建 网站搭建的详细步骤

网站如何搭建 网站搭建的详细步骤 一.领取一个免费域名和SSL证书&#xff0c;和CDN 1.打开网站链接&#xff1a;https://www.rainyun.com/z22_ 2.在网站主页上&#xff0c;您会看到一个"登陆/注册"的选项。 3.点击"登陆/注册"&#xff0c;然后选择"…