鸿蒙UI开发快速入门 —— part02: 组件开发

1. 组件基本介绍

在ArkUI中，UI显示的内容均为组件，由框架直接提供的称为系统组件，由开发者定义的称为自定义组件。在进行 UI 界面开发时，通常不是简单的将系统组件进行组合使用，而是需要考虑代码可复用性、业务逻辑与UI分离，后续版本演进等因素。因此，将UI和部分业务逻辑封装成自定义组件是不可或缺的能力。

自定义组件具有以下特点：

• 可组合：允许开发者组合使用系统组件、及其属性和方法。

• 可重用：自定义组件可以被其他组件重用，并作为不同的实例在不同的父组件或容器中使用。

• 数据驱动UI更新：通过状态变量的改变，来驱动UI的刷新。

以下示例展示了开发一个组件的基本用法。

@Componentexport struct HelloComponent {  @State message: string = 'Hello, World!';  build() {    // HelloComponent自定义组件组合系统组件Row和Text    Row() {      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组件一般有几个关键组成部分：

1. struct声明组件名字（如果需要复用，则需要加上export 关键字导出）；

2. @Component 关键字装饰第1步创建的组件，表示当前的结构体是一个自定义组件；

3. build()函数，该函数用于描述本组件需要渲染的样式；

4. @State 装饰的本地变量，用于存储当前组件的内部状态；

5. @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.info  console.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自习室”吧！

长按下面的二维码关注公众号。