头图

【Flutter 3-2】Flutter进阶教程——路由Router和导航Navigator以及传值

作者 | 弗拉德
来源 | 弗拉德(公众号:fulade_me)

路由

在移动开发中,我们管页面之间的跳转叫做路由。在iOS中指的就是ViewController之间的跳转,在Android中就是Activity之间的跳转。路由是在移动端开发中非常重要的概念,它负责管理着各个页面之间的跳转还有传值工作,是必不可缺少的控件。

路由Map

为了方便我们管理跳转页面,Flutter为我们 提供了路由Map。
路由Map由在main.dart文件里面MaterialApp的参数routes管理,routes参数接收一个Map,Map里面就是我们项目的路由Map,你可以打开我的项目看到routes参数如下:

routes: {
  "/": (context) => MainPage(),
  "TextDemoPage": (context) => TextDemoPage(),
  "RaisedButtonDemoPage": (context) => RaisedButtonDemoPage(),
  "FlatButtonDemoPage": (context) => FlatButtonDemoPage(),
  "OutlineButtonDemoePage": (context) => OutlineButtonDemoePage(),
  "IconButtonDemoPage": (context) => IconButtonDemoPage(),
  "ContainerDemoPage": (context) => ContainerDemoPage(),
  "StatefulWidgetDemoPage": (context) => StatefulWidgetDemoPage(),
  "TextFieldDemoPage": (context) => TextFieldDemoPage(),
  "ImageDemoPage": (context) => ImageDemoPage(),
  "ColumnDemoPage": (context) => ColumnDemoPage(),
  "RowDemoPage": (context) => RowDemoPage(),
  "FlexibleDemoPage": (context) => FlexibleDemoPage(),
  "WrapDemoPage": (context) => WrapDemoPage(),
  "ListViewDemoPage": (context) => ListViewDemoPage(),
  "GridViewDemoPage": (context) => GridViewDemoPage(),
  "BottomNavigationBarDemoPage": (context) =>
      BottomNavigationBarDemoPage(),
  "RouterDemoPage": (context) => RouterDemoPage(),
  "RouterDemoPage2": (context) => RouterDemoPage2(),
},

其中key/对应的Value是整个Flutter项目的入口页面,这里需要另外一个很重要的参数initialRoute来配合使用
我们给initialRoute参数传值如下:

    initialRoute: "/",

这里表示的是Flutter项目的入口页面对应的key/,那么就会找到在routes/对应的页面,也就是MainPage()

需要注意的是:
默认我们新创建的Flutter项目中MaterialApp是带有home这个参数的,它也表示也是入口页面。如果我们想要要使用路由Map的方式来管理路由,一定需要把home参数删除掉。

Navigator.pushNamed

在我们声明好路由Map之后,我们就可以传入前面的key的值来实现页面的跳转工作,这个时候我们需要借助的API是Navigator.pushNamed

 @optionalTypeArgs
  static Future<T> pushNamed<T extends Object>(
    BuildContext context,    /// context
    String routeName, {     /// 路由Map中 key 的值
    Object arguments,        /// 参数
   }) {
    return Navigator.of(context).pushNamed<T>(routeName, arguments: arguments);
  }

只需要传入路由Map中key的值就可以实现跳转。
代码如下:

Navigator.pushNamed(context, "RouterDemoPage2");
由于我们是跨平台开发,Flutter帮助我们实现了跳转时候的转场动画,在iOS中动画是从右侧滑入到左侧,返回的时候同样是由左侧滑出到右侧。在Android则是由下方弹出显示到上方,返回的时候是由上方退出到下方弹出。

跳转传值

很多时候我们希望跳转的时候可以传值过去,这个时候我们可以通过自定义MaterialPageRoute来实现传值。

