Flutter的路由router-页面跳转

扫城堡有惊喜

文章目录

  • 概念介绍
    • 基本路由(Basic Routing)
      • 跳转到某个页面
      • 弹出页面
    • 命名路由(Named Routing)
    • 第三方路由管理库(Third-Party Routing Libraries)
  • Android原生的路由
    • Intent-based Routing(基于Intent的路由)
    • 使用隐式Intent进行路由
    • 使用显式Intent进行路由
    • Manifest-based Routing(基于Manifest的路由)
  • 总结

概念介绍

在Flutter中,路由(Router)是用于管理不同页面之间导航的机制。它允许您在应用程序中切换和管理不同的屏幕或视图。Flutter提供了多种方式来实现路由,包括基本路由、命名路由和第三方路由管理库。下面是对这些不同方式的详细介绍:

基本路由(Basic Routing)

Flutter提供了一种基本的路由管理方式,通过Navigator类来实现。Navigator类提供了一组方法,用于在应用程序的不同页面之间进行导航,例如push、pop和pushReplacement等。您可以使用这些方法在堆栈中推送或弹出页面,实现页面之间的切换和管理。

跳转到某个页面

//跳转到页面
Navigator.push(context,MaterialPageRoute(builder: (context) => SecondScreen()),
);

弹出页面

Navigator.of(context).pop();

上面的示例代码演示了如何使用Navigator.push方法将应用程序从当前页面切换到名为SecondScreen的新页面。基本路由适用于简单的导航场景,但在大型应用程序中可能需要更高级的路由管理。

命名路由(Named Routing)

命名路由是一种更高级的路由管理方式,通过给每个页面分配唯一的名称,并使用这些名称进行导航。它提供了更清晰和可维护的路由配置方式,并支持参数传递。

首先,在应用程序的MaterialApp中配置命名路由表:

MaterialApp(routes: {'/': (context) => HomeScreen(),'/second': (context) => SecondScreen(),},
)

然后,使用Navigator.pushNamed方法导航到指定的命名路由:

Navigator.pushNamed(context, '/second');

命名路由提供了一种更结构化和清晰的方式来配置和管理应用程序的路由。它适用于中小型应用程序,并且在需要扩展或修改路由时更加灵活。

第三方路由管理库(Third-Party Routing Libraries)

除了Flutter提供的基本路由和命名路由,还有一些强大的第三方路由管理库可供选择,例如fluro、auto_route、get等。这些库提供了更高级和更灵活的路由管理功能。

这些库通常提供了更强大的路由配置方式、参数传递、路由拦截、动画效果、路由传参、深层链接等功能。它们可以帮助您更好地组织和管理应用程序的路由,并提供更好的用户导航体验。

例如,使用fluro库配置和导航到命名路由的示例代码如下:

final router = FluroRouter();
router.define('/second', handler: Handler(handlerFunc: (context, params) => SecondScreen()));// 导航到命名路由
router.navigateTo(context, '/second');

第三方路由管理库通常具有更复杂的配置和使用方式,但它们提供了更高级和灵活的路由管理功能,适用于大型应用程序或需要更复杂导航逻辑的场景。

Android原生的路由

在原生Android开发中,路由(Routing)是指通过特定的机制将用户从一个界面(Activity)导航到另一个界面的过程。
Android提供了多种方式来实现页面导航和路由管理,其中最常用的方式是使用Intent和Manifest文件。

Intent-based Routing(基于Intent的路由)

在Android中,Intent是一种用于在组件之间传递消息和触发操作的机制。通过使用Intent,可以实现页面之间的导航和通信。

使用隐式Intent进行路由

在Android中,可以使用隐式Intent来指定要启动的目标Activity。通过设置Intent的Action、Category和Data等属性,可以将用户导航到匹配指定条件的Activity。

Intent intent = new Intent();
intent.setAction("com.example.ACTION_PROFILE");
intent.setData(Uri.parse("http://example.com/profile/123"));
startActivity(intent);

上述示例中,我们创建了一个隐式Intent,并设置了Action为"com.example.ACTION_PROFILE",Data为"http://example.com/profile/123"。系统会根据Intent的条件匹配来查找并启动匹配的Activity。

使用显式Intent进行路由

除了隐式Intent,还可以使用显式Intent来直接指定要启动的目标Activity的类名。

Intent intent = new Intent(MainActivity.this, ProfileActivity.class);
intent.putExtra("userId", "123");
startActivity(intent);

上述示例中,我们创建了一个显式Intent,并指定了目标Activity的类名为ProfileActivity。同时,我们还可以通过Intent的putExtra方法传递参数给目标Activity。

Manifest-based Routing(基于Manifest的路由)

