学习笔记（二）：声明式UI描述

一、创建组件

1、无参数组件：

组件的接口定义没有包含必选构造参数，则组件后面的“()”不需要配置任何内容

Divider()

2、有参数组件

如果组件的接口定义包含构造参数，则在组件后面的“()”配置相应参数

Image('https://xyz/test.jpg')

示例：

Text组件的几种创建方式

1、固定字符串

Text('aaaa')

2、无参数

Text()

3、$r形式引入应用资源，可应用于多语言场景

Text($r('app.string.title_value'))

4、动态变量

Text(`count: ${this.count}`)
Text(this.name)

 

二、配置属性

Text('aaaa')
        .fontSize(14)
        .fontColor(Color.Orange)

传递变量或表达式的用法：

Text('aaaa')
          .fontSize(this.size)   // 变量
          .width(this.count % 2 === 0 ? 100 : 200) // 表达式
          .fontColor(Color.Orange)

 

二、配置事件

Button(){
          Text('下一个')
            .fontSize(30)
        }
        .type(ButtonType.Capsule)
        .width('30%')
        .height('10%')
        .margin({
          top: 30
        })
        .onClick(()=>{
          console.info("跳转第二个页面")
          route.pushUrl({url:"pages/detail"})
        })

 

使用声明的箭头函数，可以直接调用，不需要bind this

logMsg = () => {
    console.info('该函数为日志打印')
  }


Button(){
          Text('下一个')
            .fontSize(30)
        }
        .type(ButtonType.Capsule)
        .width('30%')
        .height('10%')
        .onClick(this.logMsg)