鸿蒙Next声明式UI描述

一、引言

在鸿蒙Next开发中，ArkTS以声明方式组合和扩展组件来描述应用程序的UI，为开发者提供了高效、灵活的方式来构建用户界面。本文将详细介绍鸿蒙Next中声明式UI的相关内容，包括组件创建、属性配置、事件配置以及子组件配置等方面，帮助开发者更好地理解和运用这一技术。

二、创建组件

（一）无参数创建

如果组件的接口定义没有包含必选构造参数，则组件后面的“()”不需要配置任何内容。例如，Divider组件不包含构造参数，可按如下方式创建：

Column() {
  Text('item 1')
  Divider()
  Text('item 2')
}

（二）有参数创建

若组件的接口定义包含构造参数，则在组件后面的“()”需要配置相应参数。如Image组件的必选参数src，以及Text组件的非必选参数content（有多种赋值方式）：

1. 直接赋值字符串

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

2. 使用$r形式引入应用资源（适用于多语言场景）

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

3. 无参数形式

   • Text()

4. 使用变量或表达式赋值

   • 变量赋值：Image(this.imagePath)
   • 表达式赋值：Image('https://' + this.imageUrl)，Text(count: ${this.count})

三、配置属性

属性方法以“.”链式调用的方式配置系统组件的样式和其他属性，建议每个属性方法单独写一行。

1. 配置单个属性

   • 配置Text组件字体大小：Text('test').fontSize(12)

2. 配置多个属性

   • Image('test.jpg').alt('error.jpg').width(100).height(100)

3. 使用变量或表达式配置属性

   • Text('hello').fontSize(this.size)
   • Image('test.jpg').width(this.count % 2 === 0? 100 : 200).height(this.offset + 100)

4. 使用枚举类型配置属性（针对系统组件）

   • 配置Text组件颜色和字体样式：Text('hello').fontSize(20).fontColor(Color.Red).fontWeight(FontWeight.Bold)

四、配置事件

事件方法以“.”链式调用的方式配置系统组件支持的事件，建议每个事件方法单独写一行。

1. 使用箭头函数配置事件方法

   • Button('Click me').onClick(() => {this.myText = 'ArkUI';})

2. 使用箭头函数表达式配置事件方法

   • Button('add counter').onClick(() => {this.counter += 2;})

3. 使用组件的成员函数配置事件方法（需bind this，不推荐）

   • 定义成员函数：

     myClickHandler(): void {
       this.counter += 2;
     }

   • 绑定事件：Button('add counter').onClick(this.myClickHandler.bind(this))

4. 使用声明的箭头函数配置事件方法（可直接调用，不需要bind this）

   • 声明箭头函数：

     fn = () => {
       console.info(`counter: ${this.counter}`)
       this.counter++
     }

   • 绑定事件：Button('add counter').onClick(this.fn)

注意：箭头函数内部的this是词法作用域，由上下文确定。匿名函数可能会有this指向不明确问题，在ArkTS中不允许使用。

五、配置子组件

如果组件支持子组件配置，则需在尾随闭包"{...}"中为组件添加子组件的UI描述。Column、Row、Stack、Grid、List等组件都是容器组件。

1. 简单Column组件配置子组件示例

   Column() {
     Text('Hello')
      .fontSize(100)
     Divider()
     Text(this.myText)
      .fontSize(100)
      .fontColor(Color.Red)
   }

2. 容器组件多级嵌套示例

   Column() {
     Row() {
       Image('test1.jpg')
        .width(100)
        .height(100)
       Button('click +1')
        .onClick(() => {
           console.info('+1 clicked!');
         })
     }
   }

通过以上对鸿蒙Next声明式UI描述中组件创建、属性配置、事件配置和子组件配置的介绍，开发者可以更加熟练地运用这些技术构建出功能丰富、交互性强的用户界面，为用户提供优质的应用体验。