前言在“海风日记“的日历页底部月统计面板展示了本月日记数、连续天数和主要心情三项数据为用户提供了直观的写作统计。本文将从源码出发深入讲解统计面板的实现。一、月统计面板实现1.1 源码Row({ space: 16 }) { Column({ space: 4 }) { Text(MOCK_DIARIES.length.toString()) .fontSize(22).fontColor(COLOR_PRIMARY).fontWeight(FontWeight.Bold) Text(本月日记).fontSize(11).fontColor(COLOR_TEXT_SECONDARY) }.layoutWeight(1).alignItems(HorizontalAlign.Center) Divider().vertical(true).height(30).color(COLOR_DIVIDER) Column({ space: 4 }) { Text(7).fontSize(22).fontColor(COLOR_AMBER).fontWeight(FontWeight.Bold) Text(连续天数).fontSize(11).fontColor(COLOR_TEXT_SECONDARY) }.layoutWeight(1).alignItems(HorizontalAlign.Center) Divider().vertical(true).height(30).color(COLOR_DIVIDER) Column({ space: 4 }) { Text().fontSize(22) Text(主要心情).fontSize(11).fontColor(COLOR_TEXT_SECONDARY) }.layoutWeight(1).alignItems(HorizontalAlign.Center) }1.2 布局分析┌──────────────┬──────────────┬──────────────┐ │ 20 │ 7 │ │ │ 本月日记 │ 连续天数 │ 主要心情 │ └──────────────┴──────────────┴──────────────┘二、年视图的统计面板Row({ space: 0 }) { Column({ space: 4 }) { Text(MOCK_DIARIES.length.toString()) .fontSize(24).fontColor(COLOR_PRIMARY).fontWeight(FontWeight.Bold) Text(今年日记).fontSize(11).fontColor(COLOR_TEXT_SECONDARY) }.layoutWeight(1).alignItems(HorizontalAlign.Center) Column({ space: 4 }) { Text(7).fontSize(24).fontColor(COLOR_AMBER).fontWeight(FontWeight.Bold) Text(最长连续).fontSize(11).fontColor(COLOR_TEXT_SECONDARY) }.layoutWeight(1).alignItems(HorizontalAlign.Center) Column({ space: 4 }) { Text().fontSize(24) Text(最常心情).fontSize(11).fontColor(COLOR_TEXT_SECONDARY) }.layoutWeight(1).alignItems(HorizontalAlign.Center) }三、垂直 Divider 使用Divider().vertical(true).height(30).color(COLOR_DIVIDER)vertical(true)将 Divider 从水平分隔线变为垂直分隔线。四、常见问题4.1 统计数字不更新问题添加日记后统计数字没有变化。原因统计数字是静态 Mock 数据。解决方案使用State变量数据变化时自动更新。总结本文通过“海风日记“的月统计面板深入讲解了统计数据的展示三项数据日记数、连续天数、主要心情垂直 Divider分隔统计项年视图统计今年日记、最长连续、最常心情下一篇文章将深入讲解CalendarYearPage 年视图敬请期待。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Divider 组件文档Row 组件文档Text 组件文档海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区