浅析HarmonyOS开发语言ArkTS

语雀知识库地址：语雀HarmonyOS知识库
飞书知识库地址：飞书HarmonyOS知识库

---

本文示例代码地址：Gitee 仓库地址

哈喽呀，我是小白

在上一篇文章中为大家介绍了鸿蒙方舟开发框架 ArkUI，在文中提到了鸿蒙应用声明式开发语言 ArkTS，这篇文章我们就来扒一扒这神秘的 ArkTS 语言

ArkTS是 HarmonyOS 目前主力应用开发语言。它围绕应用开发在TypeScript 生态基础上做了进一步扩展，继承了 TS 的所有特性，是 TS 的超集

因此，在学习 HarmonyOS 之前建议大家先将 TS 的基本语法落实

ArkTS 与 TypeScript 和 JavaScript 的关系如下所示

ArkTS 在 TS 之上，做了以下三处扩展：

• 定义了声明式 UI 描述、自定义组件和动态扩展 UI 元素的能力，再配合 ArkUI 开发框架中的系统组件及其相关的事件方法、属性方法等共同构成了 UI 开发的主体
• 提供了多维度的状态管理机制。在 UI 开发框架中，与 UI 相关联的数据可以在组件内使用，也可以在不同组件层级间传递，比如父子组件之间、爷孙组件之间，还可以在应用全局范围内传递或跨设备传递。另外，从数据的传递形式来看，可分为只读的单向传递和可变更的双向传递。利用这些能力可以灵活的实现数据和 UI 的联动
• 提供了渲染控制的能力。条件渲染可根据应用的不同状态，渲染对应状态下的 UI 内容。循环渲染可从数据源中迭代获取数据，并在每次迭代过程中创建相应的组件。数据懒加载从数据源中按需迭代数据，并在每次迭代过程中创建相应的组件

而在不久的将来，ArkTS 会逐步增强并行与并发能力、系统类型、分布式开发范式等更多特性

语法描述

我们以一个用户点击按钮改变文字内容的案例来说明 ArkTS 的组成

ArkTS 的基本组成

在本示例中，ArkTS 的基本组成如下图所示

其中：

• 装饰器： 用于装饰类、结构、方法以及变量，赋予其特殊的含义。如本示例中 @Entry、@Component和@State都是装饰器，@Component 表示自定义组件，@Entry 表示该自定义组件为入口组件，@State 表示组件中的状态变量，状态变量变化会触发UI刷新
• UI描述：以声明式的方式来描述 UI 的结构，例如 build() 方法中的代码块
• 自定义组件：可复用的UI单元，可组合其他组件，如上述被 @Component 装饰的 struct Hello
• 系统组件：ArkUI 框架中默认内置的基础和容器组件，可直接被调用，比如本例中的 Column、Text、Divider、Button
• 属性方法：组件可以通过链式调用配置多项属性，如 fontSize()、width()、height()、backgroundColor() 等
• 事件方法：组件可以通过链式调用设置多个事件的响应逻辑，如跟随在 Button 后面的 onClick() 事件

组件的通用属性方法

在 ArkTS 中，有很多不同类型的组件

比如基础组件 Text 文本、Button 按钮、Radio 单选、CheckBox 多选框，容器组件 Column、Row、Flex、Stack

除此之外，还有媒体组件、绘制组件、画布组件等等

而这些组件都有相同的通用属性、通用事件和手势控制

在编辑器中，通过将鼠标悬浮于组件上后，会浮出当前组件的介绍，点击 Show in API Reference 可以在编辑器中快速查看当前组件的相关介绍，包括组件属性，使用示例等

通用属性(举例)

尺寸相关

• width()：设置组件自身的宽度
• height()：设置组件自身的高度
• padding()：设置组件的内边距
• margin()：设置组件的外边距

位置相关

• align()：设置元素内容在元素绘制区域内的对齐方式
• direction()：设置元素水平方向的布局

边框相关

• border()：统一边框样式设置接口
• borderStyle()：设置元素的边框样式
• borderWidth()：设置元素的边框宽度，不支持百分比
• borderColor()：设置元素的边框颜色

通用事件(举例)

• 点击事件 onClick(event: (event?: ClickEvent) => void)
• 触摸事件 onTouch(event: (event?: TouchEvent) => void)
• 按键事件 onKeyEvent(event: (event?: KeyEvent) => void)

手势处理

• 基础手势：单击、双击、长按、拖动、捏合等
• 组合手势：手势识别组合，即多种手势组合为复合手势，支持连续识别、并行识别和互斥识别
• 绑定手势：为组件绑定不同类型的手势事件，并设置事件的响应方法