当前位置：首页 > article >正文

HarmonyOs鸿蒙开发实战(20)=＞一文学会基础使用组件导航Navigation

article 2024/11/24 2:05:04

敲黑板，以下是重点技巧。文章末尾有实战项目效果截图及代码截图可参考

1.概要

Navigation是路由导航的根视图容器
Navigation组件主要包含导航页（NavBar）和子页（NavDestination），导航页不存在页面栈中，导航页和子页，以及子页之间可以通过路由操作进行切换。
推荐结合NavPathStack实现页面路由。

2.设置显示模式=> Navigation组件通过mode属性设置页面的显示模式。

自适应模式:Navigation组件默认为自适应模式(NavigationMode.Auto),当页面宽度大于等于一定阈值时，Navigation组件采用分栏模式，反之采用单栏模式。
单页面模式
分栏模式

3.路由操作

Navigation路由相关的操作都是基于页面栈NavPathStack提供的方法进行，每个Navigation都需要创建并传入一个NavPathStack对象，用于管理页面。主要涉及页面跳转、页面返回、页面替换、页面删除、参数获取、路由拦截等功能。

4.页面跳转=>

4.1.普通跳转，通过页面的name去跳转，并可以携带param。

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

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

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

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

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

5.页面返回=>NavPathStack通过Pop相关接口去实现页面返回功能。

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

6.页面替换=>NavPathStack通过Replace相关接口去实现页面替换功能。

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

7.参数获取=>NavPathStack通过Get相关接口去获取页面的一些参数。

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

8.实战项目使用效果及代码截图=> 点击添加按钮跳转二级页面，点击返回可返回上一级页面