鸿蒙:实现两个Page页面跳转
效果展示

这篇博文在《鸿蒙:从0到“Hello Harmony”》基础上实现两个Page页面跳转
1.构建第一个页面
第一个页面就是“Hello Harmony”,把文件名和显示内容都改一下,改成“FirstPage”,再添加一个“Next”按钮。
@Entry
@Component
struct FristPage {@State message1: string = "FirstPage"@State message2: string = 'Next'build() {Row() {Column() {Text(this.message1).fontSize(30).fontWeight(FontWeight.Bold).height("10%").margin({top: 0})Button(this.message2).fontSize(30).fontWeight(FontWeight.Bold).height('5%').type(ButtonType.Capsule).margin({top: 30}).backgroundColor("#0D9FFB").width('50%').height('5%')}.width('100%')}.height('100%')}
}
在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器。第一个页面效果如下图所示:

2.构建第二个页面
1.在“entry > src > main > ets > pages”目录下,新建SecondPage.ets

同样,实现一个文本和一个Button按钮
@Entry
@Component
struct SecondPage {@State message1: string = 'SecondPage'@State message2: string = 'Back'build() {Row() {Column() {Text(this.message1).fontSize(30).fontWeight(FontWeight.Bold)Button(this.message2).fontSize(30).fontWeight(FontWeight.Bold).height('5%').type(ButtonType.Capsule).margin({top: 30}).backgroundColor("#0D9FFB").width('50%').height('5%')}.width('100%')}.height('100%')}
}
Previewer效果:

