4.4 自定义组件开发

自定义组件是鸿蒙开发中的重要能力，它允许开发者根据业务需求创建个性化组件，从而提高代码复用性和开发效率。本节将介绍如何开发和使用自定义组件。

4.4.1 自定义组件的意义

  • 提升复用性：将通用功能封装成组件，在不同页面中多次使用。
  • 增强可维护性：通过模块化设计简化代码逻辑，减少重复代码。
  • 满足个性化需求：根据业务场景开发特定功能的组件。

4.4.2 自定义组件的基本结构

鸿蒙系统中的自定义组件通常由以下部分组成：

  • Props：定义组件的输入属性，用于接收外部数据。
  • State：管理组件的内部状态，用于控制显示逻辑。
  • Events：定义组件的事件，用于与父组件交互。

4.4.3 自定义组件的开发步骤

1. 创建组件文件

在项目的 src 目录下新建组件文件，例如 CustomButton.ets：

@Component
struct CustomButton {
  @Prop label: string = "按钮"
  @State isClicked: boolean = false

  build() {
    Button(this.label)
      .backgroundColor(this.isClicked ? Color.Blue : Color.Gray)
      .onClick(() => {
        this.isClicked = !this.isClicked
      })
  }
}

2. 在页面中使用组件

在其他页面引入并使用自定义组件：

@Entry
@Component
struct MainPage {
  build() {
    Column() {
      CustomButton({ label: "点击我" })
      CustomButton({ label: "提交" })
    }
  }
}

3. 组件样式定义

通过 @Style 修饰符定义自定义组件的样式：

@Style
const ButtonStyle = {
  width: "100px",
  height: "50px",
  borderRadius: "10px",
}

并在组件中应用样式：

Button(this.label).applyStyle(ButtonStyle)

4.4.4 自定义组件的高级特性

  • 插槽 (Slot)：支持在组件中插入自定义内容。
  • 生命周期函数：如 onInit、onDestroy，用于处理组件的初始化和销毁逻辑。
  • 动态属性传递：通过 @Prop 动态绑定外部数据，实现组件的灵活配置。

4.4.5 小结

自定义组件开发是鸿蒙应用开发的重要技能。通过创建自定义组件，开发者能够提高代码的模块化水平，同时满足复杂业务场景的需求。在开发过程中，建议合理设计组件的 Props 和 Events，以确保其复用性和易用性。

Last Updated::