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

1. 组件基本介绍

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

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

• 可组合：允许开发者组合使用系统组件、及其属性和方法。
• 可重用：自定义组件可以被其他组件重用，并作为不同的实例在不同的父组件或容器中使用。
• 数据驱动UI更新：通过状态变量的改变，来驱动UI的刷新。

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

@Component
export 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
@Component
struct 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方法的返回值。

@Component
struct ParentComponent {
  doSomeCalculations() {
  }

  calcTextValue(): string {
    return 'Hello World';
  }

  @Builder doSomeRender() {
    Text(`Hello World`)
  }

  build() {
    Column() {
      // 反例：不能调用没有用@Builder装饰的方法
      this.doSomeCalculations();
      // 正例：可以调用
      this.doSomeRender();
      // 正例：参数可以为调用TS方法的返回值
      Text(this.calcTextValue())
    }
  }
}回值      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. 设置基本样式

所有的组件（不论是自定义组件还是系统组件），都可以设置一些通用样式，例如：宽度、高度、背景色、圆角等。设置方法均为 "." 号，示例代码如下：

@Component
struct MyComponent2 {
  build() {
    Button(`Hello World`)
  }
}

@Entry
@Component
struct MyComponent {
  build() {
    Row() {
      MyComponent2()
        .width(200)
        .height(300)
        .backgroundColor(Color.Red)
    }
  }
}

渲染效果如下：

tips: ArkUI给自定义组件设置样式时，相当于给MyComponent2套了一个不可见的容器组件，而这些样式是设置在容器组件上的，而非直接设置给MyComponent2的Button组件。通过渲染结果我们可以很清楚的看到，背景颜色红色并没有直接生效在Button上，而是生效在Button所处的开发者不可见的容器组件上。