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

鸿蒙时代
发布于 2021-12-29 09:47
浏览
0收藏

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

分类
标签
HarmonyOS应用开发-声明式UI描述规范.docx 20.12K 29次下载
2
收藏
回复
举报
回复
    相关推荐