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:
变量或表达式也可以用于参数赋值,其中表达式返回的结果类型必须满足参数类型要求。
3.属性配置
使用属性方法配置组件的属性。属性方法紧随组件,并用“.”运算符连接。
示例:
配置Text组件的字体大小属性示例:
此外,还可以使用“.”操作进行链式调用并同时配置组件的多个属性。
可以同时配置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)
- }
复制代码
附件: