当前位置: 首页 > news >正文

HarmonyOS ArkTS Ability内页面的跳转和数据传递

HarmonyOS ArkTS Ability的数据传递包括有Ability内页面的跳转和数据传递、Ability间的数据跳转和数据传递。本节主要讲解Ability内页面的跳转和数据传递。

打开DevEco Studio,选择一个Empty Ability工程模板,创建一个名为“ArkUIPagesRouter”的工程为演示示例。

2.4.1 新建Ability内页面

初始化工程之后,会生成以下代码。

  • 在src/main/ets/entryability目录下,初始会生成一个Ability文件EntryAbility.ts。可以在EntryAbility.ts文件中根据业务需要实现Ability的生命周期回调内容。
  • 在src/main/ets/pages目录下,会生成一个Index页面。这也是基于Ability实现的应用的入口页面。可以在Index页面中根据业务需要实现入口页面的功能。

为了实现页面的跳转和数据传递,需要新建一个页面。在src/main/ets/pages目录下,可以通过如下图2-5所示右键“New->Page”来新建页面。

在原有Index页面的基础上,新建一个页面命名为Second的页面,如下图2-6所示。

Second页面创建完成之后,会自动做两个动作。

一个动作是在在src/main/ets/pages目录下,会创建一个Second.ets的文件。文件内容如下:

@Entry
@Component
struct Second {@State message: string = 'Hello World'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')}
}

另外一个动作是将Second页面信息配置到了src/main/resources/base/profile/main_pages.json文件中。main_pages.json文件内容如下:

{"src": ["pages/Index","pages/Second"]
}

分别把Index.ets和Second.ets的message变量值改为“Index页面”和“Second页面”以示区别。

2.4.2 页面跳转及传参

页面间的导航可以通过页面路由router模块来实现。页面路由模块根据页面url找到目标页面,从而实现跳转。通过页面路由模块,可以使用不同的url访问不同的页面,包括跳转到Ability内的指定页面、用Ability内的某个页面替换当前页面、返回上一页面或指定的页面等。通过params来传递参数。

在使用页面路由之前,需要先导入router模块,如下代码所示。

// 导入router模块
import router from '@ohos.router';

页面跳转的几种方式,根据需要选择一种方式跳转即可。

1. router.push()

通过调用router.push()方法,跳转到Ability内的指定页面。每调用一次router.push()方法,均会新建一个页面。默认情况下,页面栈数量会加1,页面栈支持的最大页面数量为32。

当页面栈数量较大或者超过32时,可以通过调用router.clear()方法清除页面栈中的所有历史页面,仅保留当前页面作为栈顶页面。

用法示例如下:

router.push({url: 'pages/Second',params: {src: 'Index页面传来的数据',}
})

2. router.push()加mode参数

router.push()方法新增mode参数,可以将mode参数配置为router.RouterMode.Single单实例模式和router.RouterMode.Standard标准模式。

在单实例模式下,如果目标页面的url在页面栈中已经存在同url页面,离栈顶最近的同url页面会被移动到栈顶,移动后的页面为新建页,原来的页面仍然存在栈中,页面栈数量不变;如果目标页面的url在页面栈中不存在同url页面,按标准模式跳转,页面栈数量会加1。

用法示例如下:

router.push({url: 'pages/Second',params: {src: 'Index页面传来的数据',}
}, router.RouterMode.Single)

3. router.replace()

通过调用router.replace()方法,跳转到Ability内的指定页面。即使用新的页面替换当前页面,并销毁被替换的当前页面,页面栈数量不变。

用法示例如下:

router.replace({url: 'pages/Second',params: {src: 'Index页面传来的数据',}
})

3. router.replace()加mode参数

router.replace()方法新增了mode参数,可以将mode参数配置为router.RouterMode.Single单实例模式和router.RouterMode.Standard标准模式。

在单实例模式下,如果目标页面的url在页面栈中已经存在同url页面,离栈顶最近的同url页面会被移动到栈顶,替换当前页面,并销毁被替换的当前页面,移动后的页面为新建页,页面栈数量会减1;如果目标页面的url在页面栈中不存在同url页面,按标准模式跳转,页面栈数量不变。

用法示例如下:

router.replace({url: 'pages/Second',params: {src: 'Index页面传来的数据',}
}, router.RouterMode.Single)

最后,在Index.ets文件中添加按钮以触发跳转。Index.ets代码如下:

// 导入router模块
import router from '@ohos.router';@Entry
@Component
struct Index {@State message: string = 'Index页面'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)// 添加按钮,触发跳转Button('跳转').fontSize(40).onClick(() => {router.push({url: 'pages/Second',params: {src: 'Index页面传来的数据',}});})}.width('100%')}.height('100%')}
}

2.4.3 参数接收

通过调用router.getParams()方法获取Index页面传递过来的自定义参数。

import router from '@ohos.router';@Entry
@Component
struct Second {@State src: string = router.getParams()?.['src'];// 页面刷新展示...
}

可以调用router.back()方法返回到上一个页面。

最终,完整Second.ets的代码如下:

