第三篇【传奇开心果短博文系列】鸿蒙开发技术点案例示例:添加页面和页面路由

传奇开心果短博文系列

  • 系列短博文目录
    • 鸿蒙开发技术点案例示例短博文系列
  • 短博文目录
    • 一、前言
    • 二、编写第一个页面Index.ets 示例代码
    • 三、编写第二个页面Second.ets示例代码
    • 四、第一个页面Index.ets 跳转到第二个页面Second.ets 示例代码
    • 五、第二个页面Scond.ets返回第一个页面Index.ets 示例代码
    • 六、第二个页面Second.ets跳转到第一个页面Index.ets示例代码
    • 七、小结和拓展思路提示

系列短博文目录

鸿蒙开发技术点案例示例短博文系列

短博文目录

一、前言

有了第一个页面,就会有第二个页面。顺势而为自然会有页面跳转路由。今天就讲一讲鸿蒙开发ArkTS编程添加页面,添加页面跳转和路由方法分步骤示例代码。

页面切换

二、编写第一个页面Index.ets 示例代码

鸿蒙系统


// Index.ets
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
// 添加按钮,以响应用户点击Button() {
Text('Next')
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
}
.width('100%')
}
.height('100%')
}
}

三、编写第二个页面Second.ets示例代码

在这里插入图片描述


// Second.ets
@Entry
@Component
struct Second {
@State message: string = 'Hi there'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button() {
Text('Back')
.fontSize(25)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
}
.width('100%')
}
.height('100%')
}
}

四、第一个页面Index.ets 跳转到第二个页面Second.ets 示例代码

在这里插入图片描述

