鸿蒙实战:页面跳转

news/2024/11/17 16:18:14/

文章目录

  • 1. 实战概述
  • 2. 实现步骤
    • 2.1 创建项目
    • 2.2 准备图片素材
    • 2.3 编写首页代码
    • 2.4 创建第二个页面
  • 3. 测试效果
  • 4. 实战总结

1. 实战概述

  • 实战概述:本实战通过ArkUI框架,在鸿蒙系统上开发了一个简单的两页面应用。首页显示问候语和“下一页”按钮,点击后跳转到第二页。第二页展示欢迎信息并提供“返回”按钮。通过路由模块实现页面跳转,并在控制台记录操作结果。

2. 实现步骤

2.1 创建项目

  • 选择类型与模板:Application - Empty Ability
    在这里插入图片描述
  • 设置项目基本信息
    在这里插入图片描述
  • 单击【Finish】按钮,生成项目基本框架
    在这里插入图片描述
  • 运行程序,查看效果(需要创建模拟器,没有模拟器,可以用previewer)
    在这里插入图片描述
  • 单击绿色的运行按钮
    在这里插入图片描述

2.2 准备图片素材

  • 将两个页面所需背景图片放入resources\base\media目录里
    在这里插入图片描述

2.3 编写首页代码

  • 首页pages/Index.ets
    在这里插入图片描述
// 导入页面路由模块,它提供了页面间跳转的功能
import { router } from '@kit.ArkUI';
// 导入业务错误处理模块,用于处理业务逻辑中可能出现的错误
import { BusinessError } from '@kit.BasicServicesKit';// 使用@Entry装饰器标记这个组件为页面的入口点
@Entry// 使用@Component装饰器定义这个组件
@Component
struct Index {// 定义一个状态变量message,用于存储要显示的文本内容,初始值为'Hi, My Friend'@State message: string = '你好,我的朋友~';// 定义一个状态变量next,用于存储按钮上的文本内容,初始值为'Next'@State next: string = '下一页';// build方法用于构建和返回组件的UI结构build() {Stack() {// 使用Image组件设置背景图片,图片资源通过$r函数引用Image($r('app.media.first')).width('100%') // 设置图片宽度为父容器宽度的100%.height('100%') // 设置图片高度为父容器高度的100%.objectFit(ImageFit.Cover) // 设置图片适应方式为覆盖整个容器,保持图片比例// 使用Row组件创建一个水平布局容器Row() {// 使用Column组件创建一个垂直布局容器,用于放置文本和按钮Column() {// 使用Text组件显示message状态变量的值Text(this.message).fontSize(40) // 设置文本字体大小为40.fontWeight(FontWeight.Bold) // 设置文本字体加粗.fontColor(Color.Green) // 设置文本绿色// 使用Button组件创建一个按钮Button() {// 按钮内的文本,显示next状态变量的值Text(this.next).fontSize(30) // 设置按钮内文本字体大小为30.fontWeight(FontWeight.Bold) // 设置按钮内文本字体加粗}// 设置按钮的类型为胶囊形.type(ButtonType.Capsule)// 设置按钮顶部外边距为20.margin({top: 20})// 设置按钮的背景颜色为蓝色.backgroundColor('#0D9FFB')// 设置按钮的宽度为父容器宽度的40%.width('40%')// 设置按钮的高度为父容器高度的10%.height('10%')// 为按钮绑定点击事件处理函数.onClick(() => {// 点击按钮时,在控制台输出成功点击的信息console.info('单击【下一页】按钮~');// 执行页面跳转操作,跳转到'pages/Second'页面// 使用router.pushUrl方法进行页面跳转,并处理跳转结果router.pushUrl({ url: 'pages/Second' }).then(() => {// 跳转成功后,在控制台输出跳转成功的信息console.info('成功跳转到第二页~');}).catch((err: BusinessError) => {// 捕获跳转过程中可能发生的错误,并处理// 这里假设错误对象是BusinessError类型,并输出错误码和错误信息console.error(`跳转到下一页失败。错误码:${err.code}, 错误信息:is ${err.message}`);});});}// 设置Column容器的宽度为父容器的100%,确保布局填满整个水平空间.width('100%')}// 设置Row容器的高度为父容器的100%,确保布局填满整个垂直空间.height('100%')}}
}
  • 代码说明:这段代码定义了一个ArkUI框架下的页面组件Index,作为鸿蒙系统的用户界面入口。它包含背景图片、文本和按钮。点击按钮后,页面会跳转到pages/Second,同时处理跳转成功或失败的情况,并在控制台输出相关信息。

