自学HarmonyOSArkTS基本语法概述

参考官方文档

本文为作者（我）参考官方文档中的学习UI范式基本语法写的学习笔记，为学习用途。包含了自己的理解，后续还会写更多笔记的。

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扩展了多种语法范式来使开发更加便捷：

创建组件

首先，根据组件构造方法的不同，创建组件包含有参数和无参数两种方式。例如Divider()无需在（）内填写任何参数，而Image('https://xyz/test.jpg')需要在（）填写必选参数src。

变量或表达式可以用于参数赋值，例如：

Image(this.imagePath)
Image('https://' + this.imageUrl)
Text(`count: ${this.count}`)

单行注释：

// 这是注释

多行注释：

/**
* 我是第一行
* 饿啊啊
* QWQ
* 什么
* 要结束了
*/

属性方法以“.”链式调用配置组件样式和其他属性，建议每个属性方法单独一行（）

配置组件的多个属性例子：

Image('test.jpg')
  .alt('error.jpg')    
  .width(100)    
  .height(100)

除了直接传递常量参数，还可以传递变量或表达式。

Text('hello')
  .fontSize(this.size)
Image('test.jpg')
  .width(this.count % 2 === 0 ? 100 : 200)    
  .height(this.offset + 100)

对于系统组件，ArkUI还为其属性预定义了一些枚举类型供开发者调用，枚举类型可以作为参数传递，但必须满足参数类型要求。

例如，可以按以下方式配置Text组件的颜色和字体样式。

Text('hello')
  .fontSize(20)
  .fontColor(Color.Red)
  .fontWeight(FontWeight.Bold)

事件方法以“.”链式调用的方式配置系统组件支持的事件，建议每个事件方法单独写一行（依旧）

我们先来观察这一段代码：

Button('Click me')
  .onClick(() => {
    this.myText = 'ArkUI';
  })

可以发现使用箭头函数表达式配置组件的事件方法就是 () => {...} ，它先调用了 .onClick() ，并在参数传递括号中传入箭头函数表达式。

注意

ArkTS语法不建议使用成员函数配合bind this来配置组件的事件方法。

说明

箭头函数内部的this是词法作用域，由上下文确定。匿名函数可能会出现this指向不明确的问题，因此在ArkTS中不允许使用。

我们先来看这段代码：

myClickHandler(): void {
  this.counter += 2;
}
// ...
Button('add counter')
  .onClick(this.myClickHandler.bind(this))

可以看到定义了一个方法 myClickHandler() ，该方法没有参数，返回类型为 void 方法内部代码用 { } 围起来。

在方法内部，将 this.counter的值增加2。

下面的 Button() 创建一个按钮，按钮的文本为 'add counter'。 .onClick() 将按钮的点击事件绑定到 this.myClickHandler.bind(this) 方法上，使用 bind(this)确保 this在方法内部指向正确的上下文。

这段代码的主要功能是通过点击按钮来更新一个计数器的值。

如果组件支持子组件配置，则需在尾随闭包"{...}"中为组件添加子组件的UI描述。Column、Row、Stack、Grid、List等组件都是容器组件。

注意事项：