[文章]HarmonyOS应用开发-声明式UI描述规范

阅读量0
0
2
1.无构造参数配置
组件的接口定义不包含必选构造参数,组件后面的“()”中不需要配置任何内容。
示例:
  1. Column() {
  2. Text('item 1')
  3. Divider() // No parameter configuration of the divider component
  4. Text('item 2')
  5. }
复制代码


2.必选参数构造配置
如果组件的接口定义中包含必选构造参数,则在组件后面的“()”中必须配置参数。参数可以使用常量进行赋值。
示例:
Image组件的必选参数src:
  1. Image('http://xyz/a.jpg')
复制代码

复制


Text组件的必选参数content:
  1. Text('123')
复制代码


变量或表达式也可以用于参数赋值,其中表达式返回的结果类型必须满足参数类型要求。
3.属性配置
使用属性方法配置组件的属性。属性方法紧随组件,并用“.”运算符连接。
示例:
配置Text组件的字体大小属性示例:
  1. Text('123').fontSize(12)
复制代码


此外,还可以使用“.”操作进行链式调用并同时配置组件的多个属性。
可以同时配置Image组件的多个属性,如下所示:
  1. Image('a.jpg')
  2. .alt('error.jpg')
  3. .width(100)
  4. .height(100)
复制代码


除了直接传递常量参数外,还可以传递变量或表达式,如下所示:
  1. Text('hello')
  2. .fontSize(this.size)
  3. Image('a.jpg')
  4. .width(this.count % 2 === 0 ? 100 : 200)
  5. .height(this.offset + 100)
复制代码


对于内置组件,框架还为其属性预定义了一些枚举类型,供开发人员调用,枚举值可以作为参数传递。
枚举类型必须满足参数类型要求,有关特定属性的枚举类型定义的详细信息。
4.事件配置
通过事件方法可以配置组件支持的事件。
示例:
使用lambda表达式配置组件的事件方法:
  1. Button('add counter')
  2. .onClick(() => {
  3. this.counter += 2
  4. })
复制代码


使用匿名函数表达式配置组件的事件方法(此时要求我们使用bind,以确保函数体中的this引用包含的组件。):
  1. Button('add counter')
  2. .onClick(function () {
  3. this.counter += 2
  4. }.bind(this))
复制代码


使用组件的成员函数配置组件的事件方法:
  1. myClickHandler(): void {
  2. // do something
  3. }

  4. ...
  5. Button('add counter')
  6. .onClick(this.myClickHandler)
复制代码


5.子组件配置
对于支持子组件配置的组件,例如容器组件,在“{ … }”里为组件添加子组件的UI描述。Column、Row、Stack、Button、Grid和List组件都是容器组件。
示例:
  1. Column() {
  2. Text('Hello')
  3. .fontSize(100)
  4. Divider()
  5. Text(this.myText)
  6. .fontSize(100)
  7. .fontColor(Color.Red)
  8. }
复制代码

附件:


回帖

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容图片侵权或者其他问题,请联系本站作侵删。 侵权投诉
链接复制成功,分享给好友