1.3 我的第一个ArkTS程序：Hello World
为了测试开发环境，我们已经在DevEco Studio中创建好了第一个鸿蒙工程：Hello World。打开Previewer窗口，可以看到工程页面的预览，如图1-3所示。
注
不同的API版本需要进行的工程配置不同，创建Hello World工程的详细步骤参见配套的视频教程。
图1-3 Hello World的启动页面
在工程文件夹下有很多目录和文件，这些目录和文件各有其用处，目前我们只关心其中的一个文件：工程文件夹下的目录entry > src > main > ets > pages中的文件Index.ets。ArkTS文件的扩展名为ets，文件Index.ets中定义的就是Previewer窗口中显示的工程页面。文件Index.ets中的代码是创建工程时由DevEco Studio自动生成的，如代码清单1-1所示。若最新版本的DevEco Studio自动生成的代码与代码清单1-1不同，请将其替换为书中的代码。
代码清单1-1 Index.ets
01 @Entry
02 @Component
03 struct Index {
04 @State message: string = 'Hello World';
05
06 build() {
07 Row() {
08 Column() {
09 Text(this.message)
10 .fontSize(50)
11 .fontWeight(FontWeight.Bold)
12 }
13 .width('100%')
14 }
15 .height('100%')
16 }
17 }
尽管ArkUI的相关知识不在本书的讨论范围之内，但我们还是有必要简单了解一下Hello World工程中的一些基本的UI知识。文件Index.ets的各个组成部分如图1-4所示。
图1-4 文件Index.ets的各个组成部分
上述程序创建了一个自定义组件Index，该组件有两个装饰器，即@Entry和@Component。其中，@Entry表示该组件为入口组件，@Component表示自定义组件。相关代码如下：
@Entry
@Component
struct Index {
// 自定义组件Index内部的代码
}
Index组件定义了一个状态变量message以及UI描述（build方法中的代码块）。UI描述以声明的方式来描述UI的结构，即我们看到的UI页面的结构。在build方法中，我们定义了一个系统组件Row。相关代码如下：
Row() {
// 组件Row内部的代码
}
.height('100%')
其中，height是一个属性方法，用于设置Row组件的高度。
在Row组件中，我们定义了一个系统组件Column；在Column组件中，又定义了一个系统组件Text。Text组件显示的文本为message中存储的字符串'Hello World'。相关代码如下：
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.width('100%')
其中，属性方法width用于设置Column组件的宽度，属性方法fontSize和fontWeight分别用于设置Text组件中文本的字号和字重（字体粗细）。
系统组件是ArkUI框架中内置的基础组件或容器组件，开发者可以直接使用。示例程序中用到的组件Row和Column都属于容器组件，用于容纳其他组件；Text组件则属于基础组件，用于显示文本。
不同的组件具有不同的属性方法，这些方法都可以通过符号“.”来链式调用。例如，上面的代码通过链式调用属性方法fontSize和fontWeight设置了Text组件中文本的字号和字重。
当程序开始运行时，首先运行的是由@Entry装饰的入口组件，对应的是以上程序中的自定义组件Index，此时系统会自动调用Index组件的build方法，于是我们看到了Hello World的启动页面（见图1-3），该页面的组成如图1-5所示。页面的最上层是Text组件，其范围由白色表示；Text组件的下层是Column组件，其范围由深灰色表示（包括Text组件遮盖的范围）；Column组件的下层是Row组件，其范围由浅灰色表示（包括Column组件遮盖的范围）。
图1-5 Hello World的页面组成
除了属性方法，不同的组件还具有不同的事件方法。通过触发或调用组件的事件方法，我们可以设置组件对事件的响应逻辑。接下来要做的是，修改一下Hello World程序，在页面上添加一个表示按钮的Button组件，并为其添加对按钮的单击事件的响应逻辑。修改后的Index.ets如代码清单1-2所示。
代码清单1-2 Index.ets
01 @Entry
02 @Component
03 struct Index {
04 @State message: string = 'Hello World';
05
06 build() {
07 Row() {
08 Column() {
09 Text(this.message)
10 .fontSize(50)
11 .fontWeight(FontWeight.Bold)
12
13 /*
14 * 在Text组件下方添加一个按钮组件Button
15 * 单击该按钮后页面上显示的文本将发生变化
16 */
17 Button('点我')
18 // 设置按钮的相关属性并添加响应单击事件的逻辑
19 .fontColor(Color.White)
20 .fontSize(40)
21 .width(150)
22 .height(70)
23 .backgroundColor(Color.Gray)
24 .type(ButtonType.Capsule)
25 .onClick((event: ClickEvent) => {
26 this.message = 'Hello ArkTS';
27 })
28 }
29 .width('100%')
30 }
31 .height('100%')
32 }
33 }
起初在Previewer窗口中看到的页面如图1-6（a）所示，接着单击“点我”按钮，可以看到图1-6（b）所示的运行效果。
注
尽管在预览器（Previewer窗口）中查看运行效果比较方便，但是推荐读者使用模拟器或真机来运行程序。模拟器或真机运行程序的方法参见配套的视频教程。
图1-6 修改前、后程序的运行效果
下面我们分析一下添加的代码。
1．注释和缩进
在添加的代码中，有一些注释。注释是对代码的说明和解释。注释中的文字不是有效的代码，在编译并执行程序时，所有注释都会被系统忽略。尽管注释不是有效的代码，但是其可以很好地对程序进行解释说明，是程序十分重要的组成部分。明确、简洁的注释能大大提高程序的可读性和可维护性。
ArkTS中的注释分为两种类型：单行注释（//）和多行注释（/*...*/）。
单行注释使用“//”表示，“//”之后的内容就是注释的内容。单行注释不能跨越多行。在代码中，请将单行注释放在相应代码的右侧或者上方。如果单行注释位于代码右侧，应该在代码和注释之间至少保留一个空格，以提高可读性。如果单行注释过长，请将其置于代码上方，并且与代码保持同样层级的缩进，如代码清单1-2中第18行的单行注释。
多行注释以“/*”开头，以“*/”结尾，“/*”和“*/”中间就是注释的内容，注释的内容可以跨越多行。对于多行注释，我们建议将其放在对应代码的上方，并让注释与代码保持一样的缩进层级，如代码清单1-2中第13～16行的多行注释（第14、15行开头的“*”不是必需的，添加“*”是为了增加注释的可读性）。如果是文件头注释，我们建议将其放在文件开头，不使用缩进。
在书写代码时，请注意代码的缩进。良好的缩进能大大提高程序的可读性。一般来说，一个层级的缩进是4个空格。UI中有时会使用较多的多层嵌套，这时会使用两个空格作为一个层级的缩进。本书主要介绍ArkTS语言，统一用4个空格作为一个层级的缩进。
2．Button的属性方法
在代码清单1-2中，通过链式调用一系列属性方法，我们设置了所添加按钮的样式，包括按钮的文字样式、大小、背景色和类型。相关代码如下：
Button('点我')
.fontColor(Color.White) // 设置按钮上的文字颜色为白色
.fontSize(40) // 设置按钮上的文字字号为40
.width(150) // 设置按钮的宽度为150
.height(70) // 设置按钮的高度为70
.backgroundColor(Color.Gray) // 设置按钮的背景色为灰色
.type(ButtonType.Capsule) // 设置按钮类型为胶囊按钮（圆角大小为按钮高度的一半）
// 其他代码略
3．Button的onClick事件方法
只要单击页面上的“点我”按钮，就会触发Button组件的单击事件——对应的onClick事件方法被执行。相关代码如下：
Button('点我')
// 其他代码略
// onClick事件方法
.onClick((event: ClickEvent) => {
this.message = 'Hello ArkTS'; // 修改状态变量message的值为'Hello ArkTS'
})
在定义Text组件时，传入的参数为this.message（代码清单1-2的第9行），而此时message的值为'Hello World'（第4行），所以一开始页面的Text组件显示的文本为“Hello World”。在触发并执行了按钮的onClick事件方法之后，message的值被修改为'Hello ArkTS'。由于message是由@State装饰的状态变量，因此当message发生变化时，系统会自动刷新页面，将Text组件的文本显示为最新的message值“Hello ArkTS”。这就是ArkUI数据驱动的基本原理。
现在，我们已经了解了ArkTS语言的基本概念以及ArkUI的一些基础知识，包括组件、属性方法、事件方法等，接下来就可以正式学习ArkTS语言了。