MaterialPageRoute({
    /// builder 方法
    @required this.builder,
    /// 配置信息
    RouteSettings settings,
    ///  默认情况下,当入栈一个新路由时,原来的路由仍然会被保存在内存中,如果想在路由没用的时候释放其所占用的所有资源,可以设置maintainState为false。
    this.maintainState = true,
    ///  表示新页面是否是全屏展示,在iOS中,如果fullscreenDialog为true,新页面将会从屏幕底部滑入
    bool fullscreenDialog = false,
})

我们只需要在构建新的页面的时候传入我们想要传递的参数即可

Navigator.of(context).push(MaterialPageRoute(builder: (context) {
  return RouterDemoPage3(passText: "Fulade");
}));

返回传值

传递返回值我们使用Navigatorpop方法即可

Navigator.pop(context, "pop value");

pop方法接收一个参数为返回的携带的参数,如果我们有多个参数,可以把它封装为ListMap即可。

返回值我们需要在push方法后面使用then来接收

Navigator.of(context)
    .push(MaterialPageRoute(builder: (context) {
  return RouterDemoPage3(passText: "Fulade");
})).then((value) {
  setState(() {
    title = value;
  });
});
then函数 涉及到了Dart语音中很重要的概念 await 和future,后面有机会我们再来详细的说。

想体验以上的示例的运行效果,可以到我的Github仓库项目flutter_app->lib->routes->router_page.dart查看,并且可以下载下来运行并体验。


公众号

一生只有一个职业:学生

29 声望
6 粉丝
0 条评论
推荐阅读
【Flutter 3-5】Flutter进阶教程——在Flutter中使用Lottie动画
在移动开发中总是需要展示一些动画特效,作为程序员的我们并不是很擅长用代码做动画,即便是有些动画可以实现,在跨平台的过程中也会因为API的差异性导致动画在各个平台中展示的有差异。所以为了释放程序员的双手...

弗拉德阅读 4.7k

封面图
程序员英语学习指南
动机为什么程序员要学习英语?工作:我们每天接触的代码都是英文的、包括很多技术文档也是英文的学习:最新最前沿的技术最开始都是只有English版本就业:学好英语让你的就业范围扩大到全球,而不只限于国内目标读...

九旬7阅读 689

安卓逆向之破解某成人APP播放次数限制
某成人水果APP非VIP用户存在播放次数限制,每天只能播放3次。超过3次需要购买VIP。 由于过于贫穷,于是抽空,对其安卓APP进行了逆向分析,最终成功破解了其播放次数限制。

悖论3阅读 1.4k评论 3

封面图
iOSer 年度总结|晋升的逻辑是什么
2022年是疫情3年的一个“小尾巴”,但它一点也不小,因为它是3年内大家感受最深的一年,也是影响最大的一年。身边同事们换工作、周围见闻都可以印证这个结论。

杭城小刘6阅读 1.9k

封面图
这一次,解决Flutter Dialog的各种痛点!
4.0版本做了重大调整,迁移请参照: SmartDialog 3.x 迁移 4.0本文内容已更新,文中内容及其代码皆为4.0用法前言Q:你一生中闻过最臭的东西,是什么?A:我那早已腐烂的梦。兄弟萌!!!我又来了!这次,我能自信...

小呆呆6661阅读 3.5k

封面图
iOS 健康共享失败如何解决
您要开始与之共享的对象必须已经连同他们的 iCloud 账户邮箱一起保存在您的“通讯录”中(iCloud 账户邮箱即 iCloud 账户绑定的邮箱信息,不是强制要求 @iCloud.com 邮箱)。

岚哲阅读 7.4k

网易云音乐开源全链路埋点方案-曙光埋点(dawn)
网易云音乐开源了曙光埋点 dawn,一个跨多端的全链路埋点解决方案,旨在构造一个完美的数据理想国。曙光埋点创造性的提出了埋点虚拟树(VTree),并在此基础上实现了诸多能力,解决大前端侧埋点困难、精度差、不...

云音乐技术团队2阅读 396

封面图

一生只有一个职业:学生

29 声望
6 粉丝
宣传栏