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)

}复制