鸿蒙应用开发从入门到实战（六）：ArkTS声明式UI和组件化

乙荒 · 2025-9-23 18:51:11

大家好，我是潘Sir，持续分享IT技术，帮你少走弯路。《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容、欢迎关注！
ArkTS 在继承了Typescript语法的基础上，主要扩展了声明式UI开发相关的能力。
一、UI开发演变过程

1.1 HCJ原生时代

网页制作三件套HCJ制作UI界面是非声明式的，具体看一个开关等效果案例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>开关灯</title>
</head>
<body>
<img id="light" src="https://www.cnblogs.com/./imgs/light-off.png" alt="">
<button >开灯</button>
</body>
</html>

复制代码

示例中通过为button案例绑定点击事件，并在事件处理函数中修改dom节点对应的属性值，从而实现状态变化，达到开关灯的效果。
1.2 基于MVVM的框架时代

上述对Dom节点的操作不仅代码繁琐、频繁操作DOM节点还会引起性能问题。因此在前端技术发展过程中，诞生了很多MVVM思想的框架，比如React、Vue等。
MVVM核心思想就是对界面的操作不在通过JavaScript去操作DOM节点，而是通过将UI界面状态与对应的变量进行关联，通过修改变量从而实现UI界面的更新。
ArkTS的声明式UI采用了与之类似的方法，所以如果有Web基础知识，学习过Vue框架，几乎可以把对应的知识无缝平移到HarmonyOS应用的开发中。
接下来介绍鸿蒙应用开发中的2个重要思想：声明式UI、组件化。
二、声明式UI

声明式UI是一种编写用户界面的范式。下面通过上边的开关灯案例来学习这种开发范式，将上例使用声明式的方法来实现。
2.1 声明式UI步骤

步骤1：定义界面状态

按照声明式UI的开发范式，首先需要分析和定义页面的各种状态，并声明相应的状态变量用于表示不同的状态。
当前案例中，界面共有两个状态，分别是开灯和关灯状态，所以我们可以使用一个boolean类型的变量来表示这两个状态，true表示开灯，false表示关灯。如下：

@State isOn: boolean = false;

复制代码

说明：@State用于声明该变量为状态变量。
步骤2：描述界面显示效果

在分析完界面状态后，我们需要准确的描述界面在不同状态下的显示效果。
在当前案例中，具体逻辑如下图所示

步骤3：改变状态

在明确了界面在不同状态下的显示效果后，我们只需修改状态变量的值，就能触发界面的更新。
在当前案例中，若我们将isOn的值改为true，那么界面上就会显示开灯的图片，否则就会显示关灯的图片。
为了实现点击按钮开/关灯的效果，我们可以为按钮绑定点击事件：

当用户点击开灯按钮时，我们就将isOn的值改为true。
当用于点击关灯按钮时，我们就将isOn的值改为false。

2.2 总结

以上就是声明式UI开发范式的大致流程，下面为大家总结一下声明式UI的核心思想

声明式描述

开发者只需描述在界面在不同状态下要呈现的最终效果，而无需关注界面变化的具体过程。

状态数据驱动界面更新

开发者只需修改状态变量的值，界面就会自动更新。

三、组件化思想

在鸿蒙开发中，组件是构成界面的最小单元，我们所看到的界面，都是由众多组件组合而成的，所以编写界面其实就是组合组件的过程，ArkTS提供了很多的内置组件，例如：Text、Button、Image等等；并且ArkTS还支持自定义组件，让开发者可根据具体需求自定义组件中的内容。

有了这些基础，接下来制作第一个入门案例：将以上的开关灯案例使用鸿蒙应用来实现。
四、组件化案例

效果：

1、素材准备

在pages目录下，新建目录imgs，将素材拷贝进来。
2、新建page文件

在pages目录右键，新建page，文件名称为：ControlLight
3、制作界面

按照定义页面状态、描述界面显示效果、改变状态的步骤进行界面制作，最终代码如下：

@Entry
@Component
struct ControlLight {
@State isOpen: boolean = false
build() {
Column({space:50}) {
if (this.isOpen) {
Image('pages/imgs/light-on.png')
.height(300)
.width(300)
}else {
Image('pages/imgs/light-off.png')
.height(300)
.width(300)
}
Row({space:50}){
Button('Close')
.onClick(()=>{
this.isOpen=false
})
Button('Open')
.onClick(()=>{
this.isOpen=true
})
}
}
.width('100%')
.width('100%')
.justifyContent(FlexAlign.Center)
}
}

复制代码

《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容，防止迷路，欢迎关注！

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

晁红叶 · 2025-10-13 19:24:02

鼓励转贴优秀软件安全工具和文档！

押疙 · 2025-11-1 16:59:28

谢谢分享，辛苦了

酒跚骼 · 昨天 04:31

感谢分享，学习下。

账号		自动登录	找回密码
密码			立即注册

鸿蒙应用开发从入门到实战（六）：ArkTS声明式UI和组件化

相关帖子

回复

签约作者

鸿蒙应用开发从入门到实战（六）：ArkTS声明式UI和组件化

相关帖子

相关推荐

回复

签约作者