简介

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

页面跳转

先看效果

Flutter基础之Navigator路由跳转

直接跳转

Navigator.push(BuildContext context, Route route)

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

Flutter基础之Navigator路由跳转

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

注册跳转

Navigator.pushNamed(String routeName, arguments: arguments)

Flutter不仅提供了直接跳转还支撑自定义路由跳转,运用 Navigator.pushName()函数,传入需求跳转页面的路由,完成页面跳转,但是路由必须先要进行注册。相似Android中的Activity需求在清单文件中注册相同。页面路由也需求注册。

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

Flutter基础之Navigator路由跳转

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

Flutter基础之Navigator路由跳转

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

Flutter基础之Navigator路由跳转

跳转返回

Navigator.pop(BuildContext context, [ result ])

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

Flutter基础之Navigator路由跳转

页面传值

Navigator.pushNamed(String routeName, arguments: arguments)

和Intent相同,Flutter中的Navigator不仅能够进行页面之间的跳转,还能够进行页面的传值。

Flutter基础之Navigator路由跳转

Navigator的push办法的第二个参数arguments类型为可空的Object。一般用来表示需求传递的数据。

先看效果:

Flutter基础之Navigator路由跳转

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

Flutter基础之Navigator路由跳转

接纳传递的数据:

Flutter基础之Navigator路由跳转

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

数据回传

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

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

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

Flutter基础之Navigator路由跳转

Navigator.pop函数同样提供了result参数,用来回传数据。下面看看详细运用。

Flutter基础之Navigator路由跳转

当第二页收到第一页传递来的数据后,需求做出回应。这儿调用Navigatpr.pop办法,一起回传数据告知第一页数据已经收到。

Flutter基础之Navigator路由跳转

由于接纳返回数据是耗时操作,这儿运用async 和await接纳返回是数据。

数据打印如下:

Flutter基础之Navigator路由跳转

总结

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