statCard 构建器：统一数据统计卡片样式
前言
在“海风日记“的回顾页中，statCard构建器封装了统计卡片的样式，用于展示日记篇数、连续天数和总字数等数据。
本文将从源码出发，深入讲解 statCard 构建器的设计和复用。
一、statCard 构建器
1.1 源码
@Builder statCard(value: string, label: string, color: string) { Column({ space: 4 }) { Text(value) .fontSize(26).fontColor(color).fontWeight(FontWeight.Bold) Text(label) .fontSize(11).fontColor(COLOR_TEXT_SECONDARY) } .layoutWeight(1).alignItems(HorizontalAlign.Center) .padding({ top: 16, bottom: 16 }) .backgroundColor(COLOR_CARD_BG) .borderRadius(CARD_RADIUS) .shadow({ radius: 8, color: 'rgba(160,120,60,0.08)', offsetY: 2 }) }1.2 调用
Row({ space: 10 }) { this.statCard('20', '日记篇数', COLOR_PRIMARY) this.statCard('7', '连续天数', COLOR_AMBER) this.statCard('1.2K', '总字数', '#C8956A') }二、参数说明
| 参数 | 类型 | 说明 | 示例 |
|---|---|---|---|
value | string | 统计数值 | '20' |
label | string | 统计标签 | '日记篇数' |
color | string | 数值颜色 | COLOR_PRIMARY |
三、统计卡片对比
| 统计项 | 数值 | 颜色 | 字体大小 |
|---|---|---|---|
| 日记篇数 | 20 | #F5A623 | 26vp |
| 连续天数 | 7 | #C8956A | 26vp |
| 总字数 | 1.2K | #C8956A | 26vp |
四、常见问题
4.1 卡片宽度不一致
问题：三个卡片宽度不同。
原因：layoutWeight(1)可能被其他属性影响。
解决方案：确保layoutWeight(1)在Row中正确分配。
总结
本文通过“海风日记“的 statCard 构建器，深入讲解了统计卡片的复用：
- @Builder 封装：统一卡片样式
- 参数化设计：数值、标签、颜色
- layoutWeight 等分：三个卡片等宽
- 复用调用：多次使用
下一篇文章将深入讲解空数据状态与引导，敬请期待。
如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！
相关资源：
- @Builder 装饰器文档
- Column 组件文档
- Shadow 属性文档
- 海风日记项目源码
- [HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs
- 开源鸿蒙跨平台社区