Flutter 路由与导航

最新推荐文章于 2024-08-02 10:26:18 发布

iOS发呆君

最新推荐文章于 2024-08-02 10:26:18 发布

阅读量440

点赞数

文章标签： iOS开发 iOS Flutter 路由与导航编程开发

本文链接：https://blog.csdn.net/iOSxiaodaidai/article/details/113869786

版权

本文详细介绍了Flutter中的路由与导航管理，包括路由管理、Navigator的使用、MaterialPageRoute的实现，以及基本路由和命名路由的区别和应用场景。此外，还讲解了如何通过路由进行页面传参。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章搬运来源：https://juejin.cn/post/6930508768983646216
作者： SunshineBrother

对iOS开发感兴趣，可以看一下作者的iOS交流群：812157648，大家可以在里面吹水、交流相关方面的知识，群里还有我整理的有关于面试的一些资料，欢迎大家加群，大家一起开车

Flutter 路由与导航

如果说 UI 框架的视图元素的基本单位是组件，那应用程序的基本单位就是页面了。对于拥有多个页面的应用程序而言，如何从一个页面平滑地过渡到另一个页面，我们需要有一个统一的机制来管理页面之间的跳转，通常被称为路由管理或导航管理。

我们首先需要知道目标页面对象，在完成目标页面初始化后，用框架提供的方式打开它。比如，在 Android/iOS 中我们通常会初始化一个 Intent 或 ViewController，通过 startActivity 或 pushViewController 来打开一个新的页面

1、路由管理

Flutter 路由管理中有两个非常重要的概念：

Route：路由是应用程序页面的抽象，对应 Android 中 Activity 和 iOS 中的 ViewController，由 Navigator 管理。
Navigator：Navigator 是一个组件，管理和维护一个基于堆栈的历史记录，通过 push 和 pop 进行页面的跳转。

根据是否需要提前注册页面标识符，Flutter 中的路由管理可以分为两种方式：

基本路由。无需提前注册，在页面切换时需要自己构造页面实例。
命名路由。需要提前注册页面标识符，在页面切换时通过标识符直接打开新的路由。

2、Navigator

const Navigator({
   Key key,
   this.pages = const <Page<dynamic>>[],
   this.onPopPage,
   this.initialRoute,
   this.onGenerateInitialRoutes = Navigator.defaultGenerateInitialRoutes,
   this.onGenerateRoute,
   this.onUnknownRoute,
   this.transitionDelegate = const DefaultTransitionDelegate<dynamic>(),
   this.reportsRouteUpdateToEngine = false,
   this.observers = const <NavigatorObserver>[],
 })
复制代码

Navigator 继承自 StatefulWidget，它也是小组件，它有很多相关静态函数，可以帮我们达到页面跳转和数据交互的功能