【 HarmonyOS 5 入门系列 】鸿蒙HarmonyOS示例项目讲解

article/2025/6/23 16:01:14

【 HarmonyOS 5 入门系列 】鸿蒙HarmonyOS示例项目讲解

一、前言：移动开发声明式 UI 框架的技术变革

在移动操作系统的发展历程中，UI 开发模式经历了从命令式到声明式的重大变革。

根据华为开发者联盟 2024 年数据报告显示，HarmonyOS 设备激活量已突破 7.3 亿台，其中采用 ArkTS 声明式 UI 框架开发的应用占比达 68%，较 2023 年提升 45 个百分点。

这标志着以 ArkTS 为代表的声明式开发范式，正在成为智能终端应用开发的主流选择。

本文将以一个典型的 ArkTS 组件代码为例（代码示例来自IDE示例）。

该代码实现了一个基础的交互界面，包含状态管理、布局设计、事件处理等核心要素，是理解 ArkTS 组件开发的绝佳切入点。

二、ArkTS 组件基础：代码结构与核心装饰器

（1）项目结构梳理
在这里插入图片描述
图（1-1）

如上图所示，该项目整体结构为HarmonyOS示例空Ability项目结构。一个常规的鸿蒙应用项目，重点需要关心编码的部分，分为三个：

  1. AppScope 设置应用的包名，图标等相关信息
  2. entry - src - main - ets 只要编码的所在地。entryAbility作为启动初始的入口，需要修改其中的启动页。pages为UI界面和逻辑开发。
  3. resource 资源目录下的图标目录 media，页面配置路由main_pages

（2）ArkTS组件声明与入口标记

@Entry
@Component
struct Index {// 组件内部逻辑
}

1. @Entry 装饰器：
标记应用的Ability启动加载的入门，我们可以理解为界面。所以该装饰器修饰，都可以在Ability中加载，作为界面使用。

2. 下面为EntryAbility代码示例，配置启动页：

