ArkTs基础语法-声明式UI-基本概念

基本概念

• 装饰器：用于装饰类、结构、方法及变量，并赋予其特殊的含义。

  例如：
  @Entry 有该装饰器的自定义组件，可以在UIAbility中使用，作为页面入口。该装饰器配合@Component装饰器使用
  @Component 自定义组件
  @State 表示组件中的状态变量，状态变化会出发UI刷新。
  @L

• UI描述：以声明式的方式来描述UI的结构，在组件的build方法中。

• 自定义组件：可复用的UI单元，可组合其他组件。

• 系统组件：ArkUI框架中默认内置的基础和容器组件。例如：Column、Row、Text、Image、Button等。

• 属性方法：ArkTs中，使用链式调用的方式来配置组件属性。

• 事件方法：事件响应逻辑，也是使用链式调用的方式，设置如onclick方法等，在方法内部进行实现。

基础的组件一般就是由上述部分组成，如下图：

当然，也有一些其他的语法范式方便我们进行封装复用，如：

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

• @Builder/@BuilderParam：特殊的封装UI描述的方法，细粒度的封装和复用UI描述。

• @Extend/@Styles：扩展内置组件和封装属性样式，更灵活地组合内置组件。

• stateStyles：多态样式，可以依据组件的内部状态的不同，设置不同样式。

这些后续会讲到。

声明式UI描述

创建组件

在ArkTs的基础语法中，我们讲到类，实例化一个类，需要使用new关键字进行。而在UI组件中，创建组件是不需要使用new关键字的。

无参数

如果组件的接口定义没有包含必选的构造参数，则组件后面的()中可以不配置任何内容。

例如Button() Text()等包含可选参数的组件，Driver()等没有构造参数的组件。

有参数

如果组件的接口定义中包含了必选构造参数，则在组件后的()中需要配置相应的参数。
例如Image()组件，必选参数为src。

变量和表达式也可以用作参数赋值。

配置属性

组件的属性方法以.链式调用的方式配置样式和其他属性。

	Text(this.message).id('HelloWorld').fontSize(50).fontWeight(FontWeight.Bold).alignRules({center: { anchor: '__container__', align: VerticalAlign.Center },middle: { anchor: '__container__', align: HorizontalAlign.Center }})

配置事件

使用箭头函数配置组件的事件方法

	Button() {Text('跳转').fontSize(30).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({ top: '0.00vp', right: '0.00vp', bottom: '150.00vp', left: '0.00vp' }).backgroundColor('#ff0000').width('50%').height('10%').alignRules({center: { anchor: '__container__', align: VerticalAlign.Bottom },middle: { anchor: '__container__', align: HorizontalAlign.Center }}).onClick(() => {console.info('click second button')router.pushUrl({ url: 'pages/Second' }).then(() => {console.info('jump success')}).catch((err: BusinessError) => {console.error(`jump failed,errCode:${err.code},errMessage:${err.message}`)})})}.height('100%').width('100%')

如需使用组件中的成员函数配置组件的事件方法，需要使用bind this。

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

ArkTs语法不推荐使用成员函数配合bind(this)的方式去配置组件的事件方法

使用声明的箭头函数，可以直接调用，不需要使用bind(this)

fn = () => {console.info(`counter: ${this.counter}`)this.counter++
}
...
Button('add counter').onClick(this.fn)

配置子组件

如果组件是容器组件，则支持子组件配置，需要在组件声明后，紧随的闭包中添加子组件的描述。如Column Row List等组件。

	RelativeContainer() {Text(this.message).id('SecondHelloWorld').fontSize(50).fontWeight(FontWeight.Bold).alignRules({center: { anchor: '__container__', align: VerticalAlign.Center },middle: { anchor: '__container__', align: HorizontalAlign.Center }})Button() {Text('back').fontSize('30').fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({bottom: 50}).alignRules({center: { anchor: '__container__', align: VerticalAlign.Bottom },middle: { anchor: '__container__', align: HorizontalAlign.Center }}).width('50%').height('10%').backgroundColor('#ff0000').onClick(() => {try {router.back()} catch (err) {let code = (err as BusinessError).codelet message = (err as BusinessError).messageconsole.info(`jump error:${code},${message}`)}})}.height('100%').width('100%')