前言在“海风日记“的年视图页面中年统计面板展示了今年日记总数、最长连续天数和最常心情三项数据为用户提供年度写作总结的概览。本文将从源码出发深入讲解年统计面板的实现和数据聚合逻辑。一、年统计面板1.1 源码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) }1.2 月统计 vs 年统计对比月统计年统计日记数本月日记今年日记连续数据连续天数最长连续心情主要心情最常心情二、统计卡片样式.width(100%) .padding({ left: PAGE_PADDING, right: PAGE_PADDING, top: 8, bottom: 16 }) .backgroundColor(COLOR_CARD_BG) .borderRadius(CARD_RADIUS) .shadow({ radius: 8, color: rgba(160,120,60,0.08), offsetY: 2 })三、刚刚过去的一周3.1 数据聚合在统计面板中日记数、连续天数和主要心情可以从日记数据中聚合计算得出// 示例计算日记数 const totalCount MOCK_DIARIES.length // 示例计算连续天数需要排序和遍历 function getConsecutiveDays(diaries: DiaryEntry[]): number { // 按日期排序计算最长连续天数 } // 示例计算主要心情 function getMainMood(diaries: DiaryEntry[]): string { // 统计每种心情的出现次数取最多的 }四、常见问题4.1 统计数据不准确问题统计数字与实际情况不符。原因Mock 数据是静态的没有动态聚合逻辑。解决方案实现数据聚合函数从日记数据中动态计算。总结至此第六系列“日历与年视图“全部完成下一篇文章开始进入第七系列回顾与统计。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Row 组件文档Text 组件文档Shadow 属性文档海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区