ArkTS学习笔记_自定义组件

自定义组件学习笔记

（一）、自定义组件的基本结构

1、struct：自定义组件基于struct实现

格式：

    struct + 自定义组件名 + {
   
   ...}

简单示例：

@Entry
@Component
struct Index {
   
   
  // 组件的状态  
  @State message: string = 'Hello World'
  // 组件的UI构造方法  
  build() {
   
   
    Row() {
   
   
      Column() {
   
   
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
    }
  }
}

提示：

• 自定义组件不能有继承关系。
• 对于struct的实例化，可以省略new。
• struct被@Component装饰后具备组件化的能力，需要实现build()方法描述UI。
• @Entry可以接受一个可选的LocalStorage的参数。

3、装饰器

装饰器，用于装饰类、结构、方法以及变量，并赋予其特殊的含义。
@Entry 表示该自定义组件将作为UI页面的入口组件。在单个UI页面中，最多可以使用@Entry装饰一个自定义组件。
@Component 表示自定义组件，仅能装饰struct关键字声明的数据结构。一个struct只能被一个@Component装饰。
@State 表示组件中的状态变量，状态变量变化会触发UI刷新。

（二）、成员函数/成员变量

1. 成员函数

自定义组件的成员函数为私有的，且不建议声明成静态函数

2.成员变量

自定义组件的成员变量为私有的，且不建议声明成静态变量。
自定义组件的成员变量本地初始化有些是可选的，有些是必选的。

@Component
struct MyComponent {
   
   
  private countDownFrom: number = 0;
  private color: Color =