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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android12 的 Vold梳理

1.代码位置 system/vold/ 路径下,查看bp文件,发现是编译system/vold/main.cpp编译生成可执行文件vold 2.app侧调用代码流程 2.1 整体框架 #mermaid-svg-lqO8phN62rKNW407 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#…

DevOps-Jenkins-新手入门级

1. Jenkins概述 1. Jenkins是一个开源持续集成的工具,是由JAVA开发而成 2. Jenkins是一个调度平台,本身不处理任何事情,调用插件来完成所有的工作 1.1 什么是代码部署 代码发布/部署>开发书写的程序代码---->部署测试/生产环境 web服务…

11.22 深度学习-pytorch自动微分

# 自动微分模块torch.autograd负责自动计算张量操作的梯度,具有自动求导功能。自动微分模块是构成神经网络训练的必要模块,可以实现网络权重参数的更新,使得反向传播算法的实现变得简单而高效 import torch # 1. **张量** # Torch中一切…

在win10下搭建ftp服务器

1 说明 本文档在win10下实现。 2 安装ftp服务器 打开“控制面板/程序和功能”,如下: 点击“启用或关闭windows功能”,如下: 安装“ftp服务器”,将下图红色圈中部分打勾,如下: 必须勾选…

数据结构C语言描述4(图文结合)--栈的实现,中序转后序表达式的实现

前言 这个专栏将会用纯C实现常用的数据结构和简单的算法;有C基础即可跟着学习,代码均可运行;准备考研的也可跟着写,个人感觉,如果时间充裕,手写一遍比看书、刷题管用很多,这也是本人采用纯C语言…

对比 MyBatis 批处理 BATCH 模式与 INSERT INTO ... SELECT ... UNION ALL 进行批量插入

前言 在开发中,我们经常需要批量插入大量数据。不同的批量插入方法有不同的优缺点,适用于不同的场景。本文将详细对比两种常见的批量插入方法: MyBatis 的批处理模式。使用 INSERT INTO ... SELECT ... UNION ALL 进行批量插入。 MyBatis …

vue中路由缓存

vue中路由缓存 问题描述及截图解决思路关键代码及打印信息截图 问题描述及截图 在使用某一平台时发现当列表页码切换后点击某一卡片进入详情页后,再返回列表页时页面刷新了。这样用户每次看完详情回到列表页都得再重新输入自己的查询条件,或者切换分页到…

第N8周:使用Word2vec实现文本分类

🍨 本文为🔗365天深度学习训练营 中的学习记录博客🍖 原作者:K同学啊 本周任务: 结合Word2Vec文本内容预测文本标签 加载数据 import torch import torch.nn as nn import torchvision from torchvision import tra…

如何在 UniApp 中实现 iOS 版本更新检测

随着移动应用的不断发展,保持应用程序的更新是必不可少的,这样用户才能获得更好的体验。本文将帮助你在 UniApp 中实现 iOS 版的版本更新检测和提示,适合刚入行的小白。我们将分步骤进行说明,每一步所需的代码及其解释都会一一列出…

FreeRTOS之vTaskDelete实现分析

这里写自定义目录标题 1 函数接口1.1 函数接口1.2 函数参数简介 2 vTaskDelete的调用关系2.1 调用关系2.2 调用关系示意图 3 函数源码分析3.1 vTaskDelete3.2 uxListRemove 1 函数接口 1.1 函数接口 void vTaskDelete( TaskHandle_t xTaskToDelete )1.2 函数参数简介 TaskHa…

移动充储机器人“小奥”的多场景应用(上)

一、高速公路服务区应用 在高速公路服务区,新能源汽车的充电需求得到“小奥”机器人的及时响应。该机器人配备有储能电池和自动驾驶技术,能够迅速定位至指定充电点,为待充电的新能源汽车提供服务。得益于“小奥”的机动性,其服务…

C语言实例_5之根据输入年月日,计算属于该年的第几天

1. 题目 输入某年某月某日,判断这一天是这一年的第几天? 2. 分析 步骤1:得先判断年份是否是闰年,是的话,当月份大于3时,需多加一天; 步骤2:还需根据输入月份,判断输入天数是否合理&#xff0…

Semaphore 信号量

文章目录 基本概念工作原理Semaphore 与 ReentrantLockSemaphore常用场景1. 限制并发线程数(最常见场景)2. 公平模式的信号量(保证按顺序访问资源)3. 限制数据库连接数(模拟数据库连接池)4. 限制 API 请求次…

Redis 的代理类注入失败,连不上 redis

在测试 redis 是否成功连接时&#xff0c;发现 bean 没有被创建成功&#xff0c;导致报错 根据报错提示&#xff0c;需要我们添加依赖&#xff1a; <dependency><groupId>org.apache.commons</groupId><artifactId>commons-pool2</artifactId>&l…

桌面怎么快速添加便签?适合桌面记事的便签小工具

在数字化时代&#xff0c;我们每天面对电脑处理大量任务&#xff0c;无论是工作计划、会议纪要还是个人生活琐事&#xff0c;都需要一个可靠的桌面记事工具来帮助我们记录和整理。因此&#xff0c;一款适合桌面使用的便签软件成为了我们不可或缺的助手。 敬业签就是这样一款功…

UE5 腿部IK 解决方案 footplacement

UE5系列文章目录 文章目录 UE5系列文章目录前言一、FootPlacement 是什么&#xff1f;二、具体实现 前言 在Unreal Engine 5 (UE5) 中&#xff0c;腿部IK&#xff08;Inverse Kinematics&#xff0c;逆向运动学&#xff09;是一个重要的动画技术&#xff0c;用于实现角色脚部准…

KLV6008固态继电器:高压应用的理想紧凑方案

在当今快节奏的电子领域&#xff0c;找到平衡性能、可靠性和安全性的组件至关重要。CRIA Semiconductor的KLV6008固态继电器(SSR)正是满足了这一要求。这款紧凑型继电器专为高压、低电流切换而设计&#xff0c;是适用于各种应用的多功能解决方案。 为什么选择KLV6008&#xff1…

如何在 React 项目中应用 TypeScript?应该注意那些点?结合实际项目示例及代码进行讲解!

在 React 项目中应用 TypeScript 是提升开发效率、增强代码可维护性和可读性的好方法。TypeScript 提供了静态类型检查、自动补全和代码提示等功能&#xff0c;这对于 React 开发者来说&#xff0c;能够帮助早期发现潜在的 bug&#xff0c;提高开发体验。 1. 项目初始化 在现…

解锁生成式AI的真实价值:衡量ROI的12步框架

在当今快速发展的技术环境中,生成式AI正逐渐成为企业创新和增长的重要驱动力。然而,随着数十亿美元的投资涌入生成式AI项目,一个严峻的问题浮出水面:如何衡量这些投资的回报(ROI)?本文将探讨生成式AI ROI衡量的挑战,并提供一个12步框架,帮助公司有效地评估和最大化其生…

【网络云计算】2024第48周-每日【2024/11/20】小测-理论题-计算机网络概述

文章目录 1、计算机常见的网络设备有哪些&#xff1f;2、进制换算3、写出你认为的如何才能学好网络知识4、写出你知道的网络相关的求职岗位有哪些&#xff1f; 【网络云计算】2024第48周-每日【2024/11/20】小测-理论题- 1、计算机常见的网络设备有哪些&#xff1f; 2、进制换…