大家好，我是杨利杰 YJlio。

上一节我练习了父子组件传参。这一节把页面上重复出现的“标题＋说明”抽成 InfoCard，再用不同参数创建两张卡片。这样可以从一个很小的页面，看清组件拆分究竟减少了哪一部分重复。

本篇是学习计划第 018 篇，计划日期为 2026 年 10 月 8 日。原稿已保留；下面的 InfoCard 是围绕主题补充的学习示例，尚未执行本机编译和设备运行。九张配图均为概念图。

一、从重复区块开始，确定拆分边界

我的练习页面有两段信息：一段介绍今日学习，另一段提示下一步。它们都由标题和说明组成，排版结构相同，文字不同。

因此，我让页面负责排列两张卡片，让 InfoCard 负责每张卡片内部的内容与样式。先处理这一个重复区块，不急着把所有 Text 都变成独立组件。

拆分依据是明确的重复结构和职责，不是组件数量越多越好。

二、认识 InfoCard 的基本组成

本例使用 V1 的@Component写法。InfoCard 通过 struct 定义，包含 title、description 两个字段，以及描述界面的 build 方法。页面入口仍然是 Index。

我会把“组件定义”与“组件调用”分开看：前者说明卡片有哪些内容，后者决定这一次卡片展示什么。下面给出同一页面文件中的完整学习示例：

@Componentstruct InfoCard{title:string='';description:string='';build(){Column({space:8}){Text(this.title).fontSize(20).fontWeight(FontWeight.Bold)Text(this.description).fontSize(14)}.width('100%').padding(16).backgroundColor('#F2F5FA').borderRadius(8)}}@Entry@Componentstruct Index{build(){Column({space:12}){InfoCard({title:'今日学习',description:'自定义组件拆分'})InfoCard({title:'下一步',description:'条件渲染与空页面'})}.width('100%').padding(16)}}

如果工程模板采用 V2，应按该体系适配，不能仅替换一个装饰器就认定迁移完成。系列名称也不构成这段代码在某个 SDK 版本已经验证的证据。

三、参数只保留卡片需要的内容

这张卡片只需要两段文字，所以我先保留 title 与 description 两个 string 字段。调用时的参数名与字段名逐项对应，避免把 description 写成另一个没有声明的名称。

本例传入的是固定字符串，字段未使用状态装饰器，也没有点击后修改文字的操作。我把它当作静态初始化练习；后续如果需要父数据变化后更新卡片，应重新选择合适的观察与同步机制。

本例证明的目标是结构复用；动态状态同步需要另外设计和验证。

四、把共同布局留在组件内部

InfoCard 内部使用 Column：title 在上，description 在下，间距为 8。标题字号为 20，说明字号为 14；卡片设置 padding(16)、背景色和 borderRadius(8)。

页面外层 Column 的间距为 12，padding 为 16。这两组样式作用位置不同：卡片内边距影响卡片里的内容，页面内边距影响整组卡片与外层的距离。

这里的数字是示例参数，不是实际设备测得的尺寸。图中仅展示结构关系，真实宽度和换行需结合运行窗口检查。

五、一个定义，两次调用

页面调用两次 InfoCard，调用顺序就是本例的上下顺序。两张卡片共享定义中的排版规则，但分别接收各自的文本。

如果要统一调整两张卡片的标题字号，我只需修改 InfoCard 中的共同样式。若只修改第二张卡片的说明，则修改第二次调用的 description，而不是在组件内部按文字内容写分支。

六、复用结构，不等于共享可变状态

我在本篇说的“复用”，是多次调用同一个组件定义。它不是把两张卡片当作同一个实例，也没有引入共享状态。本例没有可变状态、事件或持久化数据。

同样，这里的写法也不涉及@Reusable对组件创建与销毁的性能优化机制。初学时先把职责、字段和调用关系弄清楚，再讨论缓存、生命周期和性能。

共用一份组件定义，不代表多个调用自动共用同一份可变数据。

七、先在同文件完成，再考虑分文件

为了减少导入问题，我先把 InfoCard 与 Index 放在同一页面文件。待最小例子的结构和参数都看清楚，再决定是否迁出为独立组件文件。

跨文件引用时，需要检查组件导出、使用处导入，以及实际相对路径。本篇没有提供独立文件版本，因此不假定工程必须有某个 components 目录，也不列一个未经确认的导入路径。

如果编译器提示找不到 InfoCard，我会先核对名字、可见范围与导入位置；如果参数报错，则检查字段名和类型。保存错误原文，再记录修改过程。

八、核验时逐张对应，而不是只数卡片

我准备按两张卡片的文字和顺序逐项记录。能看到两张卡片，只说明数量符合预期；标题、说明、间距和长文本显示都还需要单独观察。

写在最后

这一节我把两处相同的卡片布局放进 InfoCard，把不同的文字留在调用处。页面更容易读出“展示哪两段内容”，组件内部则集中说明“每段内容怎么排版”。

下一篇继续学习条件渲染与空页面处理。先把一个小组件的职责讲清楚，再逐步增加交互，比一开始堆很多参数更容易定位问题。

参考资料

1. OpenHarmony 官方文档：创建自定义组件，用于核对基本结构、参数与跨文件引用概念；实际 HarmonyOS 工程以对应 SDK 文档为准。
2. 华为开发者文档：@Reusable 装饰器，用于区分本文的定义复用与组件性能复用机制。
3. 本系列第 018 篇原稿：《自定义组件拆分与复用》，计划日期 2026-10-08。

声明：本文为个人学习笔记，代码与配图用于说明结构；尚无本机编译或设备实测记录。请结合当前工程模板、SDK 文档和实际运行结果验证。

返回顶部