iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >详解Flutter的路由导航
  • 516
分享到

详解Flutter的路由导航

2024-04-02 19:04:59 516人浏览 八月长安
摘要

目录Flutter 的路由导航 默认路由 页面跳转并传递参数 总结 Flutter 的路由导航 路由管理或导航管理:从一个页面平滑地过渡到另一个页面,我们需要有一个统一的机制来管理

Flutter 的路由导航

路由管理或导航管理:从一个页面平滑地过渡到另一个页面,我们需要有一个统一的机制来管理页面之间的跳转。在原生的Android 开发,是通过startActivity或startActivityForResult 来完成页面的跳转的,在Flutter 中如何实现呢?

在 Flutter 中,页面之间的跳转是通过 Route 和 Navigator 来管理的:

  • Route 是页面的抽象,主要负责创建对应的界面,接收参数,响应 Navigator 打开和关闭;
  • 而 Navigator 则会维护一个路由栈管理 Route,Route 打开即入栈,Route 关闭即出栈,还可以直接替换栈内的某一个 Route。

在Flutter 中根据是否提前注册,可以分为 基本路由和 命名路由。

基本路由:没有提前注册。

命名路由:需要在 APP 的入口进行注册。

基本路由使用方式相对简单灵活,适用于应用中页面不多的场景。而在应用中页面比较多的情况下,再使用基本路由方式,那么每次跳转到一个新的页面,我们都要手动创建 MaterialPageRoute 实例,初始化页面,然后调用 push 方法打开它,还是比较麻烦的。

应用程序 MaterialApp 提供一个页面名称映射规则,即路由表 routes,路由表实际上是一个 Map,其中 key 值对应页面名字,而 value 值则是一个 WidgetBuilder 回调函数,我们需要在这个函数中创建对应的页面。而一旦在路由表中定义好了页面名字,我们就可以使用 Navigator.pushNamed 来打开页面了。

需要注意的是,要在 进入APP入口的 MaterialApp 注册路由才有用。


使用基本路由方式打开 Page1:
 Navigator.push(
        context, MaterialPageRoute(builder: (context) => Page1())),
        
 命名路由:
 void main() {
 runApp(MyApp());
}

class MyApp extends StatelessWidget {
 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
  return MaterialApp(
   title: 'Flutter Demo',
   routes: {
   // 注册路由
    "route_Page1": (context) => Page1(),
    ...
   },
   onUnknownRoute: (RouteSettings setting) =>
     MaterialPageRoute(builder: (context) => ErrorPage()),
   theme: ThemeData(
    primarySwatch: Colors.blue,
    visualDensity: VisualDensity.adaptivePlatfORMDensity,
   ),
   home: MyHomePage(title: 'Flutter Demo Home Page'),
  );
 }
}
// 使用命名路由方式打开 Page1:
Navigator.pushNamed(context, "route_Page1"),

默认路由

使用命名路由,该命名不在路由表中就会报错,这时候可以通过设置默认路由,当找不到的时候,进到到一个指定的页面。只需要在 MaterialApp 中配置:onUnknownRoute 即可


void main() {
 runApp(MyApp());
}

class MyApp extends StatelessWidget {
 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
  return MaterialApp(
   title: 'Flutter Demo',
   routes: {
    "route_Page1": (context) => Page1(),
    ......
   },
   // 路由发生错误,进入到该指定页面
   onUnknownRoute: (RouteSettings setting) =>
     MaterialPageRoute(builder: (context) => ErrorPage()),
   theme: ThemeData(
    primarySwatch: Colors.blue,
    visualDensity: VisualDensity.adaptivePlatformDensity,
   ),
   home: MyHomePage(title: 'Flutter Demo Home Page'),
  );
 }
}

页面跳转并传递参数

通过 Navigator.pushNamed 传入 arguments 属性;然后在打开的页面 通过 ModalRoute.of(context).settings.arguments来获取参数;参数的回传通过 Navigator.pop 方法


1. 传递参数:
 Navigator.pushNamed(context, "route_Page3", arguments: "hello"),
 2. 接收参数:
 
class Page3 extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  String msg = ModalRoute.of(context).settings.arguments as String;
  return Scaffold(
   backgroundColor: Colors.red,
   appBar: AppBar(
    title: Text("传递参数"),
   ),
   body: Text("得到的参数是:$msg"),
  );
 }
}
3, 参数的回传
class Page4 extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  String msg = ModalRoute.of(context).settings.arguments as String;
  return Scaffold(
   backgroundColor: Colors.yellow,
   appBar: AppBar(
    title: Text("返回参数"),
   ),
   body: Text("得到的参数是:$msg"),
   floatingActionButton: FloatingActionButton(
    child: Icon(Icons.backspace),
    onPressed: () => Navigator.pop(context, "hi"),
   ),
  );
 }
}
4. 回传参数的接收:通过then方法
 Navigator.pushNamed(context, "route_Page4", arguments: "hello")
          .then((value) => print("返回的参数是$value")),

总结

页面间的跳转通过 Navigator 和 PageRoute来完成,有两种方式:基本路由 和命名路由;由于使用命名路由可能存在 路由找不到页面的情况,所以通过配置 onUnknownRoute 属性来确定,在路由找不到的时候进入到指定页面;通过通过介绍页面跳转的参数传递和介绍,完成了页面跳转的介绍。

以上就是详解Flutter的路由导航的详细内容,更多关于Flutter 路由导航的资料请关注编程网其它相关文章!

--结束END--

本文标题: 详解Flutter的路由导航

