1.2　ArkTS语言之基本UI描述

ArkTS（Ark TypeScript）是一种基于TypeScript的声明式语言，专为HarmonyOS应用开发而设计。它允许开发者以简捷、高效的方式描述用户界面（UI）和交互逻辑。

ArkTS以声明方式组合和扩展组件来描述应用程序的UI，同时还提供了基本的属性、事件和子组件配置方法，帮助开发者实现应用交互逻辑。本节将会对创建组件、配置属性、配置事件以及配置子组件进行讲解，帮助初学者快速掌握单框架鸿蒙的开发规范。

1.2.1　基本概念

与TypeScript语言类似，在ArkTS语言中开发者也会经常和组件打交道。组件是构成HarmonyOS应用用户界面的核心，从文本框到按钮，再到图像，每一个视觉元素都是由组件构成的。这些组件不仅定义了应用的外观，还赋予了它们行为和灵魂。更令人兴奋的是，组件之间可以嵌套，形成复杂的父子关系，从而创造出具有无限可能的界面布局。

ArkTS中常用的基本概念如下：

·　组件：在ArkTS中一切皆为组件。组件是构成用户界面的基本单位，包括文本框、按钮、图像等。

·　属性：用于配置组件的外观和行为，如颜色、尺寸、边距等。

·　事件：定义组件如何响应用户操作，如单击、滑动等。

·　子组件：组件可以包含其他组件，形成嵌套结构，实现复杂的布局。

1.2.2　创建组件

根据组件构造方法的不同，创建组件包含无参数和有参数两种方式。

1．无参数方式创建组件

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

例如，Divider组件不包含构造参数，展示的是一条横线；Text组件用于展示文本。代码如下：

界面效果如图1-15所示。

图1-15　无参数方式创建组件

2．有参数方式创建组件

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

例如Image组件的必选参数src，如图1-16所示。

图1-16　有参数方式创建组件1

又如Text组件的非必选参数content，如图1-17所示。

图1-17　有参数方式创建组件2

通过创建组件可以知道，在ArkTS中的组件大致分为两类：一类是无参数组件，另一类是有参数组件。我们可以通过组合利用这些组件来完善应用程序。需要注意的是，在开发过程中更多的关注点会在组件的大的分类上，比如基础组件、容器组件、媒体组件等，通过对每一种组件的认知更加得心应手地进行项目开发。

1.2.3　属性配置

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

1．配置文本字体大小

配置文本字体大小的示例代码如下：

界面效果如图1-18所示。

2．给文本配置多个属性

给文本配置多个属性的示例代码如下：

当添加了属性.fontWeight(800)时，字体会变粗，界面效果如图1-19所示。

图1-18　属性配置1

图1-19　属性配置2

3．给文本配置变量或者表达式

给文本配置变量或者表达式的示例代码如下：

在上述代码示例中，首先定义了两个变量flag和fontWeight，并在Text组件中采用三元运算符来判断文字的大小，字体的粗细采用常量传参计算的方式展示。界面效果如图1-20和图1-21所示。

图1-20　属性配置3

图1-21　属性配置4

4．使用枚举的方式配置文本属性

在开发过程中，我们通常会将大部分相同的属性或者多个组件可以复用的属性单独定义出来，然后在使用过程中再进行属性的调用，这个时候大部分会采用枚举的方式。枚举类型是一种特殊的数据类型，约定变量只能在一组数据范围内选择值。

使用枚举的方式配置文本属性的示例代码如下：

在上述示例代码中通过enum来定义常量列表：

enum ThemeColor {
  Red = '#ff0f29',
  Orange = '#ff7100',
  Green = '#30b30e'
}

通过点链式调用的方式获取枚举的颜色值并赋给变量后，在text组件中就可以直接获取这个颜色值了，界面效果如图1-22所示。

图1-22　属性配置5

1.2.4　事件配置

事件方法和属性配置类似，也以“.”链式调用的方式配置系统组件支持的事件。常用的事件配置有以下4种方式：

（1）使用箭头函数配置组件的事件方法。

（2）使用匿名函数表达式配置组件的事件方法，要求使用“() => {...}”，以确保函数与组件绑定，同时符合ArkTS语法规范。

箭头函数和匿名函数表达式的事件方法是一样的，具体操作示例如下：

在上述示例代码中，为Button组件绑定了箭头函数，当单击Button按钮时，Text组件的文本发生改变。界面效果如图1-23和图1-24所示。

图1-23　事件配置1

图1-24　事件配置2

（3）使用组件的成员函数配置组件的事件方法，需要bind this。

在实际的开发过程中，通常会遇见比较复杂的场景，这个时候如果将所有的处理逻辑都放在UI组件中，会使得项目臃肿，这种情况应该怎么处理呢？通常情况下我们会单独定义一个函数，在这个函数中编写逻辑，然后将这个函数绑定到UI组件中进行使用，这样项目就不会显得臃肿，项目结构也更加清晰明了。

示例代码如下：

在上述代码中，定义了一个函数myClickHandle，声明它的返回值是void，并且在Button按钮被单击时触发该函数。需要注意的是，这种方法需要使用bind(this)的方式进行绑定才可以触发。界面效果见图1-23和图1-24。

（4）在使用声明的箭头函数时，可以直接调用，不需要bind this。

这种情况是相对于方式（3）而言的，在开发过程中要省略bind this，只需要修改方式（3）的示例代码中的以下函数即可：

myClickHandle():void{
    this.message = 'ArkUI'
  }

将其改成箭头函数，代码如下：

myClickHandle=()=>{
  this.message = 'ArkUI'
}

注意，无论是方式（3）还是方式（4），对于函数的使用均不是调用，也就是函数名后面不需要加上()。

1.2.5　子组件配置

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

在1.2.4节中会发现，所有的Text组件或者Button组件都在容器组件Column中，当然它们的属性也在对应的组件后面进行添加。