鸿蒙 ArkTs 基础

ArkTS 是一种为构建高性能应用而设计的编程语言。ArkTS 在继承 TypeScript 语法的基础上进行了优化，以提供更高的性能和开发效率。

基础语法概述#

装饰器：用于装饰类、结构、方法以及变量，并赋予其特殊的含义。如上述示例中 @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 的声明式开发范式。

除此之外，ArkTS 扩展了多种语法范式来使开发更加便捷：

@Builder/@BuilderParam：特殊的封装 UI 描述的方法，细粒度的封装和复用 UI 描述。
@Extend/@Styles：扩展内置组件和封装属性样式，更灵活地组合内置组件。
stateStyles：多态样式，可以依据组件的内部状态的不同，设置不同样式。

声明式 UI 描述#

ArkTS 以声明方式组合和扩展组件来描述应用程序的 UI，同时还提供了基本的属性、事件和子组件配置方法，帮助开发者实现应用交互逻辑。

创建组件#

根据组件构造方法的不同，创建组件包含有参数和无参数两种方式。

无参数#

如果组件的接口定义没有包含必选构造参数，则组件后面的 “()” 不需要配置任何内容。例如，Divider 组件不包含构造参数。

Column() {
  Text('item 1')
  Divider()
  Text('item 2')
}

有参数#

如果组件的接口定义包含构造参数，则在组件后面的 “()” 需要配置相应参数。

// string类型的参数
Text("test");
// $r形式引入应用资源，可应用于多语言场景
Text($r("app.string.title_value"));
// 无参数形式
Text();

配置属性#

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

Text("test").fontSize(12);

配置组件的多个属性。

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);

配置事件#

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

使用箭头函数表达式配置组件的事件方法，要求使用 “() => {...}”，以确保函数与组件绑定，同时符合 ArkTS 语法规范。

Button("add counter").onClick(() => {
  this.counter += 2;
});

使用组件的成员函数配置组件的事件方法，需要 bind this。ArkTS 语法不推荐使用成员函数配合 bind this 去配置组件的事件方法。

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

使用声明的箭头函数，可以直接调用，不需要 bind this。
箭头函数内部的 this 是词法作用域，由上下文确定。匿名函数可能会有 this 指向不明确问题，在 ArkTS 中不允许使用。

配置子组件#

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

Column() {
  Row() {
    Image('test1.jpg')
      .width(100)
      .height(100)
    Button('click +1')
      .onClick(() => {
        console.info('+1 clicked!');
      })
  }
}

此文由 Mix Space 同步更新至 xLog
原始链接为 http://www.sroxck.top/posts/harmony/arkts-base