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 colo