鸿蒙 HarmonyOS（ArkTS）组件封装篇

在睡觉8686
306 阅读3分钟

以下是关于 鸿蒙 HarmonyOS（ArkTS）中组件封装 的完整入门教程，包含详细讲解与实战代码，适用于希望构建高复用性 UI 的 ArkTS 开发者。

⸻

鸿蒙 HarmonyOS 中封装组件的使用与实践（含代码示例）

一、为什么要封装组件？

在鸿蒙开发中，封装组件（自定义组件） 是提高代码复用性、模块化开发、提升可维护性的关键技术。

使用封装组件可以实现：

  • 多个页面复用同一 UI 或功能块

  • 隐藏复杂逻辑，只暴露必要的参数

  • 实现更清晰的项目结构

⸻

二、封装组件的基本语法

@Component
struct MyComponent {
  @Prop text: string  // 外部传入属性

  build() {
    Text(this.text)
      .fontSize(18)
      .padding(10)
  }
}

然后在父组件中使用：

MyComponent({ text: '你好，世界' })

⸻

三、实战示例：封装一个按钮组件

  1. 创建组件文件（ButtonItem.ets）
// ButtonItem.ets

@Component
export struct ButtonItem {
  @Prop title: string
  @Prop onClick: () => void

  build() {
    Button(this.title)
      .fontSize(16)
      .backgroundColor('#0A59F7')
      .fontColor(Color.White)
      .padding(10)
      .onClick(this.onClick)
      .margin(5)
  }
}

✅ 使用 @Prop 接收父组件传递的数据或函数
✅ 使用 export 使组件可被其他文件引用

⸻

  1. 父组件中使用封装按钮（Index.ets）
// Index.ets
import { ButtonItem } from './ButtonItem'

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

  build() {
    Column({ space: 15 }) {
      Text(`你点击了 ${this.count} 次`)
        .fontSize(20)

      ButtonItem({
        title: '点我 +1',
        onClick: () => {
          this.count++
        }
      })
    }
    .padding(20)
    .align(Alignment.Center)
  }
}

⸻

四、封装带样式的卡片组件

  1. 卡片组件（InfoCard.ets）
// InfoCard.ets

@Component
export struct InfoCard {
  @Prop title: string
  @Prop description: string

  build() {
    Column()
      .backgroundColor('#F2F2F2')
      .borderRadius(12)
      .padding(16)
      .width('90%') {
        Text(this.title)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)

        Text(this.description)
          .fontSize(16)
          .margin({ top: 8 })
      }
  }
}
  1. 使用卡片组件（Index.ets）
import { InfoCard } from './InfoCard'

@Entry
@Component
struct Index {
  build() {
    Column({ space: 20 }) {
      InfoCard({
        title: '鸿蒙封装',
        description: '这是一个可复用的卡片组件'
      })

      InfoCard({
        title: 'ArkTS 组件化',
        description: '通过 @Prop 实现灵活配置'
      })
    }
    .padding(20)
  }
}

⸻

五、高级用法：封装带插槽（Slot）的组件

Slot 概念

Slot 可以让你将组件部分区域交给外部自定义，是构建灵活 UI 的利器。

示例：封装弹窗容器（ModalContainer.ets）

@Component
export struct ModalContainer {
  @Prop title: string
  @Slot content: () => void  // 插槽内容

  build() {
    Column()
      .backgroundColor('#FFFFFF')
      .borderRadius(10)
      .padding(20)
      .width('90%') {
        Text(this.title)
          .fontSize(22)
          .fontWeight(FontWeight.Bold)

        this.content()  // 插入外部内容
      }
  }
}

使用方式

import { ModalContainer } from './ModalContainer'

@Entry
@Component
struct Index {
  build() {
    ModalContainer({
      title: '欢迎弹窗',
      content: () => {
        Column() {
          Text('欢迎使用鸿蒙系统')
            .fontSize(18)
          Button('确定')
            .margin({ top: 10 })
        }
      }
    })
  }
}

⸻

六、封装组件的最佳实践

实践建议

  • 使用 @Prop 接收参数 尽量传值而不是内部操作状态

  • 使用 export struct 组件需导出供外部调用

  • 使用 Slot 提高灵活性 内容区由父组件控制更通用

  • 命名清晰 组件命名要具备语义性

  • 文件分离 一个组件一个 .ets 文件，便于维护

⸻

七、总结

  • 封装组件是鸿蒙开发中核心实践

  • 使用 @Prop 接收值，使用 Slot 传入内容

  • 可组合多个组件形成复杂 UI

  • 提升代码复用性、可读性、可维护性

⸻

八、推荐学习路线

  1. 理解 ArkTS 基础语法（@Entry、@State、@Prop）

  2. 学会封装组件并在页面中调用

  3. 学会组合多个组件构建模块化页面

  4. 进阶学习组件间通信与状态管理（如 @Link, @Observed）

⸻

九、参考资料

  • 官方 ArkTS 组件化文档

  • HarmonyOS 开发者社区

⸻

avatar
文章
阅读
粉丝