开关灯

**大家好，我是潘Sir，持续分享IT技术，帮你少走弯路。《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容、欢迎关注！** **ArkTS** 在继承了**Typescript**语法的基础上，主要扩展了**声明式UI开发**相关的能力。 ## 一、UI开发演变过程 ### 1.1 HCJ原生时代网页制作三件套HCJ制作UI界面是非声明式的，具体看一个开关等效果案例开关灯

示例中通过为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：描述界面显示效果在分析完界面状态后，我们需要准确的描述界面在不同状态下的显示效果。在当前案例中，具体逻辑如下图所示 ![1开关等伪代码.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b2936cd7fcfb4c2692124ac38795a5ec~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY5r2YU2ly:q75.awebp?rk3s=f64ab15b&x-expires=1764647263&x-signature=bKsoJMy7FTOwKGGfPIl17bhMxcY%3D) #### 步骤3：改变状态在明确了界面在不同状态下的显示效果后，我们只需修改状态变量的值，就能触发界面的更新。在当前案例中，若我们将`isOn`的值改为`true`，那么界面上就会显示**开灯**的图片，否则就会显示**关灯**的图片。为了实现点击按钮开/关灯的效果，我们可以为按钮绑定点击事件： * 当用户点击**开灯按钮**时，我们就将`isOn`的值改为`true`。 * 当用于点击**关灯按钮**时，我们就将`isOn`的值改为`false`。 ![2改变状态.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/4f84cc84697b464ab5173aa43db9b290~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY5r2YU2ly:q75.awebp?rk3s=f64ab15b&x-expires=1764647263&x-signature=EVhiRvF7Ok3wycKNK0CVy8sq7MY%3D) ### 2.2 总结以上就是声明式UI开发范式的大致流程，下面为大家总结一下声明式UI的核心思想 * **声明式描述** 开发者只需描述在界面在不同状态下要呈现的最终效果，而无需关注界面变化的具体过程。 * **状态数据驱动界面更新** 开发者只需修改状态变量的值，界面就会自动更新。 ![3界面状态双向绑定.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/a2a9382533494066aed574432582b5f5~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY5r2YU2ly:q75.awebp?rk3s=f64ab15b&x-expires=1764647263&x-signature=gVQMzBvh2jcsExxO25bubv5zfG0%3D) ## 三、组件化思想在鸿蒙开发中，组件是构成界面的最小单元，我们所看到的界面，都是由众多组件组合而成的，所以编写界面其实就是组合组件的过程，ArkTS提供了很多的内置组件，例如：`Text`、`Button`、`Image`等等；并且ArkTS还支持自定义组件，让开发者可根据具体需求自定义组件中的内容。 ![4组件.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/18286359d8884e4687eb730d420f674b~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY5r2YU2ly:q75.awebp?rk3s=f64ab15b&x-expires=1764647263&x-signature=Hlk5iwlzP6YVXLURFwGiw1gTrhs%3D) 有了这些基础，接下来制作第一个入门案例：将以上的开关灯案例使用鸿蒙应用来实现。 ## 四、组件化案例效果： ![5案例效果.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/2b87864502014e37887368f30ffa1b52~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY5r2YU2ly:q75.awebp?rk3s=f64ab15b&x-expires=1764647263&x-signature=CWtrmEKlNAeHehbN7j%2F%2BGBa%2Fenk%3D) ### 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+编程、企业级项目实战等原创内容，防止迷路，欢迎关注！**