import { AbilityConstant, ConfigurationConstant, UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { window } from '@kit.ArkUI';const DOMAIN = 0x0000;export default class EntryAbility extends UIAbility {onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);}onWindowStageCreate(windowStage: window.WindowStage): void {// 舞台添加启动页面windowStage.loadContent('pages/Index', (err) => {if (err.code) {hilog.error(DOMAIN, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err));return;}hilog.info(DOMAIN, 'testTag', 'Succeeded in loading the content.');});}}

3. 下面为路由配置表resource - base - profile - main_pages.json文件：

{"src": ["pages/Index"]
}

当我们使用快捷键，创建空的pages时，IDE会自动在该路由表添加信息。若是手动，一定要记得添加页面的信息。
在这里插入图片描述

4. @Component 装饰器： 代表该类是组建类，可以给其他界面和组件调用，例如：

// 这里引入
import { Index } from './Index'@Entry
@Component
struct APage {build() {RelativeContainer() {// 这里使用Index()}.height('100%').width('100%')}
}

5. export导出
但是需要注意的是，我们需要对要引入的组件类，进行export导出标记，其他类才能去导出。所以我们的Index类需要作如下修改：

@Entry
@Component
export struct Index {// 组件内部逻辑
}

（3）build函数是做什么的呢？

1. build函数构建概述

组件构建函数，定义UI结构和布局，从示例代码可以看出，build中进行了鱼鳞排版布局的编写。这也是声明式UI布局编写的一大特写，不管是Flutter还是Android的compose，都是如此。

布局通过嵌入-展开的形式，可以一目了然整个UI布局的结构。并且通过链式调用，非常方便的设置UI属性。

@Entry // 应用入口组件标识
@Component // 声明为组件
export struct Index {// 组件构建函数，定义UI结构和布局build() {// 创建一个相对容器，占满整个父容器空间RelativeContainer() {// 显示message状态变量的文本组件Text(this.message).id('HelloWorld') // 设置组件ID，用于样式或交互引用.fontSize($r('app.float.page_text_font_size')) // 从资源文件获取字体大小.fontWeight(FontWeight.Bold) // 设置字体加粗.alignRules({ // 设置文本在容器中的对齐规则center: { anchor: '__container__', align: VerticalAlign.Center }, // 垂直居中middle: { anchor: '__container__', align: HorizontalAlign.Center } // 水平居中})}.height('100%') // 容器高度占满父容器.width('100%')  // 容器宽度占满父容器}
}

2.RelativeContainer 的定位策略
HarmonyOS 提供 7 种基础布局容器，RelativeContainer（相对布局）适用于元素需相对于容器或其他元素定位的场景。

根据华为 UX 设计规范，在屏幕适配场景中，相对布局的设备兼容性比绝对布局高 40%，尤其适合折叠屏等多形态设备。

.alignRules({center: { anchor: '__container__', align: VerticalAlign.Center },middle: { anchor: '__container__', align: HorizontalAlign.Center }
})

锚点系统：
__container__表示相对于父容器定位，支持自定义锚点（如子组件 ID）。华为布局引擎数据显示，合理使用锚点可减少 20% 的布局计算时间，避免递归定位导致的性能瓶颈。​

对齐策略：
VerticalAlign.Center（垂直居中）与 HorizontalAlign.Center（水平居中）组合使用，实现文本组件的屏幕中心定位。该策略在不同分辨率设备上的定位误差小于 1px（基于 1920x1080 到 4K 分辨率的测试数据）。

（4）数据交互与事件交互
1. 响应式状态管理：@State 装饰器

@State message: string = 'Hello World';

@State 修饰的变量会被框架自动追踪，当变量值发生变化时，系统会智能识别受影响的 UI 元素并触发局部重绘。与传统命令式 UI 更新（如 Android 的 findViewById+setText）相比，声明式更新减少了 60% 的 DOM 操作量（基于 Chromium 内核性能测试数据）。

2. 绑定点击事件：
通过在点击事件中，处理message变量的赋值。ArkUI框架自动处理数值变化后，使用了该数值的UI进行重新渲染刷新。

.onClick(() => {this.message = 'Welcome';
})

      // 显示message状态变量的文本组件Text(this.message)

（5）资源文件的管理

.fontSize($r('app.float.page_text_font_size'))

$r () 函数：
从资源文件（resources/base/element/string.json 等）动态获取字体大小，支持多语言、多设备适配。华为开发者平台数据显示，使用资源文件管理样式可使应用包体积减少 15%，避免硬编码导致的维护成本。​

类型安全：
DevEco Studio 提供资源引用智能提示，减少 70% 的资源路径拼写错误（基于千次开发测试数据）。

三、示例项目源码与详细注释

Index.page

@Entry // 应用入口组件标识
@Component // 声明为组件
export struct Index {// 响应式状态变量，用于存储显示的文本内容@State message: string = 'Hello World';// 组件构建函数，定义UI结构和布局build() {// 创建一个相对容器，占满整个父容器空间RelativeContainer() {// 显示message状态变量的文本组件Text(this.message).id('HelloWorld') // 设置组件ID，用于样式或交互引用.fontSize($r('app.float.page_text_font_size')) // 从资源文件获取字体大小.fontWeight(FontWeight.Bold) // 设置字体加粗.alignRules({ // 设置文本在容器中的对齐规则center: { anchor: '__container__', align: VerticalAlign.Center }, // 垂直居中middle: { anchor: '__container__', align: HorizontalAlign.Center } // 水平居中}).onClick(() => { // 点击事件处理this.message = 'Welcome'; // 点击后更新状态变量，触发UI刷新})}.height('100%') // 容器高度占满父容器.width('100%')  // 容器宽度占满父容器}
}

APage.ets

import { Index } from './Index'@Entry
@Component
struct APage {build() {RelativeContainer() {Index()}.height('100%').width('100%')}
}

http://www.hkcw.cn/article/BgVIEErhcw.shtml

相关文章

蒋雨融回应在哈佛毕业典礼上的演讲 堂堂正正争取话语权

蒋雨融回应在哈佛毕业典礼上的演讲 堂堂正正争取话语权

蒋雨融回应在哈佛毕业典礼上的演讲 堂堂正正争取话语权！6月2日晚，蒋雨融Luanna在微博上回应了关于哈佛演讲的争议。她表示，无论是争取成为哈佛毕业致辞代表，还是在各个平台上开设账号，都是为了争夺公共话语空间。她认为，如果中国学生不去争取这个空间，就会被其他学生占据…
阅读更多...
Linux服务器安装GUI界面工具

Linux服务器安装GUI界面工具

注意： 本文内容于 2025-05-31 18:55:23 创建，可能不会在此平台上进行更新。如果您希望查看最新版本或更多相关内容，请访问原文地址：Linux服务器安装GUI界面工具。感谢您的关注与支持！ 本文记录在Linux使用Docker安装G…
阅读更多...
什么是绿电直连

什么是绿电直连

定义 绿电直连是指风电、太阳能发电、生物质发电等新能源不直接接入公共电网，而是通过专用直连线路向单一电力用户直接供应绿色电力，实现电力的物理溯源。 “物理直连” 是指可再生能源发电项目的发电端与用户通过专门铺设的输电线路直接相连&#xff…
阅读更多...
Spring Boot中保存前端上传的图片

Spring Boot中保存前端上传的图片

在Spring Boot中保存前端上传的图片可以通过以下步骤实现&#xff1a; 1. 添加依赖 确保在pom.xml中已包含Spring Web依赖&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifact…
阅读更多...
并查集(上)

并查集(上)

1 并查集所包含的方法 int find(a); bool issameset(a,b); void union(a,b); 方法一&#xff1a;int find(a);这个表示是否可以找到这里集合的代表元素 方法二&#xff1a; bool issameset(a,b);这个是表示两个元素是否在一个集合 方法三&#xff1a;void union(a,b);这个表示…
阅读更多...
「完整」AI文档库 | 5月20最新发布，221页，《北京大学AI+Agent与Agentic+AI的原理和应用洞察与未来展望》

「完整」AI文档库 | 5月20最新发布，221页，《北京大学AI+Agent与Agentic+AI的原理和应用洞察与未来展望》

昨天大师兄给大家介绍了复旦大学的一篇关于AI的讲座。 「完整」AI文档库 | 终于等到你&#xff0c;《复旦大学&#xff1a;大语言模型能力来源与边界》 今天大师兄给大家带来一篇《北京大学DeepSeek系列11&#xff1a;AIAgent与AgenticAI的原理和应用洞察与未来展望》。这篇A…
阅读更多...
《棒球万事通》棒球特长生升学方向·棒球1号位

《棒球万事通》棒球特长生升学方向·棒球1号位

棒球升学双轨制发展路径解析/Bilingual Baseball Career Pathway Analysis 1. 美国大学体育奖学金体系/US Collegiate Scholarship System 核心数据: NCAA D1院校平均每年提供11.7个棒球奖学金 顶级投手球速标准: 高中毕业前需达87-95mph(约140-153km/h) 学术基准: NCAA要…
阅读更多...
使用nhdeep档案管理系统单机版，创建归档文件目录打印文件

使用nhdeep档案管理系统单机版，创建归档文件目录打印文件

打开nhdeep档案管理系统单机版&#xff0c;查看已经导入或添加到文书档案库管理的条目数据。 文书档案库件目录信息&#xff1a; 文书档案库盒信息&#xff1a; 选择多条盒记录&#xff0c;点击盒内目录打印按钮&#xff0c;打开预览窗口 可以选择归档文件的打印模版&#xff…
阅读更多...
2022年第十三届蓝桥杯青少c++省赛真题——分解整数

2022年第十三届蓝桥杯青少c++省赛真题——分解整数

2022年第十三届蓝桥杯青少c省赛真题——分解整数 题目点下方&#xff0c;支持在编程&#xff0c;在线测评~ 分解整数_C_少儿编程题库学习中心-嗨信奥 题库收集了历届各白名单赛事真题和权威机构考级真题&#xff0c;覆盖初赛—省赛—国赛&#xff0c;支持在线考试&#xff0c;…
阅读更多...
CUDA与OpenGL混合编程图形渲染

CUDA与OpenGL混合编程图形渲染

CUDA与OpenGL混合编程图形渲染 CUDA与OpenGL混合编程图形渲染 CUDA与OpenGL混合编程图形渲染前言一、 通过OpenGL映射GPU内存二、CUDA使用的两种OpenGL内存对象1、像素缓冲对象&#xff08;PBO&#xff09;&#xff1a;OpenGL中用于存储像素的一段内存。2D图像是由多个像素和颜…
阅读更多...
俄乌第二轮谈判都谈了哪些内容 换俘与停火提议成焦点

俄乌第二轮谈判都谈了哪些内容 换俘与停火提议成焦点

6月2日，俄罗斯和乌克兰两国代表团在土耳其伊斯坦布尔就和平解决俄乌冲突举行第二轮直接谈判。会谈结束后，俄方代表团团长、俄总统助理梅金斯基表示，俄方对第二轮谈判的成果感到满意。梅金斯基透露，俄方向乌方提交了关于乌克兰问题的和平备忘录，其中包含实现真正停火的建议…
阅读更多...
乒超联赛门票于6月3日开售 雄安新区首迎顶尖赛事

乒超联赛门票于6月3日开售 雄安新区首迎顶尖赛事

6月9日至11日，2025赛季中国乒乓球俱乐部超级联赛常规赛第一阶段比赛将在河北雄安新区雄安体育中心体育馆举行。赛事门票将于6月3日18:00在秀动票务平台开售，票价从288元至788元不等。2025赛季乒超联赛包括男子和女子团体赛，分为三个阶段的常规赛和总决赛，时间跨度从6月到12…
阅读更多...
女子拖欠停车费近3000元被起诉：怎么证明是我的车在停放

女子拖欠停车费近3000元被起诉：怎么证明是我的车在停放

多次把车停在路边收费停车位上却不交费，两年半拖欠了近3000元停车费，常德女子李倩（化名）被起诉到法院。对此李倩称，收费公司使用的感应、计费系统常出故障，无法证明收费时段是她的车在停放，请求法院驳回起诉。6月2日，记者从中国裁判文书网获悉，常德中院判决李倩须支付…
阅读更多...
小伙被4根烧烤签扎进脖子 已脱离生命危险

小伙被4根烧烤签扎进脖子 已脱离生命危险

6月2日凌晨2时许，有网友发帖称山西临汾一名小伙脖子上被扎了多根烧烤签。视频显示，小伙脖子上插着四根金属签子，签上还有烧烤肉串，急救人员小心翼翼地将他送往病床。据了解，事发凌晨零时前后，一家烧烤店内两名年轻人发生口角，一人扔出烧烤签时不慎将其扎进另一人的脖子。…
阅读更多...
香港一银行遭劫匪抢走30余万港币 职员受伤已出院

香港一银行遭劫匪抢走30余万港币 职员受伤已出院

6月2日，香港恒生银行沙田第一城分行发生一起持刀抢劫案。一名劫匪持刀威胁银行职员后劫走约30余万元港币及少量外币，随后逃离现场。案件中有一名职员颈部受轻伤，送往医院救治后已出院。当天17时许，警方接到报案称，一名男子独自进入银行，坐下约15分钟后突然拿出一把刀，威…
阅读更多...
谁有望成为韩国新总统 李在明领跑选情

谁有望成为韩国新总统 李在明领跑选情

韩国第21届总统选举定于6月3日举行，主要候选人仍在抓紧最后机会展开竞选活动，争取更多选票。此次大选在前总统尹锡悦被弹劾之后举行，共有7名候选人登记参选，但其中两人已宣布退选，最终有5名候选人参加大选角逐。这5名候选人分别是共同民主党候选人李在明、国民力量党候选人…
阅读更多...
连贾冰都瘦了！就等一个沈腾了 喜剧圈瘦身潮来袭

连贾冰都瘦了！就等一个沈腾了 喜剧圈瘦身潮来袭

沙溢、贾玲、贾冰都瘦了，压力给到了沈腾。今天，话题“贾冰减肥成功瘦到脱相”登上微博热搜。起因是5月31日，演员贾冰的妻子发视频祝福大家端午节快乐，并配文“从此我家多了个瘦子”。从贾冰妻子发布的两人合影中可以看到，贾冰明显瘦了很多。评论区纷纷询问他怎么瘦了这么多…
阅读更多...
韩大选正式投票 五候选人角逐总统

韩大选正式投票 五候选人角逐总统

韩国第21届总统选举于当地时间3日6时在全国14295个投票站正式启动，投票截止时间为当晚8时。5月29日上午6时，韩国进行了“事前投票”，选民在首尔麻浦区等地的投票站等候投票。预计选举结果最早可于3日晚12时左右初现轮廓。新任总统将面临经济、政治等多重考验，并需缓解保守和…
阅读更多...
欧洲最高的活火山喷发 数千米高羽流壮观景象

欧洲最高的活火山喷发 数千米高羽流壮观景象

6月2日，意大利西西里岛的埃特纳火山发生大规模喷发，形成了数千米高的火山羽流。据社交媒体上的目击者称，远在50公里外的陶尔米纳和40公里外的卡塔尼亚都能听到爆炸声。西西里岛民防部门发布航空通知，要求所有航班避开该地区。埃特纳火山海拔超过3300米，有多个火山口，是欧…
阅读更多...
大乐透开出10注一等奖！单注超800万 奖金高达814万

大乐透开出10注一等奖！单注超800万 奖金高达814万

大皖新闻讯 6月2日，中国体彩网更新了彩票开奖公告。其中，超级大乐透开出10注一等奖，单注奖金8139831元。具体如下：编辑 汪艳责任编辑：zx0176
阅读更多...
推荐文章

Copyright @ 2022~2023