自定义组件可以帮助开发者实现复用性强、逻辑清晰的界面模块。通过自定义组件，鸿蒙应用能够提高代码的可维护性，并简化复杂布局的构建。本篇将介绍如何创建自定义组件，如何向组件传递数据，以及如何在不同页面间复用这些组件。
关键词
- 自定义组件
- 复用组件
- 属性传递
- 组件通信
- 组件封装
一、创建基础自定义组件
自定义组件是一个独立的 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); // 垂直居中 } }- 父组件可以通过状态管理与子组件通信，实现数据共享。例如，父组件控制
五、自定义组件的最佳实践
组件拆分：
- 尽量将组件拆分为小而独立的部分，每个组件负责一项特定功能，减少耦合。
可重用性：
- 为组件提供通用的属性，设置默认值，确保组件在多种场景下均能复用。
性能优化：
- 避免在组件内部频繁更新状态，减少不必要的重绘，保证性能。
小结
本篇介绍了自定义组件的创建与使用，涵盖了属性传递、嵌套组合和状态管理等内容。通过自定义组件，开发者可以构建复用性强、逻辑清晰的 UI 模块，大大提升鸿蒙应用的开发效率和维护性。
下一篇预告
下一篇将带你体验第一个互动项目——“灯光控制小项目”，学习如何结合按钮交互和状态管理来实现动态效果。
上一篇： 「Mac畅玩鸿蒙与硬件22」鸿蒙UI组件篇12 - Canvas组件的动态进阶应用
下一篇： 「Mac畅玩鸿蒙与硬件24」UI互动应用篇1 - 灯光控制小项目
作者：SoraLuna
链接：https://www.nutpi.net/thread?topicId=271
來源：坚果派
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
