月统计面板：日记数 + 连续天数 + 主要心情

前言

在"海风日记"的日历页底部，月统计面板展示了本月日记数、连续天数和主要心情三项数据，为用户提供了直观的写作统计。

本文将从源码出发，深入讲解统计面板的实现。

一、月统计面板实现

1.1 源码

typescript 复制代码

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          │   😊         │
│  本月日记    │  连续天数    │  主要心情    │
└──────────────┴──────────────┴──────────────┘

二、年视图的统计面板

typescript 复制代码

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 使用

typescript 复制代码

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
开源鸿蒙跨平台社区