小菜鸡开始学习flutter之三十

你太有才了
50 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第30天，点击查看活动详情

今日目标

昨天我们学习了基本路由的相关知识，今天继续学习命名路由的知识。
在小型项目中可能基本路由就已经满足了大家的需求，但是在中大型项目中我们就需要使用命名路由来统一管理我们的路由信息。

命名路由

命名路由的配置和我们使用的前端框架中的router差不多，我们需要在MaterialApp这个根组件下添加routes这个属性，然后添加我们需要的路由信息即可

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Tabs(),
      routes: {'/search': (context) => SearchPage()},
    );
  }
}

这里我们添加了一个search页面路由信息，在需要跳转的地方通过Navigator.pushNamed(context, '/search')就可以跳转了

Video_2022-06-27_142314.gif
贯彻组件化编程思维，我们还可以将routes抽离出去成为一个单独的routes.dart文件便于管理和维护。 在老版本的flutter中命名路由是不支持传值的，需要通过一些第三方库来实现，不过在新版本flutter中已经可以通过命名路由来传参了,大家可以参考一下官方文档

路由替换

比如我们从用户中心页面跳转到registerFirst页面，然后从registerFirst页面通过pushReplacementNamed跳转到registerSecond页面，这个时候当我们点击registerSecond的返回按钮的时候它会直接返回到初始页面。
Navigator.of(context).pushReplacementNamed('/registerSecond')

返回到根路由

比如我们从用户中心跳转到registerFirst页面，然后从registerFirst页面跳转到registerSecond页面，然后从resiterSecond跳转到registerThird页面，这个时候我们从registerThird注册成功后返回到用户中心，就需要使用到返回根路由的方法。

  • 思路一：我们可以再每一次跳转的时候都通过 Navigator.of(context).pushReplacementNamed()方法来实现，这样当我们返回的时候就会回到我们的初始跳转页面。
  • 思路二：通过pushAndremoveUntil方法来实现
Navigator.of(context).pushAndRemoveUntil(new MaterialPageRotue(builder: (context) => new Tabs()), (route) => route == null)

ending

持续学习~~ 如有不正确的地方还请指正

avatar
文章
阅读
粉丝