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) }二、参数说明参数类型说明示例valuestring统计数值20labelstring统计标签日记篇数colorstring数值颜色COLOR_PRIMARY三、统计卡片对比统计项数值颜色字体大小日记篇数20#F5A62326vp连续天数7#C8956A26vp总字数1.2K#C8956A26vp四、常见问题4.1 卡片宽度不一致问题三个卡片宽度不同。原因layoutWeight(1)可能被其他属性影响。解决方案确保layoutWeight(1)在Row中正确分配。总结本文通过“海风日记“的 statCard 构建器深入讲解了统计卡片的复用Builder 封装统一卡片样式参数化设计数值、标签、颜色layoutWeight 等分三个卡片等宽复用调用多次使用下一篇文章将深入讲解空数据状态与引导敬请期待。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Builder 装饰器文档Column 组件文档Shadow 属性文档海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区