HarmonyOS NEXT应用开发——Navigation开发页面切换场景范例

简介

在应用开发时，我们常常遇到，需要在应用内多页面跳转场景时中使用Navigation导航组件做统一的页面跳转管理，它提供了一系列属性方法来设置页面的标题栏、工具栏以及菜单栏的各种展示样式。除此之外还拥有动态加载，navPathStack路由跳转。

本文就以Navigation页面切换范例为例，来展开讲解Navigation以上的技术点，帮助开发者快速学习。

场景概述

ArkUI中，应用内导航组件Navigation一般作为Page页面的根容器， Navigation组件主要包含主页和内容页。
主页内容区默认首页显示导航内容(Navigation的子组件) 或非首页显示(NavDestination的子组件)，首页和非首页通过路由进行切换。
Navigation的路由切换的方式有两种，本次示例主要介绍NavPathStack的使用。

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

通过本篇文章的学习，你将学会：
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页面移到栈顶)方法, 由于本示例暂时没有合适的按钮去承载这些功能，所以本示例未体现。
- 路由栈信息,如下所示

获取栈中所有NavDestination页面的名称：this.pageInfos.getAllPathName()
获取index指定的NavDestination页面的参数信息：this.pageInfos.getParamByIndex(1)
获取全部名为name的NavDestination页面的参数信息：this.pageInfos.getParamByName('pageTwo')
获取全部名为name的NavDestination页面的位置索引：this.pageInfos.getIndexByName('pageOne')
获取栈大小：this.pageInfos.size()

实现思路

通过this.pageStack.pushPath({ name: url param: item })进行页面之间的跳转，navpathstack详情。

开发步骤

通过onclick事件调用NavPathStack.pushPath方法跳转页面。源码参考MainPage.ets

Column()
  .onClick(() => {
    this.pageStack.pushPath({ name: listData.moduleName, param: listData.param });
  })

为了能让大家更好的学习鸿蒙（HarmonyOS NEXT）开发技术，这边特意整理了《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05

《鸿蒙开发学习手册》：`https://qr21.cn/FV7h05`

入门必看：https://qr21.cn/FV7h05
1. 应用开发导读(ArkTS)
2. ……

HarmonyOS 概念：https://qr21.cn/FV7h05

系统定义
技术架构
技术特性
系统安全

如何快速入门：https://qr21.cn/FV7h05
1. 基本概念
2. 构建第一个ArkTS应用
3. ……

开发基础知识：https://qr21.cn/FV7h05
1. 应用基础知识
2. 配置文件
3. 应用数据管理
4. 应用安全管理
5. 应用隐私保护
6. 三方应用调用管控机制
7. 资源分类与访问
8. 学习ArkTS语言
9. ……

基于ArkTS 开发：https://qr21.cn/FV7h05
1. Ability开发
2. UI开发
3. 公共事件与通知
4. 窗口管理
5. 媒体
6. 安全
7. 网络与链接
8. 电话服务
9. 数据管理
10. 后台任务(Background Task)管理
11. 设备管理
12. 设备使用信息统计
13. DFX
14. 国际化开发
15. 折叠屏系列
16. ……