3.配置路由
配置第二个页面的路由。
在“Project”窗口,打开“entry > src > main > resources > base > profile”,
在main_pages.json文件中的“src”下配置第二个页面的路由“pages/second”。
代码如下:
{"src": ["pages/FirstPage","pages/SecondPage"]
}
4.实现页面跳转
页面间的导航可以通过页面路由router来实现。
页面路由router根据页面url找到目标页面,从而实现跳转。
使用页面路由需要导入router模块。
(1).第一个页面跳转到第二个页面
在第一个页面中,跳转按钮绑定onClick事件,点击按钮时跳转到第二页。
“FirstPage.ets”文件的代码如下:
// @ohos.router模块功能从API version 8开始支持,请使用对应匹配的SDK
import router from '@ohos.router';@Entry
@Component
struct FristPage {@State message1: string = "FirstPage"@State message2: string = 'Next'build() {Row() {Column() {Text(this.message1).fontSize(30).fontWeight(FontWeight.Bold).height("10%").margin({top: 0})Button(this.message2).fontSize(30).fontWeight(FontWeight.Bold).height('5%').type(ButtonType.Capsule).margin({top: 30}).backgroundColor("#0D9FFB").width('50%').height('5%').onClick(() => {console.info(`Succeeded in clicking the 'Next' button.`)try {router.pushUrl({ url: 'pages/SecondPage' })console.info('Succeeded in jumping to the second page.')} catch (err) {console.error(`Failed to jump to the second page.Code is ${err.code}, message is ${err.message}`)}})}.width('100%')}.height('100%')}
}
(1).第二个页面跳转到第一个页面
在第二个页面中,返回按钮绑定onClick事件,点击按钮时返回到第一页。
“SecondPage.ets”文件的示例如下:
import router from '@ohos.router';@Entry
@Component
struct SecondPage {@State message1: string = 'SecondPage'@State message2: string = 'Back'build() {Row() {Column() {Text(this.message1).fontSize(30).fontWeight(FontWeight.Bold)Button(this.message2).fontSize(30).fontWeight(FontWeight.Bold).height('5%').type(ButtonType.Capsule).margin({top: 30}).backgroundColor("#0D9FFB").width('50%').height('5%').onClick(() => {console.info(`Succeeded in clicking the 'Next' button.`)try {router.pushUrl({ url: 'pages/FirstPage' })console.info('Succeeded in jumping to the second page.')} catch (err) {console.error(`Failed to jump to the second page.Code is ${err.code}, message is ${err.message}`)}})}.width('100%')}.height('100%')}
}
5.实现效果
如开头展示
相关文章:
鸿蒙:实现两个Page页面跳转
效果展示 这篇博文在《鸿蒙:从0到“Hello Harmony”》基础上实现两个Page页面跳转 1.构建第一个页面 第一个页面就是“Hello Harmony”,把文件名和显示内容都改一下,改成“FirstPage”,再添加一个“Next”按钮。 Entry Compone…...
C#有关里氏替换原则的经典问题答疑
目录 理解创建类型与变量类型很关键 先来理解变量类型。 再来理解创建类型。 有了正确的理解再来看疑问 里氏替换原则是面向对象七大原则中最重要的原则。 语法表现:父类容器装子类对象。 namespace 里氏替换原则 {class GameObject { } class Player : GameO…...
【每日一题】689. 三个无重叠子数组的最大和-2023.11.19
题目: 689. 三个无重叠子数组的最大和 给你一个整数数组 nums 和一个整数 k ,找出三个长度为 k 、互不重叠、且全部数字和(3 * k 项)最大的子数组,并返回这三个子数组。 以下标的数组形式返回结果,数组中…...
“开源 vs. 闭源:大模型的未来发展趋势预测“——探讨大模型未来的发展方向
文章目录 每日一句正能量前言什么是大模型的开源与闭源开源与闭源的定义和特点开源的意义开源和闭源的优劣势比较不同的大模型企业,开源、闭源的策略不尽相同。企业在开发垂类模型时选择开源还是闭源大模型开源vs 闭源:两者并非选择题后记 每日一句正能量…...
计算机网络——物理层-信道的极限容量(奈奎斯特公式、香农公式)
目录 介绍 奈氏准则 香农公式 介绍 信号在传输过程中,会受到各种因素的影响。 如图所示,这是一个数字信号。 当它通过实际的信道后,波形会产生失真;当失真不严重时,在输出端还可根据已失真的波形还原出发送的码元…...
【算法挨揍日记】day31——673. 最长递增子序列的个数、646. 最长数对链
673. 最长递增子序列的个数 673. 最长递增子序列的个数 题目解析: 给定一个未排序的整数数组 nums , 返回最长递增子序列的个数 。 注意 这个数列必须是 严格 递增的。 解题思路: 算法思路: 1. 状态表⽰: 先尝试…...
Jmeter做接口测试
1.Jmeter的安装以及环境变量的配置 Jmeter是基于java语法开发的接口测试以及性能测试的工具。 jdk:17 (最新的Jeknins,只能支持到17) jmeter:5.6 官网:http://jmeter.apache.org/download_jmeter.cgi 认识JMeter的目录࿱…...
第14届蓝桥杯青少组python试题解析:23年5月省赛
选择题 T1. 执行以下代码,输出结果是()。 lst "abc" print(lstlst)abcabc abc lstlst abcabc T2. 执行以下代码,输出的结果是()。 age {16,18,17} print(type(sorted(age)))<class set&…...
SpringCloud 微服务全栈体系(十四)
第十一章 分布式搜索引擎 elasticsearch 四、RestAPI ES 官方提供了各种不同语言的客户端,用来操作 ES。这些客户端的本质就是组装 DSL 语句,通过 http 请求发送给 ES。官方文档地址:https://www.elastic.co/guide/en/elasticsearch/client/…...
【开题报告】基于微信小程序的个人健康管理系统的设计与实现
1.选题背景与意义 在现代社会,人们对健康的关注日益增加。随着生活方式的变化和工作压力的增加,许多人意识到保持良好的身体健康对于提高生活质量和幸福感的重要性。 然而,许多人在日常生活中缺乏对自身健康状况的了解和管理。他们可能没有…...
Swagger笔记
一、导包 <!--引入swagger--> <dependency><groupId>io.springfox</groupId><artifactId>springfox-swagger2</artifactId><version>2.9.2</version> </dependency> <!--前端的UI界面--> <dependency><…...
数据结构 堆
手写堆,而非stl中的堆 如何手写一个堆? //将数组建成堆 <O(n) for (int i n / 2;i;i--) //从n/2开始down down(i); 从n/2元素开始down,最下面一层元素的个数是n/2,其余上面的元素的个数是n/2,从最下面一层到最高层…...
将 ONLYOFFICE 文档编辑器与 Node.js 应用集成
我们来了解下,如何将 ONLYOFFICE 文档编辑器与您的 Web 应用集成。 许多 Web 应用都可以从文档编辑功能中获益。但是要从头开始创建这个功能,需要花费大量时间和精力。幸运的是,您可以使用 ONLYOFFICE——这是一款开源办公套件,可…...
CentOS 7搭建Gitlab流程
目录 1、查询docker镜像gitlab-ce 2、拉取镜像 3、查询已下载的镜像 4、新建gitlab文件夹 5、在gitlab文件夹下新建相关文件夹 6、创建运行gitlab的容器 7、查看docker容器 8、根据Linux地址访问gitlab 9、进入docker容器,设置用户名的和密码 10、登录git…...
Idea安装完成配置
目录: 环境配置Java配置Maven配置Git配置 基础设置编码级设置File Header自动生成序列化编号配置 插件安装MyBtisPlusRestfulTooklkit-fix 环境配置 Java配置 Idea右上方,找到Project Settings. 有些版本直接有,有些是在设置下的二级菜单下…...
超详细~25考研规划~感恩现在努力的你!!!
25考研规划 俄语,翻译过来叫我爱你 考试时间 第一天 8.30-11.30政治——100分 2.00-5.00英语——100分 第二天 8.30-11.30数学——150分 2.00-5.00专业课——150分 1.什么是25考研 将在2024年12月参加考研,2025年本科毕业,9月读研究…...
智慧城市安全监控的新利器
在传统的城市管理中,井盖的监控一直是一个难题,而井盖异动传感器的出现为这一问题提供了有效的解决方案。它具有体积小、重量轻、安装方便等特点,可以灵活地应用于各种类型的井盖,实现对城市基础设施的全方位监控。 智能井盖监测终…...
【算法】石子合并(区间dp)
题目 设有 N 堆石子排成一排,其编号为 1,2,3,…,N。 每堆石子有一定的质量,可以用一个整数来描述,现在要将这 N 堆石子合并成为一堆。 每次只能合并相邻的两堆,合并的代价为这两堆石子的质量之和,合并后与这两堆石子…...
C++-特殊类和单例模式
1.请设计一个类,不能被拷贝 拷贝构造函数以及赋值运算符重载,因此想要让一个类禁止拷贝,只需让该类不能调用拷贝构造函数以及赋值运算符重载即可。 //该类不能发生拷贝class NonCopy{public:NonCopy(const NonCopy& Nc) delete;NonCopy&…...
【开源】基于Vue.js的智能教学资源库系统
项目编号: S 050 ,文末获取源码。 \color{red}{项目编号:S050,文末获取源码。} 项目编号:S050,文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 课程档案模块2.3 课…...
RestClient
什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端,它允许HTTP与Elasticsearch 集群通信,而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级ÿ…...
龙虎榜——20250610
上证指数放量收阴线,个股多数下跌,盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型,指数短线有调整的需求,大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的:御银股份、雄帝科技 驱动…...
React Native 导航系统实战(React Navigation)
导航系统实战(React Navigation) React Navigation 是 React Native 应用中最常用的导航库之一,它提供了多种导航模式,如堆栈导航(Stack Navigator)、标签导航(Tab Navigator)和抽屉…...
高等数学(下)题型笔记(八)空间解析几何与向量代数
目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...
Android第十三次面试总结(四大 组件基础)
Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成,用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机: onCreate() 调用时机:Activity 首次创建时调用。…...
sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!
简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求,并检查收到的响应。它以以下模式之一…...
如何更改默认 Crontab 编辑器 ?
在 Linux 领域中,crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用,用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益,允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...
C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)
名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...
LOOI机器人的技术实现解析:从手势识别到边缘检测
LOOI机器人作为一款创新的AI硬件产品,通过将智能手机转变为具有情感交互能力的桌面机器人,展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家,我将全面解析LOOI的技术实现架构,特别是其手势识别、物体识别和环境…...
Ubuntu系统多网卡多相机IP设置方法
目录 1、硬件情况 2、如何设置网卡和相机IP 2.1 万兆网卡连接交换机,交换机再连相机 2.1.1 网卡设置 2.1.2 相机设置 2.3 万兆网卡直连相机 1、硬件情况 2个网卡n个相机 电脑系统信息,系统版本:Ubuntu22.04.5 LTS;内核版本…...
