HarmonyOS应用开发-声明式UI描述规范

1.无构造参数配置
组件的接口定义不包含必选构造参数，组件后面的“()”中不需要配置任何内容。
示例：

Column() {
Text('item 1')
Divider() // No parameter configuration of the divider component
Text('item 2')
}

2.必选参数构造配置
如果组件的接口定义中包含必选构造参数，则在组件后面的“()”中必须配置参数。参数可以使用常量进行赋值。
示例：
Image组件的必选参数src：

Image('http://xyz/a.jpg')

Text组件的必选参数content：

Text('123')

变量或表达式也可以用于参数赋值，其中表达式返回的结果类型必须满足参数类型要求。
3.属性配置
使用属性方法配置组件的属性。属性方法紧随组件，并用“.”运算符连接。
示例：
配置Text组件的字体大小属性示例：

Text('123').fontSize(12)

此外，还可以使用“.”操作进行链式调用并同时配置组件的多个属性。
可以同时配置Image组件的多个属性，如下所示：

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

除了直接传递常量参数外，还可以传递变量或表达式，如下所示：

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

对于内置组件，框架还为其属性预定义了一些枚举类型，供开发人员调用，枚举值可以作为参数传递。
枚举类型必须满足参数类型要求，有关特定属性的枚举类型定义的详细信息。

4.事件配置
通过事件方法可以配置组件支持的事件。
示例：
使用lambda表达式配置组件的事件方法：

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

使用匿名函数表达式配置组件的事件方法（此时要求我们使用bind，以确保函数体中的this引用包含的组件。）：

Button('add counter')
.onClick(function () {
this.counter += 2
}.bind(this))

使用组件的成员函数配置组件的事件方法：

myClickHandler(): void {
// do something
}

...
Button('add counter')
.onClick(this.myClickHandler)

5.子组件配置
对于支持子组件配置的组件，例如容器组件，在“{ … }”里为组件添加子组件的UI描述。Column、Row、Stack、Button、Grid和List组件都是容器组件。
示例：

Column() {
Text('Hello')
.fontSize(100)
Divider()
Text(this.myText)
.fontSize(100)
.fontColor(Color.Red)
}