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') }

二、参数说明

三、统计卡片对比

四、常见问题

4.1 卡片宽度不一致

问题：三个卡片宽度不同。

原因：layoutWeight(1)可能被其他属性影响。

解决方案：确保layoutWeight(1)在Row中正确分配。

总结

本文通过“海风日记“的 statCard 构建器，深入讲解了统计卡片的复用：

1. @Builder 封装：统一卡片样式
2. 参数化设计：数值、标签、颜色
3. layoutWeight 等分：三个卡片等宽
4. 复用调用：多次使用

下一篇文章将深入讲解空数据状态与引导，敬请期待。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

• @Builder 装饰器文档
• Column 组件文档
• Shadow 属性文档
• 海风日记项目源码
• [HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs
• 开源鸿蒙跨平台社区