【鸿蒙学习】HarmonyOS应用开发者基础 - 构建更加丰富的页面之Navigation（二）

学完时间：2024年8月14日

一、前言叨叨

学习HarmonyOS的第六课，人数又成功的降了500名左右，到了3575人了。
本文接上一文章【鸿蒙学习】HarmonyOS应用开发者基础 - 构建更加丰富的页面（一），继续记录构建更加丰富页面中的Navigation组件。

本文内容过多，针对学习的内容进行整理，阅读的小伙伴在学习过程中，可以直接返回华为官方进行学习，本文仅作于知识梳理，重点内容整理。

<HarmonyOS第一课>构建更加丰富的页面

二、页面生命周期

• aboutToAppear：在创建自定义组件后，执行其build()函数之前执行（NavDestination创建之前），允许在该方法中改变状态变量，更改将在后续执行build()函数中生效。
• onWillAppear：NavDestination创建后，挂载到组件树之前执行，在该方法中更改状态变量会在当前帧显示生效。
• onAppear：通用生命周期事件，NavDestination组件挂载到组件树时执行。
• onWillShow：NavDestination组件布局显示之前执行，此时页面不可见（应用切换到前台不会触发）。
• onShown：NavDestination组件布局显示之后执行，此时页面已完成布局。
• onWillHide：NavDestination组件触发隐藏之前执行（应用切换到后台不会触发）。
• onHidden：NavDestination组件触发隐藏后执行（非栈顶页面push进栈，栈顶页面pop出栈或应用切换到后台）。
• onWillDisappear：NavDestination组件即将销毁之前执行，如果有转场动画，会在动画前触发（栈顶页面pop出栈）。
• onDisappear：通用生命周期事件，NavDestination组件从组件树上卸载销毁时执行。
• aboutToDisappear：自定义组件析构销毁之前执行，不允许在该方法中改变状态变量。

三、Navigation组件

1、基本概念

Navigation是路由容器组件，一般作为首页的根容器，包括单栏(Stack)、分栏(Split)和自适应(Auto)三种显示模式。Navigation组件适用于模块内和跨模块的路由切换，一次开发，多端部署场景。通过组件级路由能力实现更加自然流畅的转场体验，并提供多种标题栏样式来呈现更好的标题和内容联动效果。在不同尺寸的设备上，Navigation组件能够自适应显示大小，自动切换分栏展示效果。
Navigation组件主要包含​导航页(NavBar)和子页(NavDestination)。导航页由**标题栏(Titlebar，包含菜单栏menu)、内容区(Navigation子组件)和工具栏(Toolbar)**组成，其中导航页可以通过hideNavBar属性进行隐藏，导航页不存在页面栈中，导航页和子页，以及子页之间可以通过路由操作进行切换。

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

2、页面显示模式

Navigation组件通过mode属性设置页面的显示模式。
主要分为：

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

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

• 单页面模式
  将mode属性设置为NavigationMode.Stack，Navigation组件即可设置为单页面显示模式。

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

• 分栏模式
  将mode属性设置为NavigationMode.Split，Navigation组件即可设置为分栏显示模式。
  

3.标题栏模式

标题栏在界面顶部，用于呈现界面名称和操作入口，Navigation组件通过titleMode属性设置标题栏模式。

主要分为：

• Mini模式
  普通型标题栏，用于一级页面不需要突出标题的场景。

Navigation() {...
}
.titleMode(NavigationTitleMode.Mini)

• Full模式
  强调型标题栏，用于一级页面需要突出标题的场景。

Navigation() {...
}
.titleMode(NavigationTitleMode.Full)

3、其他设置

• 菜单栏
  菜单栏位于Navigation组件的右上角，开发者可以通过menus属性进行设置。menus支持Array和CustomBuilder两种参数类型。使用Array类型时，竖屏最多支持显示3个图标，横屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。
• 工具栏
  工具栏位于Navigation组件的底部，开发者可以通过toolbarConfiguration属性进行设置。
• 路由操作
  Navigation路由相关的操作都是基于页面栈NavPathStack提供的方法进行，每个Navigation都需要创建并传入一个NavPathStack对象，用于管理页面。主要涉及页面跳转、页面返回、页面替换、页面删除、参数获取、路由拦截等功能。

