1. 组件基本介绍
在ArkUI中，UI显示的内容均为组件，由框架直接提供的称为系统组件，由开发者定义的称为自定义组件。在进行 UI 界面开发时，通常不是简单的将系统组件进行组合使用，而是需要考虑代码可复用性、业务逻辑与UI分离，后续版本演进等因素。因此，将UI和部分业务逻辑封装成自定义组件是不可或缺的能力。
自定义组件具有以下特点：
-
可组合：允许开发者组合使用系统组件、及其属性和方法。
-
可重用：自定义组件可以被其他组件重用，并作为不同的实例在不同的父组件或容器中使用。
-
数据驱动UI更新：通过状态变量的改变，来驱动UI的刷新。
以下示例展示了开发一个组件的基本用法。
@Componentexport struct HelloComponent {@State message: string = 'Hello, World!';build() {// HelloComponent自定义组件组合系统组件Row和TextRow() {Text(this.message).onClick(() => {// 状态变量message的改变驱动UI刷新，UI从'Hello, World!'刷新为'Hello, ArkUI!'this.message = 'Hello, ArkUI!';})}}}
HelloComponent可以在其他自定义组件中的build()函数中多次创建，实现自定义组件的重用。
@Entry@Componentstruct ParentComponent {build() {Column() {Text('ArkUI message')// 这里复用了组件HelloComponent({ message: 'Hello, World!' });Divider()// 这里再次复用了组件HelloComponent({ message: '你好!' });}}}
渲染效果如下：
一个自定义的UI组件一般有几个关键组成部分：
-
struct声明组件名字（如果需要复用，则需要加上export 关键字导出）；
-
@Component 关键字装饰第1步创建的组件，表示当前的结构体是一个自定义组件；
-
build()函数，该函数用于描述本组件需要渲染的样式；
-
@State 装饰的本地变量，用于存储当前组件的内部状态；
-
@Entry 关键字装饰，表示当前组件是UI页面的入口；
2. build()函数
build()函数是所有UI组件开发都需要实现的方法，它主要负责对UI的描述定义，build()函数需要遵循一些规则，如下所述：
-
@Entry 装饰的组件，其build()函数下的根节点唯一且必要，且必须为容器组件。
@Components装饰的自定义组件，其build()函数下的根节点唯一且必要，可为非容器组件。两者中的ForEach禁止作为根节点。
-
build()函数不允许声明本地变量，下面为反例：
build() {// 反例：不允许声明本地变量let a: number = 1;}
如果写了反例中的代码，编译期将报错，本地变量反例报错如下（后面的反例不再每个都贴图了）：
-
build()函数不允许在UI描述里直接使用console.info()，下面为反例：
build() {// 反例：不允许console.infoconsole.info('print debug log');}
-
build()函数里不允许创建本地的作用域，下面为反例：
build() {// 反例：不允许本地作用域{...}}
-
build函数里不允许调用没有用@Builder装饰的方法，允许系统组件的参数是TS方法的返回值。
@Componentstruct ParentComponent {doSomeCalculations() {}calcTextValue(): string {return 'Hello World';}@Builder doSomeRender() {Text(`Hello World`)}build() {Column() {// 反例：不能调用没有用@Builder装饰的方法this.doSomeCalculations();// 正例：可以调用this.doSomeRender();// 正例：参数可以为调用TS方法的返回值Text(this.calcTextValue())}}}
-
build()函数里不允许switch语法，如果需要使用条件判断，请使用if。
build() {Column() {// 反例：不允许使用switch语法switch (expression) {case 1:Text('...')break;case 2:Image('...')break;default:Text('...')break;}}}
-
build()函数里不允许使用表达式
build() {Column() {// 反例：不允许使用表达式(this.aVar > 10) ? Text('...') : Image('...')}}
3. 设置基本样式
所有的组件（不论是自定义组件还是系统组件），都可以设置一些通用样式，例如：宽度、高度、背景色、圆角等。设置方法均为 "." 号，示例代码如下：
@Componentstruct MyComponent2 {build() {Button(`Hello World`)}}@Entry@Componentstruct MyComponent {build() {Row() {MyComponent2().width(200).height(300).backgroundColor(Color.Red)}}}
渲染效果如下：
tips:
ArkUI给自定义组件设置样式时，相当于给MyComponent2套了一个不可见的容器组件，而这些样式是设置在容器组件上的，而非直接设置给MyComponent2的Button组件。
通过渲染结果我们可以很清楚的看到，背景颜色红色并没有直接生效在Button上，而是生效在Button所处的开发者不可见的容器组件上。
接下来我们将进一步了解组件的声明周期，请关注 “鸿蒙UI开发快速入门 —— part02”
如果你也对鸿蒙开发感兴趣，加入“Harmony自习室”吧！
长按下面的二维码关注公众号。