// Index.ets
// 导入页面路由模块
import router from '@ohos.router';
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
// 添加按钮,以响应用户点击
Button() {
Text('Next')
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
// 跳转按钮绑定onClick事件,点击时跳转到第二页
.onClick(() => {
console.info(`Succeeded in clicking the 'Next' button.`)
// 跳转到第二页
router.pushUrl({ url: 'pages/Second' }).then(() => {
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%')
}
}

五、第二个页面Scond.ets返回第一个页面Index.ets 示例代码

在这里插入图片描述

// Second.ets
// 导入页面路由模块
import router from '@ohos.router';
@Entry
@Component
struct Second {
@State message: string = 'Hi there'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button() {
Text('Back')
.fontSize(25)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
// 返回按钮绑定onClick事件,点击按钮时返回到第一页
.onClick(() => {
console.info(`Succeeded in clicking the 'Back' button.`)
try {
// 返回第一页
router.back()
console.info('Succeeded in returning to the first page.')
} catch (err) {
console.error(`Failed to return to the first page.Code is ${err.code}, message is ${err.message}`)
}
})
}
.width('100%')
}
.height('100%')
}
}

六、第二个页面Second.ets跳转到第一个页面Index.ets示例代码

在这里插入图片描述

// Second.ets
// 导入页面路由模块
import router from '@ohos.router';
@Entry
@Component
struct Second {
@State message: string = 'Hi there'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button() {
Text('Back')
.fontSize(25)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
// 返回按钮绑定onClick事件,点击按钮时跳转到第一页
.onClick(() => {
console.info(`Succeeded in clicking the 'Back' button.`)
try {
/// 跳转到第一页
router.pushUrl({ url: 'pages/Index' }).then(() => {
console.info('Succeeded in returning to the first page.')
} catch (err) {
console.error(`Failed to return to the first page.Code is ${err.code}, message is ${err.message}`)
}
})
}
.width('100%')
}
.height('100%')
}
}

七、小结和拓展思路提示

在这里插入图片描述
上面的鸿蒙开发页面跳转和返回示例采用路由的方法实现。这是Stage模型的示例代码写法。

另外,除了页面路由跳转以外,使用Navigation和tabs组件导航,也可以实现页面切换。

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

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

相关文章

[C#]winform部署yolov7+CRNN实现车牌颜色识别车牌号检测识别

【官方框架地址】 https://github.com/WongKinYiu/yolov7.git 【框架介绍】 Yolov7是一种目标检测算法,全称You Only Look Once version 7。它是继Yolov3和Yolov4之后的又一重要成果,是目标检测领域的一个重要里程碑。 Yolov7在算法结构上继承了其前…

std::tuple

https://www.cnblogs.com/Galesaur-wcy/p/15589983.html 因此&#xff0c;基本上 std::make_tuple 有助于自动推导元组类型。 #include <iostream> #include <tuple> #include <string> int main() {// Creating and Initializing a tuplestd::tuple<in…

HTML标签(二)

目录 表格标签 表格的主要作用 表格的具体用法 表头单元格标签 表格属性 表格结构标签 合并单元格 合并单元格的方式&#xff1a; 跨行合并&#xff1a; 跨列合并&#xff1a; 列表标签 无序列表 有序列表 自定义列表 表单标签 表单域 表单域的常用属性 表单元素…

如何使用labelme上次的标记结果继续制作图像的标签

众所周知&#xff0c;labelme 软件可以对图像进行标签的制作&#xff0c;本文就来讲解一下如何根据labelme上次的标记结果&#xff0c;继续对图像的标签进行制作。 首先&#xff0c;确保创建的虚拟环境中已经安装了labelme软件&#xff0c;关于labelme的安装在此我就不赘述了&…

PHP判断访客是否手机端(移动端浏览器)访问的方法总结

PHP判断访客是否手机端、移动端、浏览器访问的方法总结 方法一&#xff1a;使用$_SERVER全局变量方法二&#xff1a;使用PHP的get_browser函数方法三&#xff1a;使用第三方库&#xff08;Mobile Detect&#xff09;方法四&#xff1a;使用WURFL设备数据库 方法一&#xff1a;使…

【HTML教程】跟着菜鸟学语言—HTML5个人笔记经验(二)

HTML学习第二天&#xff01; HTML基础 HTML 标题 HTML 标题&#xff08;Heading&#xff09;是通过<h1> - <h6> 标签来定义的。 实例一&#x1f44d; <h1>这是一个标题</h1> <h2>这是一个标题</h2> <h3>这是一个标题</h3>…

蓝桥杯---立方变自身

观察下面的现象,某个数字的立方,按位累加仍然等于自身. 1^31 8^3 512 17^3 4913 5128 491317 请你计算包括1,8,17在内,符合这个性质的正整数一共有多少个? 请填写该数字,不要填写任何多余的内容或说明性的文字. 代码 public class _02立方变自身 {private static int ans…

[极客大挑战 2019]LoveSQL1

万能密码测试&#xff0c;发现注入点 注意这里#要使用url编码才能正常注入 测试列数&#xff0c;得三列 查看table&#xff0c;一个是geekuser另一个是l0ve1ysq1 查看column&#xff0c;有id&#xff0c;username&#xff0c;password&#xff0c;全部打印出来&#xff0c;…

Golang内置类型和函数及接口、Init函数和main函数

1. 内置类型 1.1. 值类型&#xff1a; boolint(32 or 64), int8, int16, int32, int64uint(32 or 64), uint8(byte), uint16, uint32, uint64float32, float64stringcomplex64, complex128array -- 固定长度的数组1.2. 引用类型&#xff1a;(指针类型) slice -- 序列数组…

微信小程序呼叫设备

一、业务说明 微信最近推出了手机微信呼叫设备的VOIP插件 和 Linux SDK内部体验版本&#xff0c;之前公司小程序开发过设备呼叫微信的功能&#xff0c;设备如何呼叫微信可以看之前的博客&#xff1a;微信小程序音视频通话&#xff08;for硬件&#xff09;组件的使用-CSDN博客。…

【医学图像数据增强】切割-拼接(CS-DA)

切割-拼接CS-DA CS-DA 核心思想自然图像和医学图像之间的关键差异CS-DA 步骤确定增强后的数据数量 代码复现 CS-DA 核心思想 论文链接&#xff1a;https://arxiv.org/ftp/arxiv/papers/2210/2210.09099.pdf 大多数用于医学分割的数据增强技术最初是在自然图像上开发的&#x…

flink中的重启策略

背景 在flink宣布作业失败的时候往往会进行重试&#xff0c;本文就来记录下flink中的几种重启策略 flink失败重启策略 1.固定延时重启 这种重启策略会重启固定的次数&#xff0c;每两次重启之间会间隔固定的时间间隔&#xff0c;如果失败次数达到了配置的次数限制&#xff0…

如何实现动态代理(俩种方式)

文章目录 基于接口的动态代理&#xff1a;基于类的动态代理&#xff1a; 基于接口的动态代理&#xff1a; 通过Java的反射机制来动态创建代理对象&#xff0c;代理对象实现了一个或多个接口。 Java提供了java.lang.reflect包中的Proxy类和InvocationHandler接口来实现基于接口…

数据类型(中)

数据类型&#xff08;中&#xff09; 1.列表&#xff08;list&#xff09;1.1 定义1.2 独有功能1.3 公共功能1.4 转换1.5. 其他1.5.1 嵌套 1.6 列表阶段作业 2.元组2.1 定义2.2 独有功能2.3 公共功能2.4 转换2.5 其他2.5.1 嵌套 总结作业 各位小伙伴想要博客相关资料的话关注公…

常见算法思想:回溯法

作者简介&#xff1a;大家好&#xff0c;我是smart哥&#xff0c;前中兴通讯、美团架构师&#xff0c;现某互联网公司CTO 联系qq&#xff1a;184480602&#xff0c;加我进群&#xff0c;大家一起学习&#xff0c;一起进步&#xff0c;一起对抗互联网寒冬 学习必须往深处挖&…

E - Rainbow Strings

如果字符串中的每个字母都不同&#xff0c;则将字符串定义为彩虹字符串。空字符串也被认为是彩虹字符串。 给定一个小写字母字符串&#xff0c;计算彩虹字符串的不同子序列的数量。如果一个子序列中包含索引&#xff0c;但另一个子序列不包含索引&#xff0c;则即使生成的字符串…

ORM-06-jooq 入门介绍

拓展阅读 The jdbc pool for java.(java 手写 jdbc 数据库连接池实现) The simple mybatis.&#xff08;手写简易版 mybatis&#xff09; JOOQ JOOQ 可以通过数据库直接生成 java 代码&#xff0c;通过 flent-api 进行数据库操作。 SQL builder JOOQ 非常的灵活和强大。你可…

【XR806开发板试用】编译中的几个问题以及hello跑起来

首先我们先看https://xr806.docs.aw-ol.com/ 该文档部分不适应 当前最新gitee 如果没有repo工具&#xff0c;可通过下面的git命令获取repo。 git clone https://gerrit-googlesource.lug.ustc.edu.cn/git-repo下载代码 没有使用ssh://方式 过于麻烦 mkdir xr806_openharmony…

加载服务端发送的模型文件_unity开发进阶

加载服务端发送的模型文件 前言一、服务端搭建二、unity请求文件三、加载模型结语 前言 之前我们学习制作的都是离线状态下的东西&#xff0c;今天我们学习制作一个小demo。 内容就是我们用unity请求后台&#xff0c;接受后台发送过来的模型&#xff0c;然后将模型加载到场景中…

0125-2-Vue深入学习1—mustache模板引擎原理

[mustache] 是 “胡子”的意思&#xff0c;因为它的嵌入标记 {{ }} 旋转过来很像[胡子]&#xff0c;Vue中的 {{ }} 语法也引用了mustache&#xff0c;这也是我深入学习的目的。 1、原始js方式使 数据 变为视图 <ul id"list"></ul><script>var arr …