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

声明式UI语法

基本概念
声明式UI描述

基本概念

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

例如：

@Entry 有该装饰器的自定义组件，可以在UIAbility中使用，作为页面入口。该装饰器配合@Component装饰器使用

@Component 自定义组件

@State 表示组件中的状态变量，状态变化会出发UI刷新。
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).code
          let message = (err as BusinessError).message
          console.info(`jump error:${code},${message}`)
        }
      })
    }
    .height('100%')
    .width('100%')