HarmonyOS应用开发实战：萌宠日记 - 卡片式布局复用模式分析

前言卡片式布局是萌宠日记中最核心的 UI 设计模式。从首页的宠物信息卡片、今日记录卡片、健康提醒卡片到宠物档案页的基本信息卡片、成长记录卡片再到社区页的活动横幅卡片、帖子卡片— 整个应用中有10 余处使用了卡片式设计。本文将从萌宠日记中所有卡片的使用出发深入解析卡片组件的复用模式、通用样式封装、差异化配置以及如何通过组件化设计实现“一处定义、多处复用“。一、卡片使用全景1.1 所有卡片清单页面卡片名称用途关键差异化首页宠物信息卡片展示宠物头像和信息头像 64×64有编辑按钮首页今日记录卡片展示日记摘要有缩略图文本截断首页健康提醒卡片健康事项列表列表项有倒计时档案页头部卡片宠物头像和信息头像 80×80更大档案页基本信息卡片标签-值列表有 Divider 分隔线档案页成长记录卡片成长阶段网格4 列网格布局社区活动横幅卡片活动推广按钮 文案社区帖子卡片用户动态头像 正文 图片统计日记数量卡片统计数据柱状图 数字统计心情分布卡片饼图 图例图表 百分比统计活动统计卡片活动次数图标 数字1.2 卡片通用样式// 所有卡片的通用样式 // 背景色白色 // 圆角16vp // 阴影轻微 // 内边距16vp // 统一的卡片容器 Column() { // 卡片内容 } .width(100%) .backgroundColor(#FFFFFF) .borderRadius(16) .shadow({ radius: 4, color: #10000000, offsetY: 2 })提示萌宠日记中所有卡片都遵循白色背景 16vp 圆角 轻微阴影的统一视觉规范。但部分卡片如今日记录卡片、健康提醒卡片没有使用阴影以保持视觉层次上的区分。二、通用卡片组件封装2.1 基础卡片组件// 通用卡片组件 Component export struct Card { Prop backgroundColor: string #FFFFFF Prop borderRadius: number 16 Prop paddingValue: number 16 Prop hasShadow: boolean true build() { Column() { // 卡片内容通过 BuilderParam 传入 if (this.content) { this.content() } } .width(100%) .backgroundColor(this.backgroundColor) .borderRadius(this.borderRadius) .padding(this.paddingValue) .shadow( this.hasShadow ? { radius: 4, color: #10000000, offsetY: 2 } : undefined ) } BuilderParam content?: () void }2.2 使用示例// 使用通用卡片组件 Card({ paddingValue: 16 }) { Column({ space: 12 }) { Text(基本信息).fontSize(16).fontWeight(FontWeight.Bold) // 列表内容... } }三、卡片组件参数化3.1 参数设计interface CardConfig { backgroundColor?: string // 背景色默认白色 borderRadius?: number // 圆角默认 16 paddingValue?: number // 内边距默认 16 hasShadow?: boolean // 是否有阴影默认 true marginValue?: Margin // 外边距 onClick?: () void // 点击事件 }3.2 不同卡片的配置卡片backgroundColorborderRadiushasShadowpaddingValue宠物信息卡片白色16true16今日记录卡片白色12false16健康提醒卡片白色12false16活动横幅卡片白色16true16统计卡片白色16true16帖子卡片白色16true16四、卡片内容的复用4.1 标题行复用// 卡片标题行 — 多处复用 Builder CardTitle(title: string, action?: { label: string, onClick: () void }) { Row() { Text(title) .fontSize(16) .fontWeight(FontWeight.Bold) .fontColor(#333333) Blank() if (action) { Text(action.label) .fontSize(14) .fontColor(#F5A623) .onClick(action.onClick) } } .width(100%) }4.2 使用示例// 基本信息卡片 Column({ space: 12 }) { CardTitle(基本信息) // 列表内容... } // 健康提醒卡片 Column({ space: 12 }) { CardTitle(健康提醒, { label: , onClick: () {} }) // 提醒列表... } // 统计卡片 Column({ space: 12 }) { CardTitle(日记数量) // 统计内容... }五、卡片内边距与外边距5.1 边距分类// 卡片内边距 — 内容与卡片边框的距离 .padding(16) // 卡片外边距 — 卡片与周围元素的距离 .margin({ left: 16, right: 16, bottom: 16 })5.2 边距规范边距类型默认值说明卡片内边距16vp内容与卡片边框卡片左右外边距16vp卡片与屏幕边缘卡片上下间距16vp卡片之间的垂直间距标题与内容间距12vp卡片内标题与内容的间距六、卡片阴影策略6.1 阴影使用场景// 有阴影的卡片 — 突出显示 .shadow({ radius: 4, color: #10000000, offsetY: 2 }) // 宠物信息卡片、活动横幅、统计卡片、帖子卡片 // 无阴影的卡片 — 内容展示 // 今日记录卡片、健康提醒卡片6.2 阴影设计原则卡片类型阴影设计意图独立卡片有阴影从页面背景中突出列表项卡片无阴影减少视觉噪点嵌套卡片无阴影避免阴影叠加七、卡片布局的组件化7.1 组件拆分CardContainer卡片容器 ├── CardTitle标题行 ├── CardContent内容区 │ ├── InfoList信息列表 │ ├── GridLayout网格布局 │ └── ChartContent图表内容 └── CardFooter底部操作区7.2 组件复用关系// 宠物档案页 CardContainer CardTitle InfoList // 统计页 CardContainer CardTitle ChartContent // 社区页 CardContainer CardTitle PostContent八、卡片复用收益8.1 代码量对比实现方式代码量维护成本一致性重复编写每条卡片 15-20 行高低组件封装基础组件 30 行 使用 5 行低高8.2 复用统计复用维度复用次数说明卡片容器样式10 次所有卡片标题行组件6 次带标题的卡片阴影配置5 次独立卡片16vp 内边距10 次所有卡片九、卡片性能优化9.1 渲染性能优化策略说明避免嵌套过深卡片容器嵌套不超过 3 层使用 Builder 复用避免重复创建组件实例条件渲染阴影等属性按需渲染轻量组件卡片内容使用轻量组件9.2 卡片在列表中的性能// 在列表中使用卡片时使用 LazyForEach 优化 LazyForEach(this.cardData, (item: CardData) { ListItem() { Card({ hasShadow: true }) { // 卡片内容 } } }, (item: CardData) item.id)十、最佳实践10.1 卡片设计原则有序列表 — 卡片设计的 5 个原则统一视觉规范所有卡片使用相同的背景色、圆角、阴影风格组件化封装将卡片容器封装为通用组件减少重复代码参数化配置通过参数控制卡片样式差异阴影、圆角、内边距内容与容器分离卡片容器只负责样式内容由 BuilderParam 传入差异化恰到好处不同卡片在统一风格下保留差异化特征10.2 萌宠日记卡片复用总结卡片类型容器标题内容阴影宠物信息卡片Card无头像 信息✅今日记录卡片CardCardTitle文本 缩略图❌健康提醒卡片CardCardTitle列表项❌基本信息卡片CardCardTitle标签-值列表✅成长记录卡片CardCardTitle网格布局✅活动横幅卡片Card无文案 按钮✅帖子卡片Card无头像 正文 图片✅统计卡片CardCardTitle图表 数字✅总结本文从萌宠日记的卡片式布局复用出发深入解析了卡片组件化的完整方法卡片全景10 处卡片使用覆盖所有主要页面通用组件封装Card 组件 BuilderParam 内容插槽参数化配置backgroundColor、borderRadius、hasShadow 等标题行复用CardTitle Builder 复用 6 次边距规范统一的 16vp 内边距和外边距阴影策略独立卡片有阴影列表项无阴影组件拆分CardContainer → CardTitle → CardContent复用收益减少代码量、提升一致性、降低维护成本卡片式布局的组件化复用是萌宠日记保持 UI 一致性和开发效率的关键设计模式。下一篇我们将深入宠物信息数据结构设计解析宠物数据模型的设计与演进。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Component 自定义组件https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-create-custom-componentsBuilderParam 装饰器https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-builderparamProp 装饰器https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-prop卡片设计指南https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/design-cards阴影属性https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-shadow-effect组件化设计https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/component-based-design布局基础https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkui-layout性能优化https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/performance-optimization