Flutter的路由router-页面跳转

2023-11-04

扫城堡有惊喜

概念介绍

在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的路由。

<activity
    android: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应用程序中的页面导航。无论是基本路由、命名路由还是第三方路由管理库,它们都提供了一种方便的方式来实现页面之间的切换和导航。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Flutter的路由router-页面跳转 的相关文章

随机推荐

  • virtualbox 清理磁盘占用空间

    目录 1 虚拟系统整理 2 压缩磁盘 1 虚拟系统整理 Windows虚拟机 下载sdelete工具 执行下面的命令 sdelete z c Linux虚拟机执行下面的命令 sudo dd if dev zero of EMPTY bs 1
  • 软件设计师考试内容复习(二)

    一 层次化存储结构 二 Cache Cache的功能 提高CPU数据输入输出的速率 突破CPU与存储系统间数据传输带宽限制 在计算机存储系统体系中 Cache是访问速度最快的层次 使用Cache改善系统性能的依据是程序的局部性原理 如果以
  • docker 镜像容器导入导出、查看日志、拷贝文件命令

    1 本地文件拷贝到docker 容器中 参考 docker cp root pcl pcl 1 8 1 tar gz 7ff95b333e12 docker cp root lib64 a 7ff95b333e12 2 docker从容器里
  • 蓝桥杯决赛真题——国王的遗产

    标题 国王的遗产 X国是个小国 国王K有6个儿子 在临终前 K国王立下遗嘱 国王的一批牛作为遗产要分给他的6个儿子 其中 大儿子分1 4 二儿子1 5 三儿子1 6 直到小儿子分1 9 牛是活的 不能把一头牛切开分 最后还剩下11头牛 分给
  • 5种开源虚拟化技术推荐

    zz http www oschina net news 14907 5 opensource virtualization soft 论坛 http bbs chinaunix net forum 283 1 html 虚拟化现在已经成为
  • 力扣977-有序数组的平方

    有序数组的平方链接 给你一个按 非递减顺序 排序的整数数组 nums 返回 每个数字的平方 组成的新数组 要求也按 非递减顺序 排序 示例 1 输入 nums 4 1 0 3 10 输出 0 1 9 16 100 解释 平方后 数组变为 1
  • python开发工程师考试_Python开发工程师丨网易游戏

    本期导读 计科校友 榜样说 vol 15 方向很重要 实践出真知 蔡钰莹 Python开发工程师丨网易游戏 软件工程师 广州合明软件科技有限公司 前端开发工程师 广东中科慈航信息科技有限公司 网易游戏 公司简历 网易 NASDAQ NTES
  • SpringSecurity跨域问题,配置了相关配置还是报错

    跨域问题基础配置 跨域的本质是响应头问题 只要加上下述的响应头即可解决跨域 下述1 配置跨域中的代码是通过aop来实现该功能的一种方式 1 配置跨域 正常的跨域配置 Component public class CORSIntercepto
  • 【uni-app项目如何引入 uView组件库】

    uniapp项目引入uView组件库 一 uView官方文档 二 公司项目中引入并使用uView 一 uView官方文档 uView官方文档 二 公司项目中引入并使用uView 第一步 在公司创建完成uniapp项目后引入uView 第二步
  • ESP8266-NodeMCU——使用U8g2库点亮OLED

    前言 U8g2是嵌入式设备的单色图形库 U8g2库提供了大量绘制函数 简单引用即可实现想要的效果 并且适用大部分屏幕驱动 一 软件准备 1 Arduino IDE 2 u8g2库文件 点击跳转 如果在IDE里不能下载就从这下载 解压后放去库
  • C++中同类的不同对象可以相互访问成员(包括私有成员)

    如拷贝 复制 构造函数中 include using namespace std class Data public Data int a x a Data const Data r 调用别对象的函数 x r x void s cout l
  • 【c++】理解模板类型推导

    理解模板类型推导 函数模板 第一种情况 ParamType 是个非通用的引用或者是一个指针 第二种情况 ParamType 是个通用的引用 Universal Reference 第三种情况 ParamType 既不是指针也不是引用 数组参
  • 浅谈Hybrid技术的设计与实现第第2章

    前言 接上文 浅谈Hybrid技术的设计与实现 阅读本文前 建议阅读这个先 上文说了很多关于Hybrid的概要设计 可以算得上大而全 有说明有demo有代码 对于想接触Hybrid的朋友来说应该有一定帮助 但是对于进阶的朋友可能就不太满足了
  • Linux 终端颜色,界面着色

    环境 Ubuntu Liniux终端着色分2块 1 提示符及命令行和输出颜色 2 显示目录和文件 ls命令 颜色 一 提示符及命令行颜色设置 设置PS1命令 可立即生效 e后面为颜色设置部分 32 40m 32为前景色 40为背景色 m 不
  • pandas用均值填充nan_pandas dataframe 填充 NaN(填补缺失值)的方法 fillna 函数使用说明...

    在基于 pandas 的 DataFrame 对象进行数据处理时 如样本特征的缺省值处理 可以使用 DataFrame 对象的 fillna 函数进行填充 同样可以针对指定的列进行填补空值 单列的操作是调用 Series 对象的 filln
  • Unity-赛车Demo

    using UnityEngine using System Collections public class CarDrive MonoBehaviour public WheelCollider wheelColLF public Wh
  • 软件测试---弹出窗口

    视频地址 第五课时 https pan baidu com s 1gfLVC2n alert 弹出窗口 Alert Should Be Present Get Alert Message confirm 弹出窗口 Choose Cancel
  • [masmplus]初次使用报external symbol _start 是配置问题

    初次使用masmplus 其中在 codesg segment 使用了 start 标记 并在end处标明了 end start 但是默认的masmplus 会提示 start 为 不认识的 external symbol 如下图 那怎么办
  • 计算机系统的多级层次结构

  • Flutter的路由router-页面跳转

    文章目录 概念介绍 基本路由 Basic Routing 跳转到某个页面 弹出页面 命名路由 Named Routing 第三方路由管理库 Third Party Routing Libraries Android原生的路由 Intent