ArkUI中的Navigation全面解析：构建高效导航体系(一)

目录

1.组件导航(Navigation)

1.设置页面显示模式

1.自适应模式(Auto)

2.单页面模式(Stack)

3.分栏模式(Split)

2.设置标题栏样式

1.Mini模式

2.Full模式

3.Free模式

3.设置菜单栏

4.设置工具栏

5.路由操作

1.页面跳转

2.页面返回

3.页面替换

4.页面删除

5.移动页面

6.参数获取

7.路由拦截

8.单例跳转

6.参考文档

7.文章中的实例代码

        在ArkUI中，UI显示的内容均为组件，由框架直接提供的称为系统组件，由开发者定义的称为自定义组件。

        这篇文章介绍在鸿蒙开发中如何自定义组件(本文中的实例中的代码均在DevEco studio 5.1.1 Release 上运行编译通过 )。

1.组件导航(Navigation)

        组件导航（Navigation）主要用于实现Navigation页面（NavDestination）间的跳转，支持在不同Navigation页面间传递参数，提供灵活的跳转栈操作，从而更便捷地实现对不同页面的访问和复用。本文将从组件导航（Navigation）的显示模式、路由操作、子页面管理、跨包跳转以及跳转动效等几个方面进行详细介绍。        

        Navigation是路由导航的根视图容器，一般作为页面（@Entry）的根容器，包括单栏（Stack）、分栏（Split）和自适应（Auto）三种显示模式。Navigation组件适用于模块内和跨模块的路由切换，通过组件级路由能力实现更加自然流畅的转场体验，并提供多种标题栏样式来呈现更好的标题和内容联动效果。一次开发，多端部署场景下，Navigation组件能够自动适配窗口显示大小，在窗口较大的场景下自动切换分栏展示效果。

        Navigation组件主要包含​导航页和子页。导航页由标题栏（包含菜单栏）、内容区和工具栏组成，可以通过hideNavBar属性进行隐藏，导航页不存在路由栈中，与子页，以及子页之间可以通过路由操作进行切换。

        在API version 9上，Navigation需要配合NavRouter组件实现页面路由。从API version 10开始，更推荐使用NavPathStack实现页面路由。

1.设置页面显示模式

        Navigation的页面显示属性是NavigationModel类型的model属性控制的。它的定义如下；

declare enum NavigationMode {

    Stack,  // 单页模式
    Split,  // 分栏模式
    Auto    // 自适应模式
}

1.自适应模式(Auto)

        Navigation组件默认为自适应模式，此时mode属性为NavigationMode.Auto。自适应模式下，当页面宽度大于等于一定阈值( API version 9及以前：520vp，API version 10及以后：600vp )时，Navigation组件采用分栏模式，反之采用单栏模式。

Navigation() {
  // ...
}
.mode(NavigationMode.Auto)

2.单页面模式(Stack)

        单页面模式适用于窄屏设备，发生路由跳转时，整个页面都会被替换。

        单页面布局示意图如下：

图1.单页面模式

        我们可以通过下面的代码设置导航栏模式为单页面模式。

Navigation() {
  // ...
}
.mode(NavigationMode.Stack)

3.分栏模式(Split)

        分栏模式适用于宽屏设备，分为左右两部分，发生路由跳转时，只有右边子页会被替换。

        图2.分栏模式

        我们可以通过下面的代码设置导航栏模式为分栏模式：

Navigation() {
  // ...
}
.mode(NavigationMode.Split)

2.设置标题栏样式

        导航栏的标题样式