2.4 创建第二个页面

  • pages目录上单击右键,New | Page | Empty Page
    在这里插入图片描述
  • 设置页面名称 - Second
    在这里插入图片描述
  • 单击【Finish】按钮
    在这里插入图片描述
  • 查看主页配置文件 - main_pages.json
    在这里插入图片描述
  • 编写Second.ets代码
// 导入页面路由模块,用于页面间的导航
import { router } from '@kit.ArkUI';
// 导入业务错误处理模块,用于捕获和处理业务相关的错误
import { BusinessError } from '@kit.BasicServicesKit';// 使用@Entry注解标记Second组件为页面入口点
@Entry// 使用@Component注解定义Second为一个组件
@Component
struct Second {// 定义一个状态变量message,用于存储页面上要显示的文本@State message: string = '泸职院欢迎你';// 定义一个状态变量back,用于存储返回按钮上的文本@State back: string = '返回';// build方法用于构建和返回组件的UI结构build() {Stack() {// 使用Image组件设置背景图片,图片资源通过$r函数引用Image($r('app.media.second')).width('100%') // 设置图片宽度为父容器宽度的100%.height('100%') // 设置图片高度为父容器高度的100%.objectFit(ImageFit.Cover) // 设置图片适应方式为覆盖整个容器,保持图片比例// 使用Row组件创建一个水平布局容器Row() {// 使用Column组件创建一个垂直布局容器,用于放置文本和按钮Column() {// 使用Text组件显示message状态变量的值Text(this.message).fontSize(40) // 设置文本字体大小为40.fontWeight(FontWeight.Bold) // 设置文本字体加粗.fontColor(Color.Red) // 设置文本红色// 使用Button组件创建一个按钮Button() {// 按钮内的文本,显示back状态变量的值Text(this.back).fontSize(30) // 设置按钮内文本字体大小为30.fontWeight(FontWeight.Bold) // 设置按钮内文本字体加粗}// 设置按钮的类型为胶囊形.type(ButtonType.Capsule)// 设置按钮顶部外边距为20.margin({top: 20})// 设置按钮的背景颜色为蓝色.backgroundColor('#0D9FFB')// 设置按钮的宽度为父容器宽度的40%.width('40%')// 设置按钮的高度为父容器高度的10%.height('10%')// 为按钮绑定onClick事件处理函数.onClick(() => {// 点击按钮时,在控制台输出成功点击的信息console.info('成功单击【返回】按钮~')try {// 调用router.back()方法尝试返回到上一页router.back()// 如果返回成功,在控制台输出成功返回的信息console.info('成功返回第一页~')} catch (err) {// 如果返回失败,捕获错误并处理// 尝试将错误对象转换为BusinessError类型,并获取错误码和错误信息let code = (err as BusinessError).code;let message = (err as BusinessError).message;// 在控制台输出失败返回的信息,包括错误码和错误信息console.error(`返回第一页失败。错误码:${err.code}, 错误信息:is ${err.message}`);}})}// 设置Column容器的宽度为父容器宽度的100%.width('100%')}// 设置Row容器的高度为父容器高度的100%,确保布局填满整个页面.height('100%')}}
}
  • 代码说明:这段代码定义了一个ArkUI的页面组件Second,作为鸿蒙系统的界面之一。它包含背景图、红色加粗文本“泸职院欢迎你”和蓝色胶囊形返回按钮。点击按钮尝试返回上一页,并在控制台记录操作结果,包括成功或失败的错误信息。

