鸿蒙:实现两个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.实现效果

如开头展示

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

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

相关文章

复杂类型,查询--学习笔记

1&#xff0c;复杂类型 解决问题&#xff1a;一些不容易获取到的数据&#xff0c;例如数组类型&#xff0c;集合类型等&#xff0c;获取他们的数据 -- 1.创建表 create table tb_array_person(name string,city_array array<string> )row format delimited fields term…

Servlet执行流程Servlet 生命周期

Servlet 生命周期 对象的生命周期指一个对象从被创建到被销毁的整个过程 import javax.servlet.*; import javax.servlet.annotation.WebServlet; import java.io.IOException; WebServlet(urlPatterns "/demo",loadOnStartup 10) public class ServletDemo imple…

Redis篇---第十三篇

系列文章目录 文章目录 系列文章目录前言一、redis的过期策略以及内存淘汰机制二、Redis 为什么是单线程的三、Redis 常见性能问题和解决方案?前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看…

Vue弹窗的使用

Vue弹窗的使用&#xff1a; Vue弹窗传值&#xff1a;

51单片机LED灯渐明渐暗实验

51单片机LED灯渐明渐暗实验 1.概述 这篇文章介绍使用单片机控制两个LED彩灯亮度渐明渐暗效果&#xff0c;详细介绍了操作步骤以及完整的程序代码&#xff0c;动手就能制作的小实验。 2.操作步骤 2.1.硬件搭建 1.硬件准备 名称型号数量单片机STC12C2052AD1LED彩灯无2晶振1…

单例设计模式是什么?什么是 Singleton 单例设计模式?Python 单例(单件)设计模式示例代码

什么是 Singleton 单例设计模式&#xff1f; 单例模式是一种创建型设计模式&#xff0c;它确保一个类只有一个实例&#xff0c;并提供一个全局访问点来访问该实例。 主要思想&#xff1a; 单例模式确保某个类只有一个实例&#xff0c;并提供了一个访问该实例的全局访问点。它…

vatee万腾科技先锋之选:vatee创新力驱动着未来发展

在科技潮流的浩荡前行中&#xff0c;Vatee万腾崭新的科技先锋之选正以强大的创新力引领着未来的发展。Vatee万腾凭借其前瞻性的技术理念和卓越的创新实践&#xff0c;成为业界的引领者&#xff0c;为整个科技行业树立了标杆。 Vatee万腾不仅仅是一家科技公司&#xff0c;更是一…

React中StrictMode严格模式,导致开发环境,接口会请求两次或多次( useEffect 请求多次)

问题描述&#xff1a; 我在用 create-react-app时&#xff0c;开发环境&#xff0c;一进页面接口会请求两次或多次。 我在首页 useEffect里 请求一个接口&#xff0c;整个页面就在这里请求这一次接口。但 实际上请求了两次。我检查了代码&#xff0c;确定只调用了一次&#xf…

Go 异常处理流程

在 Go 语言中&#xff0c;panic、recover 和 defer 是用于处理异常情况的关键字。它们通常一起使用来实现对程序错误的处理和恢复。 1. defer 语句 defer 用于在函数返回之前执行一段代码。被 defer 修饰的语句或函数会在包含 defer 的函数执行完毕后执行。defer 常用于资源清…

基于SSM 离退休管理平台-计算机毕设 附源码 52629

ssm离退休管理平台 摘 要 随着社会的发展&#xff0c;社会的方方面面都在利用信息化时代的优势。互联网的优势和普及使得各种系统的开发成为必需。 本文以实际运用为开发背景&#xff0c;运用软件工程原理和开发方法&#xff0c;它主要是采用SSM技术和mysql数据库来完成对系统的…

上海站活动回顾 | 聚焦私募视野,助力量化投研交易

11月16日下午&#xff0c;DolphinDB 携手华金证券&#xff0c;在上海成功举办了 D-Day 私募行业交流会&#xff0c;为大家带来了详实的私募行业场景解析、功能介绍、案例分享及现场演示。三十余位来自私募机构的核心策略研发、量化交易员、数据分析专家们齐聚现场&#xff0c;深…

Rust生态系统:探索常用的库和框架

大家好&#xff01;我是lincyang。 今天我们来探索Rust的生态系统&#xff0c;特别是其中的一些常用库和框架。 Rust生态系统虽然相比于一些更成熟的语言还在成长阶段&#xff0c;但已经有很多强大的工具和库支持各种应用的开发。 常用的Rust库和框架 Serde&#xff1a;一个…

计算机网络之概述

一、概述 1.1因特网概述 定义 网络(Network)由若干结点(Node)和连接这些结点的链路(Link)组成。多个网络还可以通过路由器互连起来&#xff0c;这样就构成了一个覆盖范围更大的网络&#xff0c;即互联网&#xff08;或互连网&#xff09;因此&#xff0c;互联网是“网络的网络…

Nginx解决跨域问题的一些想法

参考博客https://blog.csdn.net/agonie201218/article/details/112562252&#xff0c;https://blog.csdn.net/Zisson_no_error/article/details/119357629。都是写得非常很好的文章 重中之重&#xff1a;一定要长眼睛&#xff0c;带脑子 通过跨域访问的报错&#xff0c;看清楚…

【开源】基于Vue.js的高校学院网站的设计和实现

项目编号&#xff1a; S 020 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S020&#xff0c;文末获取源码。} 项目编号&#xff1a;S020&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 学院院系模块2.2 竞赛报名模块2.3 教…

软件工程--软件建模--结构化方法通俗语言总结(暴肝超详解)(包含数据流图、数据字典、ER图、结构化设计和优化......)

目录 结构化分析 数据流图DFD 定义数据字典 实体关系图&#xff08;E-R图&#xff09; 结构化设计 变换映射 事务映射 优化结构设计 实例分析 详细设计&#xff08;过程设计&#xff09; 结构化方法是一种系统化开发软件的方法&#xff0c;该方法基于模块化的思想&am…

nginx-编译安装-基础指令-信号

nginx 的编译与安装 nginx目录介绍 如果我们需要整合第三方模块&#xff0c;需要自己编译然此模块编译到nginx里面。apt和yum的安装只具有常用的基础功能。 下载nginx wget http://nginx.org/download/nginx-1.14.0.tar.gz/auto 目录 Changes 描述了一每个版本提供了那些特…

【JavaEE初阶】 JavaScript基础语法——贰

文章目录 &#x1f332;条件语句&#x1f6a9;if 语句&#x1f6a9;三元表达式&#x1f6a9;switch&#x1f6a9;循环语句&#x1f388;while 循环&#x1f388;continue&#x1f388;break&#x1f388;for 循环 &#x1f340;数组&#x1f6a9;创建数组&#x1f6a9;获取数组…

vue中使用echarts渐变柱状图 Cannot read properties of undefined (reading ‘graphic‘)解决方法

在使用渐变颜色时报错&#xff0c;Cannot read properties of undefined (reading ‘graphic’) echarts也下载了&#xff0c;引入了&#xff0c;就是报错&#xff0c;用不了new charts&#xff0c; 结果换了一个版本号就可以了&#xff0c;本来用的"echarts": "…

记录一次hiveserver2和namenode进程宕掉的排查

背景 最近发现集群主节点总有进程宕机&#xff0c;定位了大半天才找到原因&#xff0c;分享一下 排查过程 查询hiveserver2和namenode日志&#xff0c;都是正常的&#xff0c;突然日志就不记录了&#xff0c;直到我重启之后又恢复工作了。 排查各种日志都是正常的&#xff0…