目录

语法组成

在学习自定义组件前，先看一下ArkTS的组成

装饰器

用于装饰类、结构、方法以及变量，并赋予其特殊的含义。如上述示例中@Entry、@Component和@State都是装饰器

Entry

表示该自定义组件为入口组件

Component

表示自定义组件

State

表示组件中的状态变量，状态变量变化会触发UI刷新。

自定义组件

可复用的UI单元，可组合其他组件，如上述被@Component装饰的struct Hello。

UI描述

以声明式的方式来描述UI的结构，例如build()方法中的代码块。 

系统组件

ArkUI框架中默认内置的基础和容器组件，可直接被开发者调用，比如示例中的Column、Text、Divider、Button。可参考：组件导读

事件方法

组件可以通过链式调用设置多个事件的响应逻辑，如跟随在Button后面的onClick()。

属性方法

组件可以通过链式调用配置多项属性，如fontSize()、width()、height()、backgroundColor()等。

Ui描述语法

自定义组件的参数规定

@Component
struct MyComponent {private countDownFrom: number = 0;private color: Color = Color.Blue;build() {}
}@Entry
@Component
struct ParentComponent {private someColor: Color = Color.Pink;build() {Column() {// 创建MyComponent实例，并将创建MyComponent成员变量countDownFrom初始化为10，将成员变量color初始化为this.someColorMyComponent({ countDownFrom: 10, color: this.someColor })}}
}

build()函数

@Entry
@Component
struct MyComponent {build() {// 根节点唯一且必要，必须为容器组件Row() {ChildComponent() }}
}@Component
struct ChildComponent {build() // 反例：不允许本地作用域{// 根节点唯一且必要，可为非容器组件Image('test.jpg')//下面为正例子和反例子// 反例：不允许声明本地变量let a: number = 1;// 反例：不允许console.infoconsole.info('print debug log');Column() {// 反例：不能调用没有用@Builder装饰的方法this.doSomeCalculations();// 正例：可以调用this.doSomeRender();// 正例：参数可以为调用TS方法的返回值Text(this.calcTextValue())// 反例：不允许使用switch语法switch (expression) {case 1:Text('...')break;case 2:Image('...')break;default:Text('...')break;}  // 反例：不允许使用表达式(this.aVar > 10) ? Text('...') : Image('...')}}
}