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

embedded/2024/11/24 9:56:19/

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

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.实战项目使用效果及代码截图=> 点击添加按钮跳转二级页面,点击返回可返回上一级页面

代码步骤截图=>

9.大功告成


http://www.ppmy.cn/embedded/140096.html

相关文章

Python数据结构之链表

一、链表 1、目的 解决顺序表存储数据有上限,并且插入和删除操作效率低的问题。 2、概念 链表:链式存储的线性表,使用随机的物理内存存储逻辑上连续的数据。 链表的组成:由一个个结点组成 结点:由数据域和链接域组…

用Python爬虫“偷窥”1688搜索词推荐:一场数据的奇妙冒险

在这个信息爆炸的时代,数据就像是藏在深海里的宝藏,等待着勇敢的探险家去发掘。今天,我们将化身为数据海盗,用Python作为我们的船只,航向1688的海域,去“偷窥”那些神秘的搜索词推荐。准备好了吗&#xff1…

观察者模式和订阅模式

观察者模式和订阅模式在概念上是相似的,它们都涉及到一个对象(通常称为“主题”或“发布者”)和多个依赖对象(称为“观察者”或“订阅者”)之间的关系。然而,尽管它们有相似之处,但在某些方面也…

深度学习每周学习总结J6(ResNeXt-50 算法实战与解析 - 猴痘识别)

🍨 本文为🔗365天深度学习训练营 中的学习记录博客🍖 原作者:K同学啊 | 接辅导、项目定制 目录 0. 总结ResNeXt基本介绍 1. 设置GPU2. 导入数据及处理部分3. 划分数据集4. 模型构建部分5. 设置超参数:定义损失函数&…

LeetCode //C - 468. Validate IP Address

468. Validate IP Address Given a string queryIP, return “IPv4” if IP is a valid IPv4 address, “IPv6” if IP is a valid IPv6 address or “Neither” if IP is not a correct IP of any type. A valid IPv4 address is an IP in the form “ x 1 . x 2 . x 3 . x …

多模块开发环境中@autuwired注解注入Service层、Dao层组件注入失败

目录 多模块开发下Service模块中的组件在Web模块中注入失败 多模块开发下dao模块中的接口(继承JPA/CrudRepository)组件在Web模块中注入失败(单模块开发中没有问题); 引发思考SpringBootApplication和ComponentScan比较 注意事项: 结论&a…

Lucene数据写入与数据刷盘机制

一、Lucene数据写入流程 Lucene的数据写入流程主要涉及到文档的创建、索引的添加以及最终写入磁盘的过程。 文档的创建 Lucene中的文档(Document)是索引的基本单位,每个文档都包含了一系列的字段(Field)。这些字段可以…

Manus Xsens Metagloves虚拟现实手套

Manus Xsens Metagloves新一代手指捕捉 Xsens Metagloves经过专门开发,可与Xsens MVN软件无缝协作。只需点击一下,即可将精确的量子手指跟踪添加到Xsens设置中。 手指追踪的全新黄金标准 我们的新跟踪系统为Xsens套装提供了富有表现力的手指数据。使用…