从API version 12开始，页面栈允许被继承。开发者可以在派生类中自定义属性和方法，也可以重写父类的方法。派生类对象可以替代基类NavPathStack对象使用。具体

4、路由操作

• 页面跳转
  NavPathStack通过Push相关的接口去实现页面跳转的功能，主要分为以下三类:
  普通跳转，通过页面的name去跳转，并可以携带param。

this.pageStack.pushPath({ name: "PageOne", param: "PageOne Param" })
this.pageStack.pushPathByName("PageOne", "PageOne Param")

带返回回调的跳转，跳转时添加onPop回调，能在页面出栈时获取返回信息，并进行处理。

this.pageStack.pushPathByName('PageOne', "PageOne Param", (popInfo) => {
console.log('Pop page name is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result))
});

带错误码的跳转，跳转结束会触发异步回调，返回错误码信息。

this.pageStack.pushDestinationByName('PageOne', "PageOne Param")
.catch((error: BusinessError) => {console.error(`Push destination failed, error code = ${error.code}, error.message = ${error.message}.`);
}).then(() => {
console.error('Push destination succeed.');
});

• 页面返回
  NavPathStack通过Pop相关接口去实现页面返回功能。

// 返回到上一页
this.pageStack.pop()
// 返回到上一个PageOne页面
this.pageStack.popToName("PageOne")
// 返回到索引为1的页面
this.pageStack.popToIndex(1)
// 返回到根首页（清除栈中所有页面）
this.pageStack.clear()

• 页面替换
  NavPathStack通过Replace相关接口去实现页面替换功能。

// 将栈顶页面替换为PageOne
this.pageStack.replacePath({ name: "PageOne", param: "PageOne Param" })
this.pageStack.replacePathByName("PageOne", "PageOne Param")

• 页面删除
  NavPathStack通过Remove相关接口去实现删除页面栈中特定页面的功能。

// 删除栈中name为PageOne的所有页面
this.pageStack.removeByName("PageOne")
// 删除指定索引的页面
this.pageStack.removeByIndexes([1,3,5])

• 参数获取
  NavPathStack通过Get相关接口去获取页面的一些参数。

// 获取栈中所有页面name集合
this.pageStack.getAllPathName()
// 获取索引为1的页面参数
this.pageStack.getParamByIndex(1)
// 获取PageOne页面的参数
this.pageStack.getParamByName("PageOne")
// 获取PageOne页面的索引集合
this.pageStack.getIndexByName("PageOne")

• 路由拦截
  NavPathStack提供了setInterception方法，用于设置Navigation页面跳转拦截回调。该方法需要传入一个NavigationInterception对象，该对象包含三个回调函数：

• willShow
  页面跳转前回调，允许操作栈，在当前跳转生效。

• didShow
  页面跳转后回调，在该回调中操作栈会在下一次跳转生效。

• modeChange
  Navigation单双栏显示状态发生变更时触发该回调。

说明
无论是哪个回调，在进入回调时页面栈都已经发生了变化。

5、子页面

NavDestination是Navigation子页面的根容器，用于承载子页面的一些特殊属性以及生命周期等。NavDestination可以设置独立的标题栏和菜单栏等属性，使用方法与Navigation相同。NavDestination也可以通过mode属性设置不同的显示类型，用于满足不同页面的诉求。
页面显示类型

• 标准类型
  NavDestination组件默认为标准类型，此时mode属性为NavDestinationMode.STANDARD。标准类型的NavDestination的生命周期跟随其在NavPathStack页面栈中的位置变化而改变。
• 弹窗类型
  NavDestination设置mode为NavDestinationMode.DIALOG弹窗类型，此时整个NavDestination默认透明显示。弹窗类型的NavDestination显示和消失时不会影响下层标准类型的NavDestination的显示和生命周期，两者可以同时显示。

6、页面转场

Navigation默认提供了页面切换的转场动画，通过页面栈操作时，会触发不同的转场效果（Dialog类型的页面默认无转场动画），Navigation也提供了关闭系统转场、自定义转场以及共享元素转场的能力。

• 关闭转场
  全局关闭、单次关闭
• 自定义转场
• 共享元素转场