Android的Manifest文件(AndroidManifest.xml)是应用程序的配置文件,其中包含了应用程序的元数据和组件声明。通过在Manifest文件中声明Activity和设置其Intent过滤器,可以实现基于Manifest的路由。

<activityandroid:name=".ProfileActivity"android:label="Profile"><intent-filter><action android:name="com.example.ACTION_PROFILE" /><category android:name="android.intent.category.DEFAULT" /><data android:scheme="http"android:host="example.com"android:pathPrefix="/profile/" /></intent-filter>
</activity>

在上述示例中,我们在Manifest文件中声明了一个ProfileActivity,并设置了其Intent过滤器。通过设置Action为"com.example.ACTION_PROFILE"和Data为"http://example.com/profile/",我们指定了ProfileActivity可以处理满足这些条件的Intent。

当满足指定条件的Intent被触发时,Android系统会根据Manifest文件中的配置,自动找到匹配的Activity并启动。

这些是原生Android开发中常用的路由实现方式。Intent和Manifest文件提供了强大的机制来管理页面的导航和路由。通过使用Intent和Manifest文件,开发者可以灵活地定义和配置Activity之间的导航关系,并实现复杂的页面跳转逻辑。

对比下Flutter的路由和原生Android的路由,能更好的理解flutter的路由。

总结

通过使用这些不同的路由管理方式,您可以根据应用程序的规模和需求选择最适合的方式来管理和处理Flutter应用程序中的页面导航。无论是基本路由、命名路由还是第三方路由管理库,它们都提供了一种方便的方式来实现页面之间的切换和导航。

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

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

相关文章

【Spatial-Temporal Action Localization(七)】论文阅读2022年

文章目录 1. TubeR: Tubelet Transformer for Video Action Detection摘要和结论引言&#xff1a;针对痛点和贡献模型框架TubeR Encoder&#xff1a;TubeR Decoder&#xff1a;Task-Specific Heads&#xff1a; 2. Holistic Interaction Transformer Network for Action Detect…

stm32学习-芯片系列/选型/开发方式

【03】STM32HAL库开发-初识STM32 | STM概念、芯片分类、命名规则、选型 | STM32原理图设计、看数据手册、最小系统的组成 、STM32IO分配_小浪宝宝的博客-CSDN博客  STM32&#xff1a;ST是意法半导体&#xff0c;M是MCU/MPU&#xff0c;32是32位。  ST累计推出了&#xff1a…

七天学会C语言-第五天(函数)

1. 调用有参函数 有参函数是一种接受输入参数&#xff08;参数值&#xff09;并执行特定操作的函数。通过向函数传递参数&#xff0c;你可以将数据传递给函数&#xff0c;让函数处理这些数据并返回结果。 例1&#xff1a;编写一程序&#xff0c;要求用户输入4 个数字&#xf…

MYSQL存储引擎基础知识介绍

下面重点介绍几种常用的存储引擎,并对比各个存储引擎之间的区别&#xff0c;以帮助读者理解 不同存储引擎的使用方式。 MyISAM MyISAM是 MySQL的默认存储引擎。MyISAM不支持事务、也不支持外键&#xff0c;其优势是访 问的速度快&#xff0c;对事务完整性没有要求或者以 SEL…

Postman应用——接口请求和响应(Get和Post请求)

文章目录 新增Request请求Get请求Post请求 Request请求响应Postman响应界面说明请求响应另存为示例&#xff08;模板&#xff09;Postman显示的响应数据清空请求响应数据保存到本地文件 这里只讲用的比较多的Get和Post请求方式&#xff0c;也可以遵循restful api接口规范&#…

laravel-admin联动选择展示时ueditor样式错乱

问题 录入内容时&#xff0c;根据资源类型&#xff0c;展示不同的需要录入的内容&#xff0c;很常见的功能&#xff0c;但是在切换时&#xff0c;编辑器一直出不来&#xff0c;如图&#xff1a; 代码如下&#xff1a; $form->radio(type, 资源类型)->when(2, function…

Leetcode152. 连续子数组的最大乘积

力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 给你一个整数数组 nums &#xff0c;请你找出数组中乘积最大的非空连续子数组&#xff08;该子数组中至少包含一个数字&#xff09;&#xff0c;并返回该子数组所对应的乘积。 测试用例的答案是一个 32…

基于51单片机多路DTH11温湿度检测控制系统

一、系统方案 1、本设计采用51单片机作为主控器。 2、DHT11采集温度度&#xff0c;支持3路温度度&#xff0c;液晶1602显示。 3、按键设置报警阀值。 4、系统声光报警。 二、硬件设计 原理图如下&#xff1a; 三、单片机软件设计 1、首先是系统初始化 //初始化LCD*********…

本地项目上传至码云gitee