3. 测试效果

  • 在模拟器上运行程序
    在这里插入图片描述
  • 单击【下一页】按钮,跳转到第二个页面
    在这里插入图片描述
  • 单击【返回】按钮,返回第一个页面
    在这里插入图片描述
  • 查看操作录屏
    在这里插入图片描述

4. 实战总结

  • 通过本次实战,在鸿蒙系统上使用ArkUI框架开发了一个包含两个页面的简单应用。首页展示了问候语和一个按钮,点击后能够跳转到第二页。第二页则展示了欢迎信息和一个返回按钮。通过路由模块实现了页面间的跳转,并在控制台记录了操作结果。这个项目不仅加深了对ArkUI框架的理解,也锻炼了在鸿蒙系统上进行应用开发的实践能力。通过实际操作,学会了如何设置项目、准备素材、编写代码以及测试应用,为未来更复杂的项目打下了坚实的基础。

http://www.ppmy.cn/news/1547755.html

相关文章

简易的学生信息管理系统制作——C语言实现

菜单代码 #include "head.h" int main(int argc, const char *argv[]) {int ch,k;//登录注册while(1){printf("\t1、注册\n");printf("\t2、登录\n");printf("\t0、退出\n");printf("请输入你的选择:");scanf(&…

npm、yarn、pnpm 切换查看镜像源笔记

默认的官方镜像:https://registry.npmjs.org,切换国内淘宝镜像,访问下载更快。 一、npm设置 npm config set registry https://registry.npmmirror.com/2、查看源 npm config get registry3、切回官方镜像 npm config set registry https:…

基于 CentOS7.6 的 Docker 下载常用的容器(MySQLRedisMongoDB),解决拉取容器镜像失败问题

安装MySQL&Redis&MongoDB mysql选择是8版本,redis是选择4版本、mongoDB选择最新版,也可以根据自己的需要进行下载对应的版本,无非就是容器名:版本号 这样去拉去相关的容器镜像。如果你还不会在服务器中安装 docker,可以查…

信息安全工程师(83)Windows操作系统安全分析与防护

一、Windows操作系统安全分析 系统漏洞: Windows操作系统由于其复杂性和广泛使用,可能存在一些已知或未知的漏洞。这些漏洞可能会被黑客利用,进行恶意攻击。微软会定期发布系统更新和补丁,以修复这些漏洞,提高系统的安…

【实用教程】使用思维导图增强 JavaScript甘特图项目工作流程的可见性

DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求,是最完善的甘特图图表库。DHTMLX Diagram库允许用几行代码构建JavaScript流程图,通过自动布局和实时编辑器,它可以更容易地将复杂数据可…

Spring Boot框架:电商解决方案的创新

3 系统分析 当用户确定开发一款程序时,是需要遵循下面的顺序进行工作,概括为:系统分析–>系统设计–>系统开发–>系统测试,无论这个过程是否有变更或者迭代,都是按照这样的顺序开展工作的。系统分析就是分析系…

《PCA 原理推导》18-5线性变换生成的随机变量y_i和y_j的协方差 公式解析

本文是将文章《PCA 原理推导》中的公式单独拿出来做一个详细的解析,便于初学者更好的理解。 公式 18 - 5 18\text{-}5 18-5 的内容如下: cov ( y i , y j ) a i T Σ a j , i , j 1 , 2 , … , m \text{cov}(y_i, y_j) a_i^T \Sigma a_j, \quad i, j…

Xss挑战(跨脚本攻击)

Xss挑战(跨脚本攻击) 首先在kali中下载xss 可以使用命令docker search xss-labs 下载xss docker pull vulfocus/xss-labs 运行容器,映射到8088端口加载镜像 Docker run -dt -p 8088:80 vulfocus/xss-labs 用浏览器访问127.0.0.1:8088 开启…