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

鸿蒙:实现两个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的目录&#xff1…...

第14届蓝桥杯青少组python试题解析:23年5月省赛

选择题 T1. 执行以下代码&#xff0c;输出结果是&#xff08;&#xff09;。 lst "abc" print(lstlst)abcabc abc lstlst abcabc T2. 执行以下代码&#xff0c;输出的结果是&#xff08;&#xff09;。 age {16,18,17} print(type(sorted(age)))<class set&…...

SpringCloud 微服务全栈体系(十四)

第十一章 分布式搜索引擎 elasticsearch 四、RestAPI ES 官方提供了各种不同语言的客户端&#xff0c;用来操作 ES。这些客户端的本质就是组装 DSL 语句&#xff0c;通过 http 请求发送给 ES。官方文档地址&#xff1a;https://www.elastic.co/guide/en/elasticsearch/client/…...

【开题报告】基于微信小程序的个人健康管理系统的设计与实现

1.选题背景与意义 在现代社会&#xff0c;人们对健康的关注日益增加。随着生活方式的变化和工作压力的增加&#xff0c;许多人意识到保持良好的身体健康对于提高生活质量和幸福感的重要性。 然而&#xff0c;许多人在日常生活中缺乏对自身健康状况的了解和管理。他们可能没有…...

Swagger笔记

一、导包 <!--引入swagger--> <dependency><groupId>io.springfox</groupId><artifactId>springfox-swagger2</artifactId><version>2.9.2</version> </dependency> <!--前端的UI界面--> <dependency><…...

数据结构 堆

手写堆&#xff0c;而非stl中的堆 如何手写一个堆&#xff1f; //将数组建成堆 <O(n) for (int i n / 2;i;i--) //从n/2开始down down(i); 从n/2元素开始down&#xff0c;最下面一层元素的个数是n/2&#xff0c;其余上面的元素的个数是n/2&#xff0c;从最下面一层到最高层…...

将 ONLYOFFICE 文档编辑器与 Node.js 应用集成

我们来了解下&#xff0c;如何将 ONLYOFFICE 文档编辑器与您的 Web 应用集成。 许多 Web 应用都可以从文档编辑功能中获益。但是要从头开始创建这个功能&#xff0c;需要花费大量时间和精力。幸运的是&#xff0c;您可以使用 ONLYOFFICE——这是一款开源办公套件&#xff0c;可…...

CentOS 7搭建Gitlab流程

目录 1、查询docker镜像gitlab-ce 2、拉取镜像 3、查询已下载的镜像 4、新建gitlab文件夹 5、在gitlab文件夹下新建相关文件夹 6、创建运行gitlab的容器 7、查看docker容器 8、根据Linux地址访问gitlab 9、进入docker容器&#xff0c;设置用户名的和密码 10、登录git…...

Idea安装完成配置

目录&#xff1a; 环境配置Java配置Maven配置Git配置 基础设置编码级设置File Header自动生成序列化编号配置 插件安装MyBtisPlusRestfulTooklkit-fix 环境配置 Java配置 Idea右上方&#xff0c;找到Project Settings. 有些版本直接有&#xff0c;有些是在设置下的二级菜单下…...

超详细~25考研规划~感恩现在努力的你!!!

25考研规划 俄语&#xff0c;翻译过来叫我爱你 考试时间 第一天 8.30-11.30政治——100分 2.00-5.00英语——100分 第二天 8.30-11.30数学——150分 2.00-5.00专业课——150分 1.什么是25考研 将在2024年12月参加考研&#xff0c;2025年本科毕业&#xff0c;9月读研究…...

智慧城市安全监控的新利器

在传统的城市管理中&#xff0c;井盖的监控一直是一个难题&#xff0c;而井盖异动传感器的出现为这一问题提供了有效的解决方案。它具有体积小、重量轻、安装方便等特点&#xff0c;可以灵活地应用于各种类型的井盖&#xff0c;实现对城市基础设施的全方位监控。 智能井盖监测终…...

【算法】石子合并(区间dp)

题目 设有 N 堆石子排成一排&#xff0c;其编号为 1,2,3,…,N。 每堆石子有一定的质量&#xff0c;可以用一个整数来描述&#xff0c;现在要将这 N 堆石子合并成为一堆。 每次只能合并相邻的两堆&#xff0c;合并的代价为这两堆石子的质量之和&#xff0c;合并后与这两堆石子…...

C++-特殊类和单例模式

1.请设计一个类&#xff0c;不能被拷贝 拷贝构造函数以及赋值运算符重载&#xff0c;因此想要让一个类禁止拷贝&#xff0c;只需让该类不能调用拷贝构造函数以及赋值运算符重载即可。 //该类不能发生拷贝class NonCopy{public:NonCopy(const NonCopy& Nc) delete;NonCopy&…...

【开源】基于Vue.js的智能教学资源库系统

项目编号&#xff1a; S 050 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S050&#xff0c;文末获取源码。} 项目编号&#xff1a;S050&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 课程档案模块2.3 课…...

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

线程同步:确保多线程程序的安全与高效!

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

(二)TensorRT-LLM | 模型导出(v0.20.0rc3)

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

HarmonyOS运动开发:如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...

人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

在Mathematica中实现Newton-Raphson迭代的收敛时间算法(一般三次多项式)

考察一般的三次多项式&#xff0c;以r为参数&#xff1a; p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]&#xff1b; 此多项式的根为&#xff1a; 尽管看起来这个多项式是特殊的&#xff0c;其实一般的三次多项式都是可以通过线性变换化为这个形式…...