HarmonyOS鸿蒙学习基础篇 - 自定义组件（一）

迪迦

已于 2024-02-14 17:51:39 修改

阅读量5.6k

点赞数 20

分类专栏：鸿蒙HarmonyOS 文章标签：学习 harmonyos 华为鸿蒙服务器

于 2024-02-14 17:43:58 首次发布

本文链接：https://blog.csdn.net/2303_76218115/article/details/136114329

版权

本文介绍了在ArkUI框架中如何创建、组合和重用自定义组件，强调了数据驱动UI更新和组件化的重要性，同时详细讲解了自定义组件的生命周期管理，包括创建、渲染、删除过程中的aboutToAppear和aboutToDisappear方法的调用时机。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

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

自定义组特点：

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

基本用法：

@Component
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: '你好!' });
    }
  }
}

以上代码写入一个arkts文件中，并设置对应的字体样式，如下：

@Component
struct HelloComponent {
  @State message: string = 'Hello, World!';

  build() {
    // HelloComponent自定义组件组合系统组件Row和Text
    Row() {
      Text(this.message)
        .height(50)
        .width(200)
        .fontSize(30)
        .onClick(() => {
          // 状态变量message的改变驱动UI刷新，UI从'Hello, World!'刷新为'Hello, ArkUI!'
          this.message = 'Hello, ArkUI!';
        })
    }
  }
}

@Entry
@Component
struct ParentComponent {
  build() {
    Column() {
      Text('ArkUI message')
        .height(100)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      HelloComponent({ message: 'Hello, World!' });
      Divider()
      HelloComponent({ message: '你好!' });
    }
  }
}