HarmonyOS开发-简单使用自定义组件

简介

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

特点：

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

参考官方文档

定义并使用组件

创建组件

HelloComponent.ets

代码

@Component // @Component装饰后具备组件化的能力
export struct HelloComponent { // 自定义组件需要export出去
  @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!';
        })
    }
  }
}

使用组件

Parent.ets

代码

import { HelloComponent } from '../components/HelloComponent' // 引入组件

@Entry // @Entry装饰的自定义组件将作为UI页面的入口
@Component
struct ParentComponent {
  build() {
    Column() {
      Text('ArkUI Component').margin({ bottom: 20 })
      Divider()
      HelloComponent(); // 直接使用即可
      Divider()
      HelloComponent({ message: '你好!' }); // 传递参数
    }
  }
}

预览