第三讲_ArkTS的初识

1. ArkTS的基本组成

• 装饰器： 用于装饰类、结构、方法以及变量，并赋予其特殊的含义。
• 自定义组件：可复用的UI单元，可组合其他组件，图示中@Component装饰的struct Hello就是一个自定义组件。
• UI描述：以声明式的方式来描述UI的结构，图示中build()方法中的代码块。
• 系统组件：ArkUI框架中内置的容器组件和基础组件，开发者可直接使用。图示中的Column、Text、Divider、Button都是系统组件。
• 属性方法：组件可以通过链式调用配置多项属性，图示中的fontSize()、width()、height()等。
• 事件方法：组件可以通过链式调用设置多个事件的响应逻辑，图示中Button后面的onClick()就是给按钮设置点击事件。

2. ArkTS自定义组件

1. 打开DevEco Studio新建一个ets文件，ArkTS File 的后缀名就是ets。

2. 编写自定义组件
   一个组件的基本结构：
   • @Component标记为一个组件
   • struct 定义组件结构
   • FirstComponent组件名
   • build()：描绘组件UI

@Component
struct FirstComponent {
  build() {

  }
}

3. 描绘组件UI
   添加一个系统组件Text()，它用来显示文本的，然后给文本字体设置大小。

@Component
struct FirstComponent {
  build() {
    Text("我是第一个组件")
      .fontSize(30)
  }
}

4. 预览组件
   在DevEco Studio的Previewer中，只能预览被@Entry修饰的组件。所以这里先给组件加上@Entry修饰符，然后点开Previewer页签，进行组件的效果预览。

@Entry
@Component
struct FirstComponent {
  build() {
    Text("我是第一个组件")
      .fontSize(30)
  }
}