1、springboot-mgx是需要上传的项目 2、码云后台创建一个新的仓库 3、创建完成后&#xff0c;复制下来https链接&#xff0c;后面要用到。 4、进入项目要上传的文件中 5、对git进行初始化&#xff0c;git指令 git init 6、 上传项目至gitee &#xff08;1&#xff09;连接远…

大数据之-Flink学习笔记

Flink Apache Flink — 数据流上的有状态计算。 Apache Flink 是一个框架和分布式处理引擎&#xff0c;用于对无界和有界数据流进行有状态计算处理。 任何类型的数据都以事件流的形式生成。信用卡交易、传感器测量、机器日志或网站或移动应用程序 2上的用户交互&#xff0c;…

如何通过百度SEO优化提升网站排名(掌握基础概念,实现有效优化)

随着互联网的发展&#xff0c;搜索引擎优化&#xff08;SEO&#xff09;成为了网站优化中不可或缺的一部分。在中国&#xff0c;百度搜索引擎占据着主导地位&#xff0c;因此掌握百度SEO概念和优化技巧对网站的排名和曝光非常重要。 百度SEO排名的6个有效方法&#xff1a; 首…

CTF —— 网络安全大赛(这不比王者好玩吗?)

前言 随着大数据、人工智能的发展&#xff0c;人们步入了新的时代&#xff0c;逐渐走上科技的巅峰。 \ ⚔科技是一把双刃剑&#xff0c;网络安全不容忽视&#xff0c;人们的隐私在大数据面前暴露无遗&#xff0c;账户被盗、资金损失、网络诈骗、隐私泄露&#xff0c;种种迹象…

PostgreSQL设置主键为自增

1、创建自增序列 CREATE SEQUENCE table_name_id_seq START 1; 2、设置字段默认值 字段默认值中设置 nextval(table_name_id_seq) 3、常用查询 -- 查询所有序列 select * from information_schema.sequences where sequence_schema public; -- 查询自增序列的当前值 select cu…

2023年浙工商MBA新生奖学金名单公布,如何看待?

浙工商MBA项目官方最新公布了2023年的非全日制新生奖学金名单&#xff0c;按照政策约定&#xff0c;共分为特等奖学金1名&#xff0c;一等奖学金10名&#xff0c;二等奖学金15名&#xff0c;三等奖学金30名&#xff0c;额度对应3万、1万、0.8万、0.5万不等&#xff0c;主要名单…

Mac电脑安装Zulu Open JDK 8 使用 spring-kafka 消费不到Kafka Partition中的消息

一、现象描述 使用Mac电脑本地启动spring-kakfa消费不到Kafka的消息&#xff0c;监控消费组的消息偏移量发现存在Lag的消息&#xff0c;但是本地客户端就是拉取不到&#xff0c;通过部署到公司k8s容器上消息却能正常消费&#xff01; 本地启动的服务消费组监控 公司k8s容器服…

C语言入门Day_23 指针的使用

目录 前言&#xff1a; 1.指针运算符 2.指针的运算和使用 3.易错点 4.思维导图 前言&#xff1a; 上一篇博客中我们了解到指针的两个运算符号"&#xff1a; 一个是星号*&#xff0c;一个是&&#xff0c;他们的名字分别是指针运算符和取地址运算符。 1.指针运算…

QT-day5

1、添加注册功能到数据库 头文件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QMessageBox> //消息对话框类头文件 #include <QDebug> #include <QPushButton> #include <QSqlDatabase> //数据库管理类 #include…

Vue路由和Node.js环境搭建

文章目录 一、vue路由1.1 简介1.2 SPA1.3 实例 二、Node.js环境搭建2.1 Node.js简介2.2 npm2.3 环境搭建2.3.1 下载解压2.3.2 配置环境变量2.3.3 配置npm全局模块路径和cache默认安装位置2.3.4 修改npm镜像提高下载速度 2.4 运行项目 一、vue路由 1.1 简介 Vue 路由是 Vue.js…

C++项目:仿mudou库实现高性能高并发服务器

文章目录 一、实现目标二、前置知识&#xff08;一&#xff09;HTTP服务器1.概念2.Reactor模型&#xff1a;3.分类 一、实现目标 仿muduo库One Thread One Loop式主从Reactor模型实现高并发服务器&#xff1a; 通过咱们实现的高并发服务器组件&#xff0c;可以简洁快速的完成⼀…

【深度学习】卷积神经网络(LeNet)【文章重新修改中】

卷积神经网络 LeNet 前言LeNet 模型代码实现MINST代码分块解析1 构建 LeNet 网络结构2 加载数据集3 初始化模型和优化器4 训练模型5 训练完成 完整代码 Fashion-MINST代码分块解析1 构建 LeNet 网络结构2 初始化模型参数3 加载数据集4 定义损失函数和优化器5 训练模型 完整代码…