鸿蒙所使用的ArkTS语言是基于TS语言发展而来，而在TS中，装饰器是一种特殊的声明，它能够被附加到数据结构，属性，方法上。装饰器的核心思想是，在尽量不改变原始类的定义的情况下，为被装饰的对象添加新的特性。装饰器是@Expression的形式。可以看到在我们之前写的代码中，就使用了@Entry和@Component这两个装饰器来装饰Index数据结构。
-
@Entry 仅能装饰自定义UI组件（被@Component装饰过的数据结构），表示该组件是一个可以被路由跳转到的页面，页面能在预览器中被预览（如果一个非页面的组件想在预览器中被预览，也可以使用@Preview装饰器）。一个页面必须有且仅有一个入口装饰器。
-
@Component 仅能用于装饰struct关键字声明的数据结构，表示该数据结构是一个自定义UI组件。被装饰的数据结构必须实现build()这个方法，该方法中采用声明式描述来构建UI，系统会自动调用该方法，将其当作一个UI组件来编译。
（注：一个应用程序由多个页面组成，而每个页面往往又由多个组件组成，这就是所谓的“组件化”）
布局，指的是容器组件中所有子组件的排列方式，比如：
行布局（Row）：容器中所有子组件横向排列；
列布局（Column）：容器中所有子组件纵向排列；
层叠布局（Stack）：容器中所有子组件层叠排列；
布局除了以上三种之外还有很多，我们后面将会慢慢学到。在实际应用开发中，布局往往是树形嵌套使用的，比如Column中还有Row，Row中还有Column。一个Build()方法中只能有一个根组件，但是根组件中可以包含多个组件
容器组件：像Column、Row、Stack等等这类仅用于设置布局方式的组件，称之为容器组件。我们的示例代码中，就是用Column容器作为根组件。Column容器中的所有子组件从上到下排列的。
Text组件：用于在页面中显示一个文本，我们的示例代码中就有一个Text组件，它使得页面上显示了一行“Hello，Harmony！”的文本：
看到这里的小伙伴可能会产生了疑问，不对啊，之前刚创建好工程预置的HelloWorld页面，文本是显示在页面的正中央的，为什么我们自己写的代码，文本跑到左上方去了呢？
其实是因为我们没有给Column容器设置尺寸，而是完全由内容来撑开，而Column中的内容Text也同样未设置尺寸，由其中的文字长度撑开，这就使得Column的大小跟Text的大小完全一致了，而Column作为根组件又是默认摆放在页面的左上方的（安全区域以下），这就导致我们的文字跑到了页面的左上方去了。
为了验证这个说法，我们可以点击预览器窗口右上方的Inspector按钮，就会弹出一个检查窗口：
检查窗口又由两部分组成，上方是当前页面的组件树，我们在Build()方法中写的所有组件都以树形结构在其中呈现，下方是当前所选择组件的属性：
我们在组件树窗口中选中Column组件，属性窗口中的内容就会自动发生变化。在属性窗口中往下翻页找到Size（尺寸）那一栏，可以看到Column组件的当前宽度（W）和高度（H）属性：
*注：VP（Virtual Pixel，虚拟像素）是鸿蒙自己推出的尺寸单位，它通过把屏幕虚拟成固定值的大小，来解决页面在不同设备不同分辨率下会显得过大或过小的问题。之后设置组件属性时，如不填写单位，默认就是使用VP。
将组件树中Column组件展开，选择Text组件，可以看到下方尺寸信息跟Column组件是一样的：
（检查器的使用小技巧：打开检查器时，代码中的组件和预览窗口中的组件就会被关联起来并以高亮显示，我们即可以从代码中选择某个组件，查看它在预览器窗口中的位置，也可以从预览器窗口中选择某个组件，查看它在代码中的位置，这在后面页面复杂时进行快速定位非常有用）
现在我们知道了文本不处于页面中间的原因，就是Column组件的尺寸太小了，那么怎么来修改Column组件的属性呢？我们先点击代码中Column组件前面的折叠/展开按钮（-/+），把子组件的代码先收起来：
在Column这一行的末尾，加上.width('100%')，表示将Column的宽度设置为占满整个父容器，由于Column是当前页面的根组件，所以它的父容器就是整个页面。可以看到右侧预览器窗口中，Column的高亮框宽度已经占满了整个页面，而文字也跑到了页面的水平居中位置：
（注意：width是小写开头，是一个设置宽度的属性方法，括号中的参数是'100%'而不是100，如果是100，表示的是将宽度设置为100vp而不是父容器宽度的100%，参数为非纯数字时，必须加上单引号或双引号）
那么如何调整文本在垂直方向上也居中呢？聪明如你应该会想到，既然调整宽度能让Column的子组件在水平方向上居中，那么想让它垂直居中当然是调整高度啦！我们来试试~在宽度的后面再加上.height(100%)来继续设置Column的高度：
可以看到右侧Column的高亮框确实占满了除安全区域外的整个页面，但是文本却依然没有如我们所愿地跑到垂直居中的位置。这是因为Column中的子元素默认是顶端对齐的，如何修改为居中对齐呢？这需要通过设置容器组件的另一个属性：主轴对齐方式。我们在高度的后面再加上.justifyContent(FlexAlign.Center)：
可以看到文本终于乖乖地跑到了页面的正中央。同样的，我们如果想设置文字的大小，可以给Text组件加上.fontSize(40),想让文字加粗，可以加上.fontWeight(FontWeight.Bold)，想让文字改变颜色，可以加上.fontColor(Color.Blue)，随着代码的键入，我们可以看到预览器窗口中的文本也逐渐变成了我们想要的模样（字号40，粗体，蓝色）：
随着我们设置的属性越来越多，代码会越来越长，非常不利于阅读，我们可以用换行把属性设置重新排下版，可以是一行一个属性，也可以一行多个属性，根据个人喜好或公司风格统一即可：
除了以上讲过的这些属性，组件还有着丰富的属性可以设置，小伙伴们可能会抱怨，属性太多记不住或者压根不知道组件有哪些属性怎么办？别着急，DevEco的一个强大之处就在于为我们准备了非常完善的内置文档，我们只需要在代码中的组件上点击右键，然后选择最底下的show in API Reference，就可以打开API文档窗口并定位到所选择的组件说明了：
我们按住API文档窗口的标题栏将窗口拖拽出来，并调整它的大小，利于我们查看：
往下翻动查看，可以看到我们刚才设置的主轴对齐方式justifyContent赫然在内，查看其参数说明可以看到，默认值为FlexAlign.Start，即顶端对齐。小伙伴们会发现我们之前设置的高度宽度等属性并不在其中，因为它们属于所有组件都有的通用属性，我们可以从窗口左侧点开“组件通用信息”-“通用属性”，就可以看到这些属性的说明了：
在实际开发工作中，我们不可能记得住所有ArkTS的知识，小伙伴们要养成经常查看API文档并善用其搜索功能的好习惯。
