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

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

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.大功告成

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/920272.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

python从入门到精通:pyspark实战分析

前言 spark:Apache Spark是用于大规模数据(large-scala data)处理的统一(unified)分析引擎。简单来说,Spark是一款分布式的计算框架,用于调度成本上千的服务器集群,计算TB、PB乃至E…

Ubuntu从入门到精通(二)远程和镜像源配置齐全

Ubuntu从入门到精通(二) 1 常见操作配置 1.1 英文语言配置 1.1.1 打开设置 1.1.2 设置语言为英文 1.1.3 重启生效 1.1.4 再次进入,选择更新名字 1.1.5 再次进入,发现已经变成了英文 1.2 输入法配置 1.3 rustdesk安装 1.3.1 Windows系统配置 登陆:https://github.com…

HTML5拖拽API学习 托拽排序和可托拽课程表

文章目录 前言拖拽API核心概念拖拽式使用流程例子注意事项综合例子🌰 可拖拽课程表拖拽排序 前言 前端拖拽功能让网页元素可以通过鼠标或触摸操作移动。HTML5 提供了标准的拖拽API,简化了拖放操作的实现。以下是拖拽API的基本使用指南: 拖拽…

华为Ensp模拟器配置OSPF路由协议

目录 简介 实验步骤 Pc配置 路由器配置 OSPF配置 交换机配置 简介 开放式最短路径优先 (OSPF) 协议深度解析 简介 开放式最短路径优先(Open Shortest Path First, OSPF)是一种内部网关协议(IGP),用于在自治系统…

【最新鸿蒙应用开发】——合理使用自定义弹框

自定义弹窗选型 合理选择不同的系统能力实现弹窗,有利于提升应用开发效率,实现更好的功能需求,因此了解自定义弹窗的选型和差异非常重要。在应用开发中,为了选择出合适的弹窗选型,从使用场景上,需要重点关…

自动化爬虫Selenium

自动化爬虫Selenium 这篇文章, 我们将要学习自动化爬虫的知识啦。 目录 1.Selenium的基本操作 2.用Selenuim获取数据 3.当当网数据获取 4.实战 一、Selenium的基本操作 首先, 我们在使用Selenium之前, 需要做两件事情。第一件事情, 就是安装第三方库, 第二件事情, 就是…

开源可视化工具对比:JimuReport VS DataEase

在当今数据驱动的时代,高效的数据可视化工具成为企业洞察业务、做出决策的关键利器。那对于企业来讲如何选择BI产品呢? 在开源可视化工具的领域中,JimuReport和DataEase 以其独特的优势脱颖而出,究竟谁更胜一筹呢?让我…

Jenkins的环境部署

day22 回顾 Jenkins 简介 官网Jenkins Jenkins Build great things at any scale The leading open source automation server, Jenkins provides hundreds of plugins to support building, deploying and automating any project. 用来构建一切 其实就是用Java写的一个项目…

Ubuntu22.04配置强化学习环境及运行相关Demo

什么是强化学习 强化学习(Reinforcement Learning,简称 RL)是机器学习中的一个重要分支,属于一种基于试错机制的学习方法。它通过让智能体(Agent)与环境(Environment)进行交互&…

AI 写作(一):开启创作新纪元(1/10)

一、AI 写作:重塑创作格局 在当今数字化高速发展的时代,AI 写作正以惊人的速度重塑着创作格局。AI 写作在现代社会中占据着举足轻重的地位,发挥着不可替代的作用。 随着信息的爆炸式增长,人们对于内容的需求日益旺盛。AI 写作能够…

丹摩征文活动 | AI创新之路,DAMODEL助你一臂之力GPU

目录 前言—— DAMODEL(丹摩智算) 算力服务 直观的感受算力提供商的强大​ 平台功能介绍​ 镜像选择 云磁盘创建 总结 前言—— 只需轻点鼠标,开发者便可拥有属于自己的AI计算王国 - 从丰富的GPU实例选择,到高性能的云磁盘,再到预配置的深度学习…

echarts的图例换行并对齐

现状: 期望: 实现方式: 通过对legend的formatter和textStyle组合设置宽度来实现,代码如下 这里会出现一个问题,发现设置了width没有效果,刚开始以为是宽度给的不够,然后发现并不是&#xff0c…

go-zero(二) api语法和goctl应用

go-zero api语法和goctl应用 在实际开发中,我们更倾向于使用 goctl 来快速生成代码。 goctl 可以根据 api快速生成代码模板,包括模型、逻辑、处理器、路由等,大幅提高开发效率。 一、构建api demo 现在我们通过 goctl 创建一个最小化的 HT…

Windows Server 2022 Web1

载入靶机,看到相关描述: 进入虚拟机发现桌面有phpstudy和解题两个软件: 打开解题.exe,发现里面是一些问题,接下来就需要获取相关信息: 1、shell密码 2、IP地址 3、隐藏账户名称 4、挖矿程序的矿池域名 打…

经典的网络安全技术

以我的理解,“黑客”大体上应该分为“正”、“邪”两类,正派黑客依靠自己掌握的知识帮助系统管理员找出系统中的漏洞并加以完善,而邪派黑客则是通过各种黑客技能对系统进行攻击、入侵或者做其他一些有害于网络的事情,因为邪派黑客…

【TDOA最小二乘解算】两步最小二乘迭代的TDOA解算方法,适用于二维平面、自适应锚点(附MATLAB代码)

本文所述的MATLAB代码实现了一个基于两步加权最小二乘法的二维目标定位算法,利用多个锚点(基站)和时间差到达(TDOA)数据来估计未知目标的位置。 文章目录 运行结果代码代码功能概述代码结构和详细说明初始化部分参数和…

VideoCrafter模型部署教程

一、介绍 VideoCrafter是一个功能强大的AI视频编辑和生成工具,它结合了深度学习和机器学习技术,为用户提供了便捷的视频制作和编辑体验。 系统:Ubuntu22.04系统,显卡:4090,显存:24G 二、基础…

【图像压缩感知】论文阅读:Content-Aware Scalable Deep Compressed Sensing

tips: 本文为个人阅读论文的笔记,仅作为学习记录所用。本文参考另一篇论文阅读笔记 Title: Content-Aware Scalable Deep Compressed Sensing Journal: TIP 2022 代码链接: https://github.com/Guaishou74851/CASNet…

AMD(Xilinx) FPGA配置Flash大小选择

目录 1 FPGA配置Flash大小的决定因素2 为什么选择的Flash容量大小为最小保证能够完成整个FPGA的配置呢? 1 FPGA配置Flash大小的决定因素 在进行FPGA硬件设计时,选择合适的配置Flash是我们进行硬件设计必须考虑的,那么配置Flash大小的选择由什…

统⼀数据返回格式快速⼊⻔

为什么会有统⼀数据返回? 其实统一数据返回是运用了AOP(对某一类事情的集中处理)的思维。 优点: 1.⽅便前端程序员更好的接收和解析后端数据接⼝返回的数据。 2.降低前端程序员和后端程序员的沟通成本,因为所有接⼝都…