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

2025-09-16
四川
本文字数：2281 字
阅读完需：约 7 分钟

大家好，我是潘 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>    <style>        .btn-light {            background-color: #000;            color: #FFF;        }    </style></head>
<body>    <div class="container">        <div class="light">            <img id="light" src="./imgs/light-off.png" alt="">        </div>        <div>            <button class="btn-light">开灯</button>        </div>    </div>
    <script>        let img = document.querySelector("#light");        let btn = document.querySelector(".btn-light");        btn.addEventListener("click", function () {            if (img.src.match("light-off")) {                img.src = "./imgs/light-on.png";                btn.innerHTML = "关灯"                btn.className = ""            } else {                img.src = "./imgs/light-off.png";                btn.innerHTML = "开灯"                btn.className = "btn-light"            }        })    </script></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@Componentstruct 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+编程、企业级项目实战等原创内容，防止迷路，欢迎关注！

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/337682ead805f4790011733eb】。文章转载请联系作者。

程序员潘Sir

关注

网名：黑马腾云 2020-06-22 加入

80后创业者、高级架构师，带你轻松学编程！著有《Node.js全栈开发从入门到项目实战》、《Java企业级软件开发》、《HarmonyOS应用开发实战》等书籍。“自学帮”公众号主。

发布

暂无评论

创作场景

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

一、UI 开发演变过程

1.1 HCJ 原生时代

1.2 基于 MVVM 的框架时代

二、声明式 UI

2.1 声明式 UI 步骤

步骤 1：定义界面状态

步骤 2：描述界面显示效果

步骤 3：改变状态

2.2 总结

三、组件化思想

四、组件化案例

1、素材准备

2、新建 page 文件

3、制作界面

程序员潘Sir

评论