// 导入router模块
import router from '@ohos.router';@Entry
@Component
struct Second {@State message: string = 'Second页面'@State src: string = router.getParams()?.['src'];build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)// 显示传参的内容Text(this.src).fontSize(30)// 添加按钮,触发返回Button('返回').fontSize(40).onClick(() => {router.back();})}.width('100%')}.height('100%')}
}

2.4.4 运行

运行项目后,初始化界面如图2-7所示。

在Index页面中,点击“跳转”后,即可从Index页面跳转到Second页面,并在Second页面中接收参数和进行页面刷新展示,界面效果如图2-8所示。

当在Second页面点击“返回”后,则会回到如图2-7所示Index页面。

以上就是完整的页面跳转及传参、接收参数的过程。

618购书大优惠

一分耕耘一分收获,学好HarmonyOS应用开发,挑战高薪!

趁着618活动季节,多给自己充充电。少玩手机,多学习才是王道!目前当当、京东,开启平台惊现购书5折优惠促销活动,可谓是非常实惠!

当然,也有童鞋不喜欢文字,就喜欢看视频,那么也有视频网课,比如,这门幕课网的“鸿蒙系统实战短视频App 从0到1掌握HarmonyOS”就非常的牛B ,可以教你从0开始开发一个类似于抖音的短视频App。共计39个小时的时长,内容也是非常全面!

参考引用

  • 柳伟卫. 鸿蒙HarmonyOS手机应用开发实战[M]. 北京:清华大学出版社,2022.
  • 柳伟卫. 鸿蒙HarmonyOS应用开发从入门到精通[M]. 北京:北京大学出版社,2022.
  • 柳伟卫. 跟老卫学HarmonyOS开发[EB/OL].https://github.com/waylau/harmonyos-tutorial,2020-12-13/2022-12-29
  • 柳伟卫. HarmonyOS题库[EB/OL].https://github.com/waylau/harmonyos-exam,2022-11-04/2022-12-29

相关文章:

HarmonyOS ArkTS Ability内页面的跳转和数据传递

HarmonyOS ArkTS Ability的数据传递包括有Ability内页面的跳转和数据传递、Ability间的数据跳转和数据传递。本节主要讲解Ability内页面的跳转和数据传递。 打开DevEco Studio,选择一个Empty Ability工程模板,创建一个名为“ArkUIPagesRouter”的工程为…...

MySQL 8.0.29 instant DDL 数据腐化问题分析

前言Instant add or drop column的主线逻辑表定义的列顺序与row 存储列顺序阐述引入row版本的必要性数据腐化问题原因分析Bug重现与解析MySQL8.0.30修复方案 前言 DDL 相对于数据库的 DML 之类的其他操作,相对来说是比较耗时、相对重型的操作; 因此对业务的影比较严…...

Haproxy搭建负载均衡

Haproxy搭建负载均衡 一、常见的Web集群调度器二、Haproxy介绍1、Haproxy应用分析2、Haproxy的主要特性3、Haproxy负载均衡策略 三、LVS、Nginx、Haproxy之间的区别四、Haproxy搭建Web群集1、Haproxy服务器部署2、节点服务器部署3、测试Web群集 五、日志定义1、方法一2、方法二…...

SpringBoot:SpringBoot启动加载过程 ④

一、思想 我们看到技术上高效简单的使用,其实背后除了奇思妙想的开创性设计,另一点是别人帮你做了复杂繁琐的事情。 二、从官网Demo入手 官网就一行代码。这个就是它的启动代码。 1、SpringBootApplication注解 ①. 三个核心注解的整合。 SpringBootCon…...

抽象轻松JavaScript

真真假假,鬼鬼,谁知道什么是真什么是假 疑点二:什么是真,什么是假 核心:确定一个清晰的目的,可以达到目的就是真,达不到就是假 知道了核心开始举例 考大学,考上大学就是满足目的…...

深入理解CSS字符转义行为

深入理解CSS字符转义行为 深入理解CSS字符转义行为 前言为什么要转义&#xff1f;CSS 转义什么是合法css的表达式 左半部分右半部分 练习参考链接 前言 在日常的开发中&#xff0c;我们经常写css。比如常见的按钮: <button class"btn"></button>&am…...

【论文阅读】(2023.05.10-2023.06.03)论文阅读简单记录和汇总

(2023.05.10-2023.06.08)论文阅读简单记录和汇总 2023/05/10&#xff1a;今天状态&#xff0c;复阳大残&#xff0c;下午淋了点雨吹了点风&#xff0c;直接躺了四个小时还是头晕- -应该是阳了没跑了。 2023/06/03&#xff1a;前两周出差复阳&#xff0c;这两周调整作息把自己又…...

FPGA开发-ddr测试

文章目录 概要整体架构流程技术名词解释技术细节小结 概要 提示&#xff1a;这里可以添加技术概要 例如&#xff1a; 本文以米联科开发板为例&#xff0c;介绍ddr测试相关例程。 整体架构流程 提示&#xff1a;这里可以添加技术整体架构 技术名词解释 提示&#xff1a;这…...

