鸿蒙HarmonyOS实战开发:Navigation开发页面切换场景

道家人 · 2024-11-4 19:11:59

在应用开发中存在大量应用内多页面跳转场景，使用Navigation导航组件做统一的页面跳转管理，Navigation组件提供一系列属性方法来设置页面的标题栏、工具栏以及菜单栏的展示样式。还支持动态加载，navPathStack路由跳转等能力。
本文就以Navigation页面切换为例，展开讲解Navigation以上的技能点，资助开发者快速学习。
场景概述

导航组件Navigation一般作为Page页面的根容器，Navigation组件可以作为首页和内容页的容器。首页显示Navigation的子组件，内容页显示NavDestination的子组件，主页和内容页通过路由进行切换。
Navigation的路由切换的方式有两种：

在API Version 9上，首页导航内容必要共同NavRouter组件实现页面路由。
从API Version 10开始，首页推荐使用NavPathStack共同NavDestination属性进行页面路由。

本次示例主要先容NavPathStack的使用。
导航组件Navigation还可以通过mode属性实现多设备适配，具体请参考MULTIDEVICE_ADAPTATION.md
通过本篇文章的学习，你将学会：
1.如何使用NavPathStack路由转场
2.如何在Navigation中跨包引用hsp
3.如何在Navigation中使用动态加载
Router与Navigation实用场景对比

组件实用场景特点转场动画效果对比Router模块间与模块内页面切换通过每个页面的url实现模块间解耦页面平推转场效果Navigation模块内页面切换通过组件级路由统一起由管理向右折叠转场效果使用NavPathStack路由转场

NavPathStack有两种路由切换方法，一种是pushPath，如首页---->设置页面，通过使用this.pageStack.pushPath({ name: url })进行跳转；另外一种是pushPathByName，如首页---->详情页面，通过使用this.pageStack.pushPathByName(name, item)进行跳转，其中item为必要通报的参数。
NavPathStack支持pop、move、clear方法的使用；pop方法的作用是弹出路由栈栈顶元素，如首页进入商品详情页面，在详情页面使用this.pageStack.pop()方法返回到首页，clear方法的作用是清除栈中所有页面，如首页跳转到详情页面，详情页面再进入直播页面，在直播页面通过使用this.pageStack.clear()直接返回到首页。除此之外，另有popTo(回退路由栈到第一个名为name的NavDestination页面)、 popToIndex(回退路由栈到index指定的NavDestination页面)、moveToTop(将第一个名为name的NavDestination页面移到栈顶)、moveIndexToTop(将index指定的NavDestination页面移到栈顶)方法, 由于本示例暂时没有符合的按钮去承载这些功能，所以本示例未表现。
路由栈信息,如下所示：
1. 获取栈中所有NavDestination页面的名称：this.pageInfos.getAllPathName()
2. 获取index指定的NavDestination页面的参数信息：this.pageInfos.getParamByIndex(1)
3. 获取全部名为name的NavDestination页面的参数信息：this.pageInfos.getParamByName('pageTwo')
4. 获取全部名为name的NavDestination页面的位置索引：this.pageInfos.getIndexByName('pageOne')
5. 获取栈大小：this.pageInfos.size()
复制代码

实现思路

以Navigation组件为底子，通过路由管理实现页面之间的跳转。
开发步骤

Navigation中使用路由跳转页面

在onClick事件中，调用路由管理中的push方法。源码参考FunctionalScenes.ets
1. Column()
2. .onClick(() => {
3. DynamicsRouter.push(listData.routerInfo, listData.param);
4. })
复制代码
在DynamicsRouter的push方法中，通过NavPathStack.pushPath方法实现页面的跳转。源码参考DynamicsRouter
1. public static async push(routerInfo: RouterInfo, param?: string): Promise<void> {
2. const pageName: string = routerInfo.pageName;
3. const moduleName: string = routerInfo.moduleName;
4. ...
5. if (isImportSucceed) {
6. const builderName: string = moduleName + "/" + pageName;
7. DynamicsRouter.getNavPathStack().pushPath({ name: builderName, param: param });
8. }
9. }
复制代码

