鸿蒙开发基础-UIAbility内页面间的跳转

基于Stage模型下的UIAbility开发,实现UIAbility内页面间的跳转和数据传递。

创建两个页面

启动DevEco Studio,创建一个新工程。在工程pages目录中,选中Index.ets,点击鼠标右键 > Refactor > Rename,改名为IndexPage.ets。改名后,修改工程entryability目录下EntryAbility.ets文件中windowStage.loadContent方法第一个参数为pages/IndexPage,修改后,启动应用会自动加载IndexPage页。

// EntryAbility.ets
onWindowStageCreate(windowStage: Window.WindowStage) {...windowStage.loadContent('pages/IndexPage', (err, data) => {...});
}

选中工程entry > src > main > ets > pages目录,点击鼠标右键 > New > Page,新建命名为SecondPage的page页。此时DevEco Studio会自动在工程目录entry > src > main > resources > base > profile > main_pages.json文件中添加pages/SecondPage。

// main_pages.json
{"src": ["pages/IndexPage","pages/SecondPage"]
}

所有创建的页面都需要在main_pages.json配置。通过DevEco Studio创建的页面会自动配置。若手动复制page文件到entry > src > main > ets > pages目录,则需要在main_pages.json文件中添加对应的页面路径。

页面跳转

从IndexPage页面跳转到SecondPage页面,并进行数据传递,需要如下几个步骤:

  • 给两个页面导入router路由模块。
  • 在IndexPage页面中给Button组件添加点击事件,使用router.pushUrl()方法将SecondPage页面路径添加到url中,params为自定义参数。
  • SecondPage页面通过router.getParams()方法获取IndexPage页面传递过来的自定义参数。

IndexPage页面有一个Text文本和Button按钮,点击按钮跳转到下一个页面,并传递数据。

// IndexPage.ets
import router from '@ohos.router';
import CommonConstants from '../common/constants/CommonConstants';@Entry
@Component
struct IndexPage {@State message: string = CommonConstants.INDEX_MESSAGE;build() {Row() {Column() {Text(this.message)...Blank()Button($r('app.string.next'))....onClick(() => {router.pushUrl({url: CommonConstants.SECOND_URL,params: {src: CommonConstants.SECOND_SRC_MSG}}).catch((error: Error) => {...});})}...}...}
}

SecondPage页面有两个Text文本,其中一个文本展示从IndexPage页面传递过来的数据。

// SecondPage.ets
import router from '@ohos.router';
import CommonConstants from '../common/constants/CommonConstants';@Entry
@Component
struct SecondPage {@State message: string = CommonConstants.SECOND_MESSAGE;@State src: string = router.getParams()?.[CommonConstants.SECOND_SRC_PARAM];build() {Row() {Column() {Text(this.message)...Text(this.src)...}...}...}
}

页面返回

在SecondPage页面中,Button按钮添加onClick()事件,调用router.back()方法,实现返回上一页面的功能。

// SecondPage.ets
Button($r('app.string.back'))....onClick(() => {router.back();})

本文是对鸿蒙开发(ArkTS)基础中实现UIAbility内页面间的跳转;更多的鸿蒙开发知识可以前往主页查看,鸿蒙的技术还有很多,下面是一张(鸿蒙4.0略缩图):

高清完整版路线图,可主页找我保存(附鸿蒙4.0文档)

最终效果图如图所示:

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

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

相关文章

如何配置 VS Code 实现 git 密码免输入

目录 问题描述尝试过的失败方法问题分析最终采用的解决方案:利用 ssh key 提供密码免输入功能安装 git windows 命令工具在windows本地生成 ssh key将公钥安装到 git 服务器第一种方法第二种方法调试方法 参考资料: 问题描述 在 Windows 上,使用 Visual…

Redis不同环境缓存同一条数据,数据内部值不同

背景 现实中,本地环境(dev)和开发环境(feature)会共同使用相同的中间件(本篇拿Redis举例),对于不同环境中的,图片、视频、语音等资源类型的预览地址url,需要配…

Cesium笔记 初始化 使用Vue-Cesium 组件

参考 A Vue 3 based component library of CesiumJS for developers | Vue for CesiumVue for Cesium, a Vue 3.x based component library of CesiumJS for GISerhttps://zouyaoji.top/vue-cesium/#/zh-CN/component/quickstart

Spring boot 3 集成rocketmq-spring-boot-starter解决版本不一致问题

安装RocketMQ根据上篇文章使用Docker安装RocketMQ并启动之后&#xff0c;有个隐患详情见下文 Spring Boot集成 <dependency><groupId>org.apache.rocketmq</groupId><artifactId>rocketmq-spring-boot-starter</artifactId><version>2.2…

基于 SpringBoot + vue 的医院管理系统(含源码,数据库,文档)

基于 SpringBoot vue 的医院管理系统 †前后端分离思想&#xff0c;这个系统简直太棒了&#xff01;屯 光这个系统采用了 前后端分离思想&#xff0c;后端使用 SpringBoot和 SpringMVC框架&#xff0c;让代码更高效&#xff0c;更易于维护。前端则使用了 vue js 和ElementU…

竞赛保研 基于深度学习的动物识别 - 卷积神经网络 机器视觉 图像识别

文章目录 0 前言1 背景2 算法原理2.1 动物识别方法概况2.2 常用的网络模型2.2.1 B-CNN2.2.2 SSD 3 SSD动物目标检测流程4 实现效果5 部分相关代码5.1 数据预处理5.2 构建卷积神经网络5.3 tensorflow计算图可视化5.4 网络模型训练5.5 对猫狗图像进行2分类 6 最后 0 前言 &#…

SUDA-计算机网路-期末复习提纲

