「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: '这里是内容' });TitleContentCard({ title: '第二个标题', content: '更多内容展示' });}.padding(20); // 设置外边距}
}

效果示例：展示多个 TitleContentCard 实例，带有不同标题和内容。

二、向自定义组件传递属性

自定义组件可以使用 @Prop 修饰符接收外部传入的属性，增强组件的复用性和灵活性。

2.1 属性传递

通过 @Prop 定义组件的参数，并从外部传递数据。以下示例中，title 和 description 被传入并在组件中显示：

// InfoCard.ets
@Component
export struct InfoCard {@Prop title: string; // 标题属性@Prop description: string; // 描述属性build() {Column() {Text(this.title).fontSize(18) // 设置标题字体大小.fontWeight(FontWeight.Bold); // 设置标题加粗Text(this.description).fontSize(14) // 设置描述字体大小.margin({ top: 5 }); // 设置顶部边距}.padding(10) // 设置内边距.backgroundColor(Color.White) // 设置背景颜色.borderRadius(10); // 设置圆角}
}

效果示例：显示标题和描述，展示信息卡片。

2.2 可选属性和默认值

为 @Prop 设置默认值，以防止外部未传递数据时出现错误：

// InfoCard.ets
@Component
export struct InfoCard {@Prop title: string = '默认标题'; // 设置默认标题@Prop description: string = '默认描述'; // 设置默认描述build() {Column() {Text(this.title).fontSize(18).fontWeight(FontWeight.Bold);Text(this.description).fontSize(14).margin({ top: 5 });}.padding(10).backgroundColor(Color.White).borderRadius(10);}
}

效果示例：当未传递标题和描述时，展示默认信息。

三、嵌套与组合自定义组件

自定义组件可以嵌套使用，创建更复杂的 UI 布局，实现界面模块化。

3.1 组合组件示例

创建一个包含图片、标题和内容的卡片组件，并嵌套使用 TitleContentCard 组件：

// ImageCard.ets
import { TitleContentCard } from './TitleContentCard'; // 引入自定义组件@Component
export struct ImageCard {@Prop imageUrl: string; // 图片 URL@Prop title: string; // 标题@Prop content: string; // 内容build() {Column() {Image(this.imageUrl).width('100%') // 设置宽度.height(150) // 设置高度.objectFit(ImageFit.Cover) // 设置图片填充模式.borderRadius(10); // 设置圆角TitleContentCard({ title: this.title, content: this.content }).margin({ top: 10 }); // 设置顶部边距}.padding(10) // 设置内边距.backgroundColor(Color.White) // 设置背景颜色.borderRadius(10); // 设置圆角}
}

3.2 组合组件的使用

在其他组件中调用 ImageCard，并传入数据：

// Index.ets
ImageCard({imageUrl: 'https://example.com/sample.jpg',title: '图片标题',content: '这是一段描述文字。'
});

效果示例：展示包含图片、标题和内容的卡片。

四、组件状态管理与内部通信

内部状态管理：

自定义组件可以使用 @State 管理内部状态，控制组件内部的动态变化。例如，切换显示内容的状态：

// ToggleContentCard.ets
@Component
export struct ToggleContentCard {@Prop title: string; // 标题@Prop content: string; // 内容@State isVisible: boolean = false; // 是否可见build() {Column() {Text(this.title).fontSize(18).onClick(() => {this.isVisible = !this.isVisible; // 切换可见状态});if (this.isVisible) {Text(this.content).fontSize(16).margin({ top: 10 });}}.padding(10).backgroundColor(Color.Gray).borderRadius(8);}
}

父子组件通信：

父组件可以通过状态管理与子组件通信，实现数据共享。例如，父组件控制 ToggleContentCard 的显示状态：

// Index.ets
import { ToggleContentCard } from './ToggleContentCard'; // 引入子组件@Entry
@Component
struct MainPage {@State isCardVisible: boolean = false; // 卡片是否可见build() {Column() {Button('切换内容显示').onClick(() => {this.isCardVisible = !this.isCardVisible; // 切换状态}).padding(10).backgroundColor(Color.Green).fontColor(Color.White).borderRadius(5);if (this.isCardVisible) {ToggleContentCard({title: '点击标题查看内容',content: '这里是详细内容'}).margin(20);}}.padding(20).width('100%').height('100%').alignItems(HorizontalAlign.Center) // 水平居中.justifyContent(FlexAlign.Center); // 垂直居中}
}