HarmonyOS笔记5：ArkUI框架的Navigation导航组件

ArkUI框架的Navigation导航组件

在移动应用中需要在不同的页面进行切换跳转。这种切换和跳转有两种方式：页面路由和Navigation组件实现导航。HarmonyOS推荐使用Navigation实现页面跳转。在本文中在HarmonyOS 5.0.0 Release SDK (API Version 12 Release)版本下，简单介绍ArkUI框架的Navigation导航组件。

一、Navigation组件定义的页面结构

Navigation组件主要包含​导航页和子页:

导航页由标题栏、内容区和工具栏组成，其中导航页可以通过hideNavBar属性进行隐藏，导航页不存在页面栈中，导航页和子页，以及子页之间可以通过路由操作进行切换。
在这里插入图片描述

二、定义导航页

Navigation是路由导航的根视图容器，一般作为页面（@Entry）的根容器，包括单栏（Stack）、分栏（Split）和自适应（Auto）三种显示模式。Navigation组件适用于模块内和跨模块的路由切换。
导航页页面的结构：

@Entry
@Component
struct NavigationPage {
@Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack()//定义页面栈保存页面路径
build() {Column() {Navigation(this.pageInfos) {...//内容区定义}.title("导航组件标题")//设置导航的标题.mode(NavigationMode.Stack)//配置导航的模式.navDestination(...)//设置导航路径.menus(...)//定义顶部菜单.toolbarConfiguration(...)//配置底部导航栏即工具栏}

说明：

1.在上述导航页中定义的NavPathStack对象表示页面栈，采用了@Provide装饰，可以看作是“提供”给后代的状态变量。在此处，它可以提供给子页同时使用页面栈，用于记录子页的导航路径。注意：导航页的路径不会推入到NavPathStack页面栈中。
2.导航页使用Navigation组件
3.在Navigation组件中:

（1）title()函数设置导航页的标题
（2）mode()函数配置导航的模式，NavigationMode.Stack表示单页显示模式，NavigationMode.Split表示分栏显示，NavigationMode.Auto表示自动选择显示模式
（3）navDestination()函数指定导航的路径，所有的导航路径可以通过PageMap来定义。形如：
@Builder
PageMap(routerName:string){
…//定义根据routerName路由名称不同调用不同的页面``
}
（4）menus()函数定义顶部菜单栏的内容，各个菜单项由NavigationMenuItem数组或CustomBuilder两种类型构成。菜单栏在竖屏最多支持显示3个图标，横屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。
（5）toolbarConfiguration()配置底部的工具栏。工具栏的单项由ToolbarItem组成，对toolbarConfiguration()函数传递ToolbarItem数组，可以生成底部工具栏的各个导航单项。

导航页的代码示例

@Entry
@Component
struct Index {//定义页面栈，子页也可以使用@Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack()//定义顶部菜单项,子页也可以使用@Provide topMenuItems:NavigationMenuItem[] = [{value: "首页", icon: 'resources/base/media/startIcon.png', action: ()=> {this.pageInfos.pushPath({ name: "首页"})}},{value: "配置", icon: 'resources/base/media/setting.png', action: ()=> {this.pageInfos.pushPath({ name: "配置"})}},{value: "帮助和支持", icon:'resources/base/media/help.png', action: ()=> {this.pageInfos.pushPath({ name: "帮助和支持"})}}]//定义底部工具栏@State bottomMenuItems:ToolbarItem[] = [{'value': "首页", 'icon': $r("app.media.startIcon"), 'action': ()=> {this.pageInfos.pushPath({ name: "首页"})}},{'value': "配置", 'icon': $r("app.media.setting"), 'action': ()=> {this.pageInfos.pushPath({ name: "配置"})}},{'value': "帮助和支持", 'icon': $r("app.media.help"), 'action': ()=> {this.pageInfos.pushPath({ name: "帮助和支持"})}}]//定义导航路径的数组，其中"退出“对应退出的操作private routerTitles:string[] = ["首页","配置","帮助和支持","退出"]@BuilderPageMap(name: string) {if (name === "首页") {pageOne()} else if (name === "配置") {pageTwo()} else if (name === "帮助和支持") {pageThree()}}build() {Column() {Navigation(this.pageInfos) {//内容区，自行定义TextInput({ placeholder: '检索...' }).width("90%").height(40).backgroundColor('#FFFFFF')List({ space: 12 }) {ForEach(this.routerTitles,(item:string)=>{ListItem(){Text(item).width("100%").height(72).backgroundColor('#D2E76B').borderRadius(24).fontSize(16).fontWeight(500).textAlign(TextAlign.Center).onClick(()=>{if(item=="退出"){(getContext(this) as common.UIAbilityContext)?.terminateSelf();}elsethis.pageInfos.pushPath({ name: item})})}})}.width("90%").margin({ top: 12 })}.title("导航组件测试示例")//设置导航的标题.mode(NavigationMode.Stack)//配置导航的模式.navDestination(this.PageMap)//设置导航路径.menus(this.topMenuItems)//定义顶部菜单.toolbarConfiguration(this.bottomMenuItems)//配置底部工具栏}.height('100%').width('100%').backgroundColor('#83B5FF')}
}

在这里插入图片描述
图1 导航页的运行效果

三、定义子页

子页的结构：

@Component
export struct pageOne {@Consume('pageInfos') pageInfos: NavPathStack;   //引用build() {NavDestination() {//内容区定义}.title("首页")//定义子页的标题.onBackPressed(() => {const popDestinationInfo = this.pageInfos.pop() // 弹出页面栈栈顶元素return true})}
}

说明：

（1） 子页自定义组件不是页面的入口组件，无需使用@Entry装饰，也不需要在resources/base/profile/main_pages.json中配置页面。
（2）在子页中@Consume 装饰的变量，用于“消费（绑定）”导航页提供的导航路径堆栈。
（3）子页中使用NavDestination是子页面的根容器，用于定义子页面。

调用NavDestination的title()函数设置独立的标题栏。
调用NavDestination的menus()函数设置子页的顶部菜单栏。

子页代码示例

//PageOne.ets
@Component
export struct pageOne {@Consume('pageInfos') pageInfos: NavPathStack;//使用导航页的页面栈@Consume('topMenuItems') topMenuItems:NavigationMenuItem[]//使用导航页的菜单项的定义build() {NavDestination() {Column() {}.width('100%').height('100%').backgroundColor(Color.Orange)}.title("首页").menus(this.topMenuItems)//定义顶部菜单栏的菜单项.onBackPressed(() => {this.pageInfos.pop() // 弹出页面栈栈顶元素return true})}
}

在这里插入图片描述
图2 子页1的运行效果

//PageTwo.ets
@Component
export struct pageTwo{@Consume('pageInfos') pageInfos: NavPathStack;@Consume('topMenuItems') topMenuItems:NavigationMenuItem[]build() {NavDestination() {Column() {}.width('100%').height('100%').backgroundColor(Color.Blue)}.title("配置").menus(this.topMenuItems).onBackPressed(() => {this.pageInfos.pop() // 弹出页面栈栈顶元素return true})}
}

在这里插入图片描述
图3 子页2的运行效果

//PageThree.ets
@Component
export struct pageThree{@Consume('pageInfos') pageInfos: NavPathStack;@Consume('topMenuItems') topMenuItems:NavigationMenuItem[]build() {NavDestination() {Column() {}.width('100%').height('100%').backgroundColor(Color.Green)}.title("帮助和支持").menus(this.topMenuItems).onBackPressed(() => {this.pageInfos.pop() // 弹出页面栈栈顶元素return true})}
}

在这里插入图片描述
图4 子页3的运行效果

四、页面的路由处理

页面的路由处理表示从不同页面中进行跳转和切换，通过NavPathStack页面栈来实现。下表中展示了NavPathStack页面栈的常见函数实现不同页面的处理操作

函数说明
pushPath({name:“pageOne”,param：“somevalue”}跳转到name属性指定的路径名对应的页面；param表示传递的参数，也可不用
pushPathByName(“pageOne”,“somevalue”)跳转到name属性指定的路径名对应的页面，可以传递参数值
pop()返回上一页
popToName(‘pageOne’)返回路由路径名为pageOne对应的页面
popToIndex(1)返回索引为1的页面
clear()返回到根首页，清除页面栈
replacePath({name:“pageOne”,param：“somevalue”} )替换页面
replacePathByName(“pageOne”,“somevalue”)替换页面
修改PageTwo.ets，使之增加图片，并为图片配置点击交互处理，当点击该图片返回到首页（对应pageOne页面)，代码如下：
@Component
export struct pageTwo{@Consume('pageInfos') pageInfos: NavPathStack;@Consume('topMenuItems') topMenuItems:NavigationMenuItem[]build() {NavDestination() {Column() {Text("配置说明").fontSize(50).fontColor(Color.White)Image("resources/base/media/startIcon.png").width(60).height(60).margin(5).position({x:260,y:600}).onClick(() => {this.getUIContext()?.animateTo({ duration: 1000 }, () => {this.pageInfos.pushPath({ name: '首页' }, false)//返回首页})})}.width('100%').height('100%').backgroundColor(Color.Blue)}.title("配置").menus(this.topMenuItems).onBackPressed(() => {this.pageInfos.pop() // 弹出路由栈栈顶元素return true})}
}

在这里插入图片描述
图5 修改后的页面2运行结果
当点击图片后，会跳转到首页。当在首页页面的标题栏的返回按钮时，因为执行了this.pageInfos.pop()，仍会返回到上一级的页面，就是上述图5展示的页面。

参考文献：

1.单页面布局示意图 https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-navigation-navigation-V5

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

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

相关文章

【C++】第九节：list

【C++】第九节：list

1、list的介绍及使用 1.1 list的介绍 list - C 参考 1.2 list的使用 1.2.1 list的构造 void TestList1() {list<int> l1; // 构造空的l1list<int> l2(4, 100); // l2中包含4个值为100的元素list<int> l3(l2.begin(), l2.end()); // 用l2的[begin(),end())…
阅读更多...
Idea中创建和联系MySQL等数据库

Idea中创建和联系MySQL等数据库

备注&#xff1a;电脑中要已下好自己需要的MySQL数据库软件 MySQL社区版下载链接&#xff1a; https://dev.mysql.com/downloads/installer/ 优点&#xff1a; 1.相比与在命令行中管理数据库&#xff0c;idea提供了图形化管理&#xff0c;简单明了&#xff1b; 2.便于与后端…
阅读更多...
Linux_shell脚本if语句详细教程

Linux_shell脚本if语句详细教程

前言 在 Linux Shell 脚本中&#xff0c;if 语句用于基于条件执行命令或代码块。它的基本语法结构如下&#xff1a; if 条件; then# 如果条件为真时执行的代码 elif 另一个条件; then# 如果另一个条件为真时执行的代码 else# 如果所有条件都不成立时执行的代码 fi一、if 语句…
阅读更多...
Python自学之Colormaps指南

Python自学之Colormaps指南

目录 1.色彩映射表&#xff08;Colormaps&#xff09;是什么&#xff1f; 2.Matplotlib中的色彩映射表类型 2.1同色渐变&#xff08;Sequential Colormaps&#xff09; 2.2双色渐变&#xff08;Divergence Colormaps&#xff09; 2.3定性色彩&#xff08;Qualitative Col…
阅读更多...
利用redis的key失效监听器KeyExpirationEventMessageListener作任务定时提醒功能

利用redis的key失效监听器KeyExpirationEventMessageListener作任务定时提醒功能

某需求&#xff1a; 要求在任务截止日期的前3天时&#xff0c;系统自动给用户发一条消息提醒。 用定时任务的话感觉很不舒服。间隔时间不好弄。不能精准卡到那个点。 由于系统简单&#xff0c;没有使用消息列队&#xff0c;也不能使用延时队列来做。 用Timer的话开销还挺大的&a…
阅读更多...
从视频帧生成点云数据、使用PointNet++模型提取特征，并将特征保存下来的完整实现。

从视频帧生成点云数据、使用PointNet++模型提取特征，并将特征保存下来的完整实现。

文件地址 https://github.com/yanx27/Pointnet_Pointnet2_pytorch?spm5176.28103460.0.0.21a95d27ollfze Pointnet_Pointnet2_pytorch\log\classification\pointnet2_ssg_wo_normals文件夹改名为Pointnet_Pointnet2_pytorch\log\classification\pointnet2_cls_ssg "E:…
阅读更多...
高效工具推荐：基于WebGPU的Whisper Web结合内网穿透远程使用指南

高效工具推荐：基于WebGPU的Whisper Web结合内网穿透远程使用指南

文章目录 前言1.本地部署Whisper Web1.1 安装git1.2 安装Node.js1.3 运行项目 2. Whisper Web使用介绍3. 安装Cpolar内网穿透4. 配置公网地址5. 公网访问测试6. 配置固定公网地址 前言 OpenAI开源的 Whisper 语音转文本模型效果都说还不错&#xff0c;今天就给大家推荐 GitHub…
阅读更多...
大数据学习16之Spark-Core

大数据学习16之Spark-Core

1. 概述 1.1.简介 Apache Spark 是专门为大规模数据处理而设计的快速通用的计算引擎。 一种类似 Hadoop MapReduce 的通用并行计算框架&#xff0c;它拥有MapReduce的优点&#xff0c;不同于MR的是Job中间结果可以缓存在内存中&#xff0c;从而不需要读取HDFS&#xff0c;减少…
阅读更多...
Go语言跨平台桌面应用开发新纪元：LCL、CEF与Webview全解析

Go语言跨平台桌面应用开发新纪元：LCL、CEF与Webview全解析

开篇寄语 在Go语言的广阔生态中&#xff0c;桌面应用开发一直是一个备受关注的领域。今天&#xff0c;我将为大家介绍三款基于Go语言的跨平台桌面应用开发框架——LCL、CEF与Webview&#xff0c;它们分别拥有独特的魅力和广泛的应用场景。通过这三款框架&#xff0c;你将能够轻…
阅读更多...
机器学习day5-随机森林和线性代数1最小二乘法

机器学习day5-随机森林和线性代数1最小二乘法

十 集成学习方法之随机森林 集成学习的基本思想就是将多个分类器组合&#xff0c;从而实现一个预测效果更好的集成分类器。大致可以分为&#xff1a;Bagging&#xff0c;Boosting 和 Stacking 三大类型。 &#xff08;1&#xff09;每次有放回地从训练集中取出 n 个训练样本&…
阅读更多...
Excel使用-弹窗“此工作簿包含到一个或多个可能不安全的外部源的链接”的发生与处理

Excel使用-弹窗“此工作簿包含到一个或多个可能不安全的外部源的链接”的发生与处理

文章目录 前言一、探讨问题发生原因1.引入外部公式2.引入外部数据验证二、问题现象排查及解决1.排查公式2.排查数据验证3.特殊处理方式总结前言 作为一种常用的办公软件，Excel被大家所熟知。尽管使用了多年，有时候在使用Excel时候也会发生一些不太常见的现象，需要用心核查下…
阅读更多...
跨越网络边界：IPv6与零信任架构的深度融合

跨越网络边界：IPv6与零信任架构的深度融合

2024年&#xff0c;工信部发布了《关于开展“网络去NAT”专项工作 进一步深化IPv6部署应用的通知》&#xff0c;加速了国内网络由IPv4向IPv6的转型步伐。未来&#xff0c;各行各业将逐步去NAT&#xff0c;逐步向IPv6迁移。在此过程中&#xff0c;网络安全解决方案和产品能力将面…
阅读更多...
从大数据到大模型：现代应用的数据范式

从大数据到大模型：现代应用的数据范式

作者介绍&#xff1a;沈炼&#xff0c;蚂蚁数据部数据库内核负责人。2014年入职蚂蚁&#xff0c;承担蚂蚁集团的数据库架构职责&#xff0c;先后负责了核心链路上OceanBase&#xff0c;OceanBase高可用体系建设、NoSQL数据库产品建设。沈炼对互联网金融、数据库内核、数据库高可…
阅读更多...
华为eNSP：MSTP

华为eNSP：MSTP

一、什么是MSTP&#xff1f; 1、MSTP是IEEE 802.1S中定义的生成树协议&#xff0c;MSTP兼容STP和RSTP&#xff0c;既可以快速收敛&#xff0c;也提供了数据转发的多个冗余路径&#xff0c;在数据转发过程中实现VLAN数据的负载均衡。 2、MSTP可以将一个或多个VLAN映射到一个Inst…
阅读更多...
MATLAB绘制克莱因瓶

MATLAB绘制克莱因瓶

MATLAB绘制克莱因瓶 clc;close all;clear all;warning off;% clear all rand(seed, 100); randn(seed, 100); format long g;% Parameters u_range linspace(0, 2*pi, 100); v_range linspace(0, pi, 50); [U, V] meshgrid(u_range, v_range);% Parametric equations for t…
阅读更多...
2、 家庭网络发展现状

2、 家庭网络发展现状

上一篇我们讲了了解家庭网络历史(https://blog.csdn.net/xld_hung/article/details/143639618?spm1001.2014.3001.5502),感兴趣的同学可以看对应的文章&#xff0c;本章我们主要讲家庭网络发展现状。 关于家庭网络发展现状&#xff0c;我们会从国内大户型和小户型的网络说起&…
阅读更多...
Vue3 -- 项目配置之eslint【企业级项目配置保姆级教程1】

Vue3 -- 项目配置之eslint【企业级项目配置保姆级教程1】

下面是项目级完整配置1➡eslint&#xff1a;【吐血分享&#xff0c;博主踩过的坑你跳过去&#xff01;&#xff01;跳不过去&#xff1f;太过分了给博主打钱】 浏览器自动打开项目&#xff1a; 你想释放双手吗&#xff1f;你想每天早上打开电脑运行完项目自动在浏览器打开吗&a…
阅读更多...
【SQL】E-R模型（实体-联系模型）

【SQL】E-R模型（实体-联系模型）

目录 一、介绍 1、实体集 定义和性质 属性 E-R图表示 2. 联系集 定义和性质 属性 E-R图表示 一、介绍 实体-联系数据模型&#xff08;E-R数据模型&#xff09;被开发来方便数据库的设计&#xff0c;它是通过允许定义代表数据库全局逻辑结构的企业模式&#xf…
阅读更多...
LLM - 计算 多模态大语言模型 的参数量(Qwen2-VL、Llama-3.1) 教程

LLM - 计算 多模态大语言模型 的参数量(Qwen2-VL、Llama-3.1) 教程

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/143749468 免责声明&#xff1a;本文来源于个人知识与公开资料&#xff0c;仅用于学术交流&#xff0c;欢迎讨论&#xff0c;不支持转载。 影响 (…
阅读更多...
基于Java Springboot成都旅游网

基于Java Springboot成都旅游网

一、作品包含 源码数据库设计文档万字PPT全套环境和工具资源部署教程 二、项目技术 前端技术&#xff1a;Html、Css、Js、Vue、Element-ui 数据库&#xff1a;MySQL 后端技术&#xff1a;Java、Spring Boot、MyBatis 三、运行环境 开发工具&#xff1a;IDEA/eclipse 数据…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023