「Mac畅玩鸿蒙与硬件23」鸿蒙UI组件篇13 - 自定义组件的创建与使用

自定义组件可以帮助开发者实现复用性强、逻辑清晰的界面模块。通过自定义组件，鸿蒙应用能够提高代码的可维护性，并简化复杂布局的构建。本篇将介绍如何创建自定义组件，如何向组件传递数据，以及如何在不同页面间复用这些组件。

关键词

• 自定义组件
• 复用组件
• 属性传递
• 组件通信
• 组件封装

一、创建基础自定义组件

自定义组件是一个独立的 UI 单元，包含了特定的布局、样式和行为，可以在应用的不同部分复用。

1.1 基础自定义组件

创建一个显示标题和内容的简单组件，封装标题文字和内容区域：

// TitleContentCard.ets
@Component
export struct TitleContentCard {
   
  @Prop title: string; // 标题属性
  @Prop content: string; // 内容属性

  build() {
   
    Column() {
   
      Text(this.title)
        .fontSize(20) // 设置字体大小
        .fontWeight(FontWeight.Bold) // 设置字体加粗
        .margin({
    bottom: 5 }); // 设置底部边距

      Text(this.content)
        .fontSize(16); // 设置内容字体大小

      Image($r('app.media.cat')) // 添加一张图片
        .width(305) // 设置图片宽度
        .height(360); // 设置图片高度
    }
    .padding(10) // 设置内边距
    .borderRadius(8) // 设置圆角
    .backgroundColor(Color.Gray); // 设置背景颜色
  }
}

1.2 使用自定义组件

在其他页面引用 TitleContentCard 组件，并传递标题和内容数据：

// Index.ets
import {
    TitleContentCard } from './TitleContentCard'; // 引入自定义组件

@Entry
@Component
struct MainPage {
   
  build() {
   
    Row() {
   
      TitleContentCard({
    title: '组件标题', content: '这里是内容' })