本文链接: https://www.lsjlt.com/news/122891.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 详解Flutter的路由导航
    目录Flutter 的路由导航 默认路由 页面跳转并传递参数 总结 Flutter 的路由导航 路由管理或导航管理:从一个页面平滑地过渡到另一个页面,我们需要有一个统一的机制来管理...
    99+
    2024-04-02
  • flutter的导航和路由使用示例详解
    目录导航和路由使用Navigator导航命名路由命名路由的局限使用路由Router同时使用Router和Navigator深度链接 Deep linking在 Android 上启用...
    99+
    2022-12-29
    flutter 导航路由 flutter 路由
  • Flutter使用pushpop方法及路由进行导航详解
    目录正文准备工作第一种导航方式第二种导航方式正文 在 Web/Mobile 应用程序中,导航是一个很重要的特性,因为它允许你从一个页面跳转到另一个页面。 在 flutter 应用程序...
    99+
    2024-04-02
  • flutter的导航和路由如何使用
    这篇“flutter的导航和路由如何使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“flutter的导航和路由如何使用”文...
    99+
    2023-07-04
  • Vue中的路由导航守卫导航解析流程
    目录全局前置守卫全局解析守卫全局后置钩子路由独享的守卫组件内的守卫可用的配置 API使用组合 API完整的导航解析流程正如其名,vue-router 提供的导航守卫主要用来通过跳转或...
    99+
    2023-05-16
    Vue路由导航守卫 Vue路由守卫
  • Flutter定义tabbar底部导航路由跳转的方法
    本文实例为大家分享了Flutter定义tabbar底部导航路由跳转的具体代码,供大家参考,具体内容如下 效果展示 整体实现的目录结构 第一步 把三个页面放到tabs里 Categ...
    99+
    2024-04-02
  • 快速理解Vue路由导航守卫
    目录一、全局守卫 1.全局前置守卫 2.全局解析守卫 3.全局后置钩子 三、路由独享的守卫 四、组件内的守卫 五、一个完整的导航解析流程 概念: “导航”表示路由正在发生变化 vue...
    99+
    2024-04-02
  • Flutter实现底部导航栏创建详解
    目录添加依赖项如何使用功能属性主题预览图代码Flutter web问题:Failed to load network image我的解决办法参考资料ConvexBottomBar是一...
    99+
    2024-04-02
  • Vue实现动态路由导航的示例
    目录1、导航守卫二、功能展示 三、原理四、功能实现⛵小结1、导航守卫 “导航” 表示路由正在发生改变 正如其名,vue-router 提供的导航守卫...
    99+
    2023-02-24
    Vue 动态路由导航 Vue 路由导航
  • Angular2中路由与导航的示例分析
    这篇文章主要为大家展示了“Angular2中路由与导航的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Angular2中路由与导航的示例分析”这篇文章吧...
    99+
    2024-04-02
  • Vue路由导航守卫的示例分析
    这篇文章将为大家详细讲解有关Vue路由导航守卫的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。概念:“导航”表示路由正在发生变化vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫...
    99+
    2023-06-22
  • 详解flutter如何实现局部导航管理
    目录引言局部导航是什么?实现步骤第一步第二步第三步技术点分析:1. 局部 Navigator 管理重点2. 返回上一级页面,与关闭整个弹窗怎么区分?3. 如何接收页面关闭时回传的数据...
    99+
    2023-01-11
    flutter局部导航管理 flutter 导航
  • Vue如何实现动态路由导航
    这篇文章主要介绍“Vue如何实现动态路由导航”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue如何实现动态路由导航”文章能帮助大家解决问题。1、导航守卫“导航” 表示路由正在发生改变正如其名,vu...
    99+
    2023-07-05
  • Vue Router4路由导航守卫实例全面解析
    目录前言一、什么是导航守卫二、全局前置守卫可选的第三个参数 next三、全局解析守卫四、全局后置钩子五、路由独享的守卫六、组件内的守卫可用的配置 API使用组合 API七、...
    99+
    2022-11-16
    Vue Router4路由导航 Vue Router
  • Vue 编程式路由导航的实现示例
    目录router- link的replace属性编程式路由导航缓存路由组件两个新的生命钩子router- link的replace属性 1.作用:控制路由跳转时操作浏览器历史记录的模...
    99+
    2024-04-02
  • vue如何挂载路由到头部导航
    小编给大家分享一下vue如何挂载路由到头部导航,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!路由是写好了,但正确的切换路由方式不...
    99+
    2024-04-02
  • Blazor路由与页面导航开发介绍
    在 Blazor 中,应用中的每个页面都是一个组件,通常在 razor 文件中定义,具有一个或多个指定路由。 路由大多数发生在客户端,而不涉及特定的服务器请求。 浏览器首先发出对应用...
    99+
    2024-04-02
  • 详解Android Flutter如何自定义动画路由
    目录简介自定义跳转使用flutter动画基础实现一个自定义的route总结简介 flutter中有默认的Route组件,叫做MaterialPageRoute,一般情况下我们在flu...
    99+
    2023-05-16
    Android Flutter自定义动画路由 Flutter自定义动画路由 Android Flutter 动画
  • Flutter路由框架Fluro使用教程详细讲解
    目录1.Navigator使用简介2.fluro1.配置2.使用方法3.路由拦截3.封装1.Navigator使用简介 使用Flutter 的Navigator 导航器可以实现页面的...
    99+
    2022-11-13
    Flutter路由框架Fluro Flutter Fluro
  • 解决Vue路由导航报错:NavigationDuplicated: Avoided redundant navigation to current location
    目录一、描述问题二、报错原因三、解决方法1、安装vue-router3.0以下版本2、为每一个Promise添加一个回调函数3、修改VueRouter原型对象上的push/repla...
    99+
    2023-01-30
    vue路由导航报错 vue 路由导航 vue NavigationDuplicated
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作