Flutter基础之Navigator路由跳转

简介

Flutter中页面之间的跳转是由Navigator完成的,Navigator用来实现不同Widget之间的跳转和数据传递。本文介绍页面跳转的两种方式及数据传递,满足日常开发需求。

页面跳转

先看效果

直接跳转

Navigator.push(BuildContext context, Route route)

Flutter提供的Navigator支持直接跳转。如图所示:

Navigator调用push方法将SecondNavigatorRoute()实例 压入栈中,进行页面显示。

注册跳转

Navigator.pushNamed(String routeName, arguments: arguments)

Flutter不仅提供了直接跳转还支持自定义路由跳转,使用 Navigator.pushName()函数,传入需要跳转页面的路由,实现页面跳转,但是路由必须先要进行注册。类似Android中的Activity需要在清单文件中注册一样。页面路由也需要注册。

  1. 首页在MyApp中进行路由注册。

routes 接收map作为值。定义路由和对应的页面,将secondNavigatorRoute对应的路由注册进去。

  1. 注册完路由后,使用Navigator.pushName进行页面跳转。

跳转返回

Navigator.pop(BuildContext context, [ result ])

页面之间的跳转使用Navigator的push方法,对应的跳转返回需要调用Navigator的pop方法进行页面的关闭。

页面传值

Navigator.pushNamed(String routeName, arguments: arguments)

和Intent一样,Flutter中的Navigator不仅可以进行页面之间的跳转,还可以进行页面的传值。

Navigator的push方法的第二个参数arguments类型为可空的Object。通常用来表示需要传递的数据。

先看效果:

在第一页跳转时,给arguments参数赋值,当跳转到第二页时,接收第一页传递过来的数据。

接收传递的数据:

使用ModalRoute.of(context)?.settings.arguments.toString() 接收第一页传递过来的数据,这里传递的是字符串,所以直接toString显示,如果传递的是map,接收时需要转换成map接收。对比android,使用Flutter进行页面传递数据不需要对数据进行序列化。

数据回传

Navigator.pop(BuildContext context, [ T? result ])

在日常开发中我们都会遇到这样的场景,从相册中获取图片,回传给上一个页面,Flutter同样支持数据的回传。

先来看Navigator.pop的构造函数。

Navigator.pop 函数同样提供了result参数,用来回传数据。下面看看具体使用。

当第二页收到第一页传递来的数据后,需要做出回应。这里调用Navigatpr.pop方法,同时回传数据告诉第一页数据已经收到。

由于接收返回数据是耗时操作,这里使用async 和await接收返回是数据。

数据打印如下:

总结

Flutter中的页面跳转和数据传递比较简单,看完本篇文章日常开发不成问题。如果使用路由跳转,切记一定要提前注册路由表。

相关推荐
小哥Mark1 小时前
Flutter开发鸿蒙年味 + 实用实战应用|绿色烟花:电子烟花 + 手持烟花
flutter·华为·harmonyos
李堇3 小时前
android滚动列表VerticalRollingTextView
android·java
一只大侠的侠3 小时前
Flutter开源鸿蒙跨平台训练营 Day 3
flutter·开源·harmonyos
lxysbly4 小时前
n64模拟器安卓版带金手指2026
android
一只大侠的侠4 小时前
【Harmonyos】Flutter开源鸿蒙跨平台训练营 Day 2 鸿蒙跨平台开发环境搭建与工程实践
flutter·开源·harmonyos
微祎_5 小时前
Flutter for OpenHarmony:构建一个 Flutter 平衡球游戏,深入解析动画控制器、实时物理模拟与手势驱动交互
flutter·游戏·交互
ZH15455891316 小时前
Flutter for OpenHarmony Python学习助手实战:面向对象编程实战的实现
python·学习·flutter
renke33647 小时前
Flutter for OpenHarmony:构建一个 Flutter 色彩调和师游戏,RGB 空间探索、感知色差计算与视觉认知训练的工程实现
flutter·游戏
游戏开发爱好者87 小时前
日常开发与测试的 App 测试方法、查看设备状态、实时日志、应用数据
android·ios·小程序·https·uni-app·iphone·webview
王码码20357 小时前
Flutter for OpenHarmony 实战之基础组件:第三十一篇 Chip 系列组件 — 灵活的标签化交互
android·flutter·交互·harmonyos