自定义组件可以帮助开发者实现复用性强、逻辑清晰的界面模块。通过自定义组件,鸿蒙应用能够提高代码的可维护性,并简化复杂布局的构建。本篇将介绍如何创建自定义组件,如何向组件传递数据,以及如何在不同页面间复用这些组件。
关键词
- 自定义组件
- 复用组件
- 属性传递
- 组件通信
- 组件封装
一、创建基础自定义组件
自定义组件是一个独立的 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: '这里是内容' })