自定义组件

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

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

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

自定义组件基本结构

以下是自定义组件的代码结构：

@Component
struct 组件名{
    build(){
        //...
    }
}

示例：

定义一个名称为MyComponent的自定义组件，组件用于显示一个文本'Hello, World!',点击文本时，改变文本的状态为Hello, ArkUI!。

@Component
struct MyComponent{
  @State message: string = 'Hello, World!';
  build() {
    Row() {
      Text(this.message).fontSize(30)
        .backgroundColor(Color.Orange)
        .onClick(() => {
          // 状态变量message的改变驱动UI刷新，UI从'Hello, World!'刷新为'Hello, ArkUI!'
          this.message = 'Hello, ArkUI!';
        })
    }.width("100%")
    .justifyContent(FlexAlign.Center)
  }
}

可以在其他自定义组件的build()函数中多次创建MyComponent，以实现自定义组件的重用。

@Entry
@Component
struct Index {
  @State currentIndex: number = 0

  build() {
    Column({space:10}) {
      MyComponent()
      MyComponent()
    }
  }
}

预览器预览效果如下

成员函数/变量

自定义组件除了必须要实现build()函数外，还可以定义其他成员变量、成员函数，且满足以下规则：

• 自定组件的成员变量、成员函数都是私有的，且不能声明为静态。

@Component
struct MyComponent {
  //成员变量
  @State message: string = "Hello, World!"

  //成员函数
  changeMessage() {
    this.message = "Hello, HarmonyOS!"
  }

  build() {
    Row() {
      Text(this.message).fontSize(30)
        .backgroundColor(Color.Orange)
        .onClick(() => {
          this.changeMessage()
        })
    }.width("100%")
    .justifyContent(FlexAlign.Center)
  }
}

自定义组件传参

自定义组件的成员变量可以接收外部传参数。如下图，每一个列表项的UI结构都是一样的，只是图片和文本不一样，此时可以将列表项定义为自定义组件。

示例

定义名称为MyListItem的自定义组件，包含img、title两个参数，用于接收图片和文本。

//MyListItem.ets
import { promptAction } from "@kit.ArkUI"

@Component
export struct MyListItem {
  //该组件可以接受图片、标题两个参数
  private img: Resource = $r('sys.media.ohos_ic_public_phone')
  private title: string = '电话'

  //自定义函数
  private show() {
    promptAction.openToast({ message: this.title })
  }

  build() {
    Row() {
      Image(this.img)
        .width(25)
      Text(this.title).margin({ left: 12 })
    }
    .width('100%')
    .height(50)
    .padding({ left: 12 })
    .backgroundColor(Color.White)
    .onClick(() => {
      this.show()
    })
  }
}

在Index.ets文件中引入MyListItem，代码如下

//Index.ets
@Entry
@Component
struct Index {
  build() {
    Column({ space: 10 }) {
      MyListItem({
        img: $r('sys.media.ohos_ic_public_camera'),
        title: "相机"
      })

      MyListItem({
        img: $r('sys.media.ohos_ic_public_phone'),
        title: "电话"
      })

      MyListItem({
        img: $r('sys.media.ohos_ic_public_sound'),
        title: "声音"
      })
    }
    .width("100%")
    .height("100%")
    .backgroundColor("#dedede")
    .padding({top:10,bottom:10})
  }
}

自定义组件生命周期

组件的生命周期指的是，组件和页面从创建、显示、销毁的这整个过程中，会自动执行的一系列函数。利用生命周期函数，开发者可以在组件特定的阶段运行自己的代码。

ArkUI为页面或者组件提供了若干个生命周期函数，每一个函数都会在特定的阶段被触发。因为ArkUI中一切皆为组件，根据组件的类型不同，生命周期分为组件生命周期、页面生命周期。

组件与页面的区别如下图所示

• 组件：被@Component装饰的UI单元。
• 页面：被@Entry装饰的自定义组件，由一个或多个@Component组件组成。

被@Entry装饰的自定义组件为页面的入口组件，即页面的根节点，一个页面有且仅能有一个@Entry组件。

组件生命周期函数

• aboutToAppear：创建组件新实例后执行，在执行其build()函数之前执行，可以修改状态变量
• onDidBuild：组件build()函数执行完成之后回调该函数。
• aboutToDisappear：在组件销毁之前执行，不允许修改状态变量。

页面声明周期

• onPageShow：页面每次显示时触发一次，包括路由过程、应用进入前台等场景。
• onPageHide：页面每次隐藏时触发一次，包括路由过程、应用进入后台等场景。
• onBackPress：当用户点击返回按钮时触发。

生命周期流程如下图所示，下图展示的是被@Entry装饰的组件（页面）生命周期

对鸿蒙感兴趣的同学，可以考免费取鸿蒙开发者认证