华为鸿蒙开发：自定义组件的创建与使用

手把手教你华为鸿蒙开发之第十三节

华为鸿蒙开发：自定义组件的创建与使用

引言

在华为鸿蒙应用的开发中，自定义组件是构建复杂界面和重用代码的重要手段。通过自定义组件，开发者可以将复杂的UI逻辑封装起来，提高代码的可维护性和可读性。本文将通过 DevEco Studio 详细介绍如何在鸿蒙应用中创建和使用自定义组件，包括组件的参数传递、状态管理、事件处理以及如何通过@Builder和@BuilderParam装饰器自定义组件内容。

自定义组件基础

自定义组件允许我们将UI逻辑封装在一个可重用的单元中。

示例1：简单的自定义组件

@Component
struct MyButton {
  @State count: number = 1
  build() {
    Row() {
      Text('点击次数：' + this.count.toString())
      Button('点击我').onClick(() => {
        this.count++
      })
    }
    .justifyContent(FlexAlign.SpaceBetween)
    .padding(10)
    .border({ width: 1 })
    .width('100%')
  }
}

@Entry
@Component
struct Index {
  build() {
    Column() {
      MyButton()
      MyButton({ count: 10 })
      MyButton()
    }
    .padding(20)
  }
}

在这个示例中，我们创建了一个名为MyButton的自定义组件，它显示了按钮的点击次数，并在每次点击时增加计数。

参数传递和状态管理

自定义组件可以接受参数，这些参数可以用于设置组件的初始状态。

示例2：传递参数的自定义组件

@Component
struct MyFoodComponent {
  @State food: string = '番茄炒蛋'
  dog: string = '泰迪' // 普通变量也是响应式的

  sayHello = () => {
    console.log('默认的打招呼')
  }

  build() {
    Row() {
      Text(`自定义组件 ${this.dog} 喜欢吃 ${this.food}`)
      Button('点击按钮')
        .onClick(() => {
          this.food += '!'
          this.dog += '.'
          this.sayHello()
        })
    }
    .border({ width: 1 })
    .padding(20)
  }
}

@Entry
@Component
struct Index {
  build() {
    Column() {
      MyFoodComponent()

      MyFoodComponent({
        dog: '金毛',
        food: '牛排',
        sayHello() {
          console.log('外部传入的打招呼的逻辑')
        }
      })
      .border({ width: 1 })
      .padding(20)

      MyFoodComponent()
    }
    .padding(20)
  }
}

在这个示例中，MyFoodComponent组件接受dog和food作为参数，并允许外部传入sayHello函数来覆盖默认的打招呼逻辑。

事件处理和回调

自定义组件可以定义事件处理函数，这些函数可以在组件内部或外部被调用。

示例3：事件处理的自定义组件

@Component
struct CardComponent {
  title: string = ''
  subTitle: string = ''

  clickHandler = () => {
    AlertDialog.show({
      message: '默认的功能'
    })
  }

  build() {
    Column() {
      Row() {
        Text(this.title).layoutWeight(1)
        Row() {
          Text(this.subTitle)
          Image($r('app.media.ic_public_arrow_right'))
            .width(20)
        }
        .onClick(() => {
          this.clickHandler()
        })
      }
      Row() {
        Text('默认的内容')
      }