新模块中设置路由管理

添加必要加载的子模块的依赖，详细代码请参考oh-package.json。
1. "dependencies": {
2. "@ohos/event-propagation": "file:../../feature/eventpropagation",
3. ...
4. }
复制代码
添加动态import变量表达式必要的参数，此处在packages中设置的模块名必须和oh-package.json中设置的名称相同，详细代码请参考build-profile.json5。
1. ...
2. "buildOption": {
3. "arkOptions": {
4. "runtimeOnly": {
5. "packages": [
6. "@ohos/event-propagation",
7. ...
8. ]
9. }
10. }
11. }
复制代码
在routermodule模块中添加必要跳转的moduleName（模块名）和pageName（页面名），RouterInfo中设置的moduleName必须和oh-package.json中设置的名称相同，RouterInfo中添加的pageName是子模块中必要加载的页面，详细代码请参考RouterInfo.ets。
1. export class RouterInfo {
2. moduleName: string = '';
3. pageName: string = '';
5. constructor(moduleName: string, pageName: string) {
6. this.moduleName = moduleName;
7. this.pageName = pageName;
8. }
10. ...
11. static readonly EVENT_TRANSMISSION_SOLUTION: RouterInfo = new RouterInfo('@ohos/event-propagation', 'EventPropagation');
12. ...
13. }
复制代码
在WaterFlowData.ets中，将子模块要加载的页面，添加到列表中，详细代码请参考WaterFlowData.ets。
1. export const waterFlowData: SceneModuleInfo[] = [
2. ...
3. new SceneModuleInfo($r("app.media.event_propagation"), '阻塞事件冒泡', RouterInfo.EVENT_TRANSMISSION_SOLUTION, '其他', 1),
4. ...
5. }
复制代码
在子模块中添加路由管理的依赖，详细代码可参考oh-package.json。
1. ...
2. "dependencies": {
3. ...
4. "@ohos/dynamicsrouter": "file:../../feature/routermodule"
5. }
复制代码
在子模块中添加动态加载页面组件的接口harInit，其中pageName和RouterInfo中设置的pageName相同，import()接口中传入的参数，是页面的相对路径。详细代码可参考Index.ets。如果模块中有多个页面必要跳转，则必要设置多个pageName和页面路径，并且pageName和页面路径必要逐一对应，否则无法跳转到预期中的页面，详细代码可参考barchart模块中的Index.ets。
1. export function harInit(pageName: string) {
2. switch (pageName) {
3. case RouterInfo.EVENT_TRANSMISSION_SOLUTION.pageName:
4. import('./src/main/ets/view/EventPropagation');
5. break;
6. }
7. }
复制代码
在子模块中添加动态创建组件的方法，并注册到路由管理中，详细代码可参考EventPropagation.ets。
1. ...
2. @Builder
3. export function getEventPropagation(): void {
4. EventPropagation();
5. }
7. DynamicsRouter.registerRouterPage(RouterInfo.EVENT_TRANSMISSION_SOLUTION,wrapBuilder(getEventPropagation));
复制代码

末了

有很多小伙伴不知道学习哪些鸿蒙开发技能？不知道必要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习好坏常有必要的。
这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技能、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技能知识点。
希望这一份鸿蒙学习资料能够给大家带来资助，有必要的小伙伴自行领取，限时开源，先到先得~无套路领取！！
如果你是一名有履历的资深Android移动开发、Java开发、前端开发、对鸿蒙感爱好以及转行职员，可以直接领取这份资料
获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料
鸿蒙（HarmonyOS NEXT）最新学习路线

HarmonOS底子技能

HarmonOS就业必备技能
HarmonOS多媒体技能

鸿蒙NaPi组件进阶

HarmonOS高级技能

初识HarmonOS内核
实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也预备了一份联合鸿蒙官方发布笔记整理收纳的一套体系性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门讲授视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。
获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料
《鸿蒙 (OpenHarmony)开发入门讲授视频》