BUUCTF 大帝的密码武器 1

题目描述&#xff1a;&#xff08;下载题目&#xff0c;然后修改后缀名为.zip打开&#xff1a;&#xff09; 公元前一百年&#xff0c;在罗马出生了一位对世界影响巨大的人物&#xff0c;他生前是罗马三巨头之一。他率先使用了一种简单的加密函&#xff0c;因此这种加密方法以…...

Linux 查看目录个数和大小

一、查看某目录下的文件个数 1. 查看目录下的文件个数 即当前目录/hdapp目录下有多少个文件&#xff0c;文件夹不计入数值 ls -l | grep "^-"| wc -l下面的命令文件夹也会计入数值 ls | wc -w2. 查看指定目录下的文件个数 如果省略指定目录就是默认当前目录 ls…...

Unity制作二次元卡通渲染角色材质——4 、内外描边和细节添加

Unity制作二次元材质角色 回到目录 大家好&#xff0c;我是阿赵。 这里继续讲二次元角色材质。这次打算讲一下描边和细节的添加。 一、外描边 外描边的做法也不止一种&#xff0c;比如后处理方法的偏导数ddx/ddy之类的&#xff0c;也能整个屏幕的求出边缘。但一般来说单模型渲…...

Ubuntu安装GCC10

使用包安装的方式安装 sudo apt upgradesudo apt install software-properties-commonsudo add-apt-repository ppa:ubuntu-toolchain-r/test QA: 更新python3.7后出现ModuleNotFoundError: No module named ‘apt_pkg‘错误QA: Cannot import name ‘_gi’ sudo apt updatesu…...

【flutter】Dart 规范2

高效 Dart 语言指南&#xff1a;用法示例 每天在你写的 Dart 代码中都会应用到这些准则。库的使用者可能不需要知道你在其中的一些想法&#xff0c;但是维护者肯定是需要的。 库 这些准则可以帮助你在多个文件编写程序的情况下保证一致性和可维护性。为了让准则简洁&#xf…...

k8s CoreDns详解

一、概述 服务发现是 K8s 的一项很重要的功能。K8s 的服务发现有两种方式&#xff0c;一种是将 svc 的 ClusterIP 以环境变量的方式注入到 pod 中&#xff1b;一种就是 DNS&#xff0c;从 1.13 版本开始&#xff0c;coreDNS 就取代了 kube dns 成为了内置的 DNS 服务器。 Cor…...

c++ 连sqlserver

//要在 C 中连接 SQL Server 数据库&#xff0c;可以使用 Microsoft 提供的 SQL Server Native Client 或者 //ODBC 驱动程序。以下是使用 SQL Server Native Client 连接数据库的基本步骤&#xff1a; //1. 安装 SQL Server Native Client 驱动程序。 //2. 在 C 代码中包含头…...

给钉钉的2个建议

1. 建议.MD文件可以实现在线编辑 .MD文件可以实现在线编辑。 现状&#xff1a;word、excel、txt等文件都可以实现在线编辑&#xff0c;期望.MD文件也可以进行在线编辑&#xff0c;便于喜欢用.MD文旦交流的人使用。 2. 增加群内根据关键词自定义提醒功能 随着个人加入的群聊增多…...

STL之优先级队列(堆)的模拟实现与仿函数(8千字长文详解!)

STL之优先级队列&#xff08;堆&#xff09;的模拟实现与仿函数 文章目录 STL之优先级队列&#xff08;堆&#xff09;的模拟实现与仿函数优先级队列的概念priority_queue的接口介绍优先级队列的构造函数 priority_queue模拟实现类成员构造函数向下调整算法——正常实现 push向…...

设施管理系统

随着经济的快速发展&#xff0c;各种基础设施都在更新&#xff0c;在企事业单位中各种设施也都难以管理&#xff0c;以往传统的管理模式已经无法适应现代社会的需求&#xff0c;设备管理的滞后反而会影响设施设备的使用效果&#xff0c;因此设施设备管理系统必不可少。那么什么…...

JavaScript:获取当前日期、星期、时间 | Data对象

文章目录 1 Date对象2 代码示例3 获取 yyyy-MM-dd 格式的日期 1 Date对象 JavaScript 中的 Date 对象表示日期和时间。Date 对象基于自 1970 年 1 月 1 日 00:00:00 UTC&#xff08;协调世界时&#xff09;以来的毫秒数。以下是 Date 对象的一些常用方法和属性。 getFullYear…...

Cadence原理图快速查找元器件的方法

1.Cadence原理图快速查找元器件的方法 ①在红框中输入元器件编号&#xff0c;点击望远镜的图标在底下的状态栏可看到查找到的相关元器件&#xff0c;点击元器件可自动定位当前元器件的位置。 ②点击hierarchy&#xff08;层&#xff09;可自主查找&#xff0c;找到后点击序号即…...

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

Android第十三次面试总结(四大 组件基础)

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.

ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #&#xff1a…...

Caliper 负载(Workload)详细解析

Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分,它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构: use strict;/…...