写在前面 帮苏大的同学整理的计网复习材料&#xff0c;用的是他们老师划定的范围。 1.负责互联网协议开发、标准制定、地址分配的国际组织名称及其主要职责 (1) 地址支持组织&#xff08;ASO&#xff09;负责IP地址系统的管理。 (2) 域名支持组织&#xff08;DNSO&#xff09;…

实用Unity3D Log打印工具XDebug

特点 显示时间&#xff0c;精确到毫秒显示当前帧数&#xff08;在主线程中的打印才有意义&#xff0c;非主线程显示为-1&#xff09;有三种条件编译符(如下图) 注&#xff1a;要能显示线程中的当前帧数&#xff0c;要在app启动时&#xff0c;初始化mainThreadID字段条件编译符…

开源加解密库之GmSSL

一、简介 GmSSL是由北京大学自主开发的国产商用密码开源库&#xff0c;实现了对国密算法、标准和安全通信协议的全面功能覆盖&#xff0c;支持包括移动端在内的主流操作系统和处理器&#xff0c;支持密码钥匙、密码卡等典型国产密码硬件&#xff0c;提供功能丰富的命令行工具及…

在k8s集群中部署多nginx-ingress

关于ingress的介绍&#xff0c;前面已经详细讲过了&#xff0c;参考ingress-nginx详解和部署方案。本案例ingress的部署使用deploymentLB的方式。 参考链接&#xff1a; 多个ingress部署 文章目录 1. 下载ingress的文件2. 文件资源分析3. 部署ingress3.1 部署第一套ingress3.1…

日志系统一(elasticsearch+filebeat+logstash+kibana)

目录 一、es集群部署 安装java环境 部署es集群 安装IK分词器插件 二、filebeat安装&#xff08;docker方式&#xff09; 三、logstash部署 四、kibana部署 背景&#xff1a;因业务需求需要将nginx、java、ingress日志进行收集。 架构&#xff1a;filebeatlogstasheskib…

【数据库原理】期末突击(1)

有不会的题可以后台问我的哦&#xff0c;看见了就会回。 本文章主要是选择题、填空题&#xff0c;下章将更新综合题&#xff0c;祝大家期末心想事成。 一、选择题 下列关系运算中&#xff0c;&#xff08; C &#xff09;运算不属于专门的关系运算。 A&#xff0e;选择 …

Tensorflow2.0笔记 - 创建tensor

tensor创建可以基于numpy&#xff0c;list或者tensorflow本身的API。 笔记直接上代码&#xff1a; import tensorflow as tf import numpy as np import matplotlib.pyplot as plttf.__version__#通过numpy创建tensor tensor0 tf.convert_to_tensor(np.ones([2,3])) print(te…

Mysql 分割字符串,一行变多行,@rownum,mysql.help_topic

1 前言 朋友最近遇到一个比较棘手的 sql 问题&#xff0c;让我帮忙看看&#xff1a; 他有两张表 testa 和 testb &#xff0c;一个表存的日期&#xff0c;另一个表存字符串例如 2023-11-01,2023-11-02&#xff0c;如何将这两张表关联起来&#xff0c;只查 testa 表的数据&#…

<Python>PyQt5中UI界面和逻辑函数分开写的一种方式

前言 如果经常使用PyQt5这种模块来编写带UI界面的程序&#xff0c;那么很自然的就会涉及到&#xff0c;一旦程序比较大&#xff0c;UI控件多的时候&#xff0c;需要将UI和逻辑程序分离&#xff0c;这样方便管理&#xff0c;也方便维护。 配置&#xff1a; 平台&#xff1a;win…

三、yolov8训练结果查看和模型预测

训练结果查看 1、在模型训练结束后&#xff0c;如下图所示&#xff0c;找到该文件夹。 2、然后找到weights文件夹中的best.pt文件&#xff0c;这就是该数据训练后的模型。 模型预测 1、在assets文件夹下创建FPC-2文件夹&#xff0c;放入一些同类FPC预测结果。 2、和训练…

什么是活动的DWDM网络?

DWDM系统被认为是一个基于应答器的系统&#xff0c;可以帮助在数据中心互连设置中在站点之间传输大量数据。不同于无源DWDM网络&#xff0c; DWDM网络通常包括OEO、主动DWDM Mux Demux、EDFA、DCM和其他主动WDM组件&#xff0c;更适合远程传输。此外&#xff0c;主动DWDM网络还…

x-cmd pkg | pdfcpu - 强大的 PDF 处理工具

目录 简介首次用户多功能支持性能表现安全的加密处理进一步阅读 简介 pdfcpu 是一个用 Go 编写的 PDF 处理库。同时它也提供 API 和 CLI。pdfcpu 提供了丰富的 PDF 操作功能&#xff0c;用户还能自己编写配置文件&#xff0c;用来管理和使用各种自定义字体并存储有效的默认配置…

【前端】前后端的网络通信基础操作(原生ajax, axios, fetch)

概述 前后端网络请求工具 原生ajaxfetch apiaxios GET和POST请求 get只能发纯文本 post可以发不同类型的数据&#xff0c;要设置请求头&#xff0c;需要告诉服务器一些额外信息 测试服务器地址 有一些公共的测试 API 可供学习和测试用途。这些 API 允许你发送 HTTP 请求…

5.MapReduce之Combiner-预聚合

目录 概述本地预计算 Combiner 意义实践前提代码日志观察 结束 概述 在 MR、Spark、Flink 中&#xff0c;常用的减少网络传输的手段。 通常在 Reducer 端合并&#xff0c;shuffle 的数据量比在 Mapper 端要大&#xff0c;根据业务情况及数据量极大时&#xff0c;将大幅度降低效…