前言

在日历中，今日标记是最重要的视觉提示。"海风日记"的日历页使用橙色圆形底 + 阴影来高亮今日日期，同时通过小圆点标记有日记的日期。

本文将从源码出发，深入讲解今日标记的实现和条件渲染逻辑。

一、今日标记实现

1.1 源码

GridItem() {
  Stack({ alignContent: Alignment.Center }) {
    // 今日橙色圆底
    if (this.isToday(day)) {
      Circle()
        .width(36).height(36)
        .fill(COLOR_PRIMARY)
        .shadow({ radius: 8, color: 'rgba(245,166,35,0.35)' })
    }

    Column({ space: 2 }) {
      Text(day.toString())
        .fontSize(15)
        .fontColor(
          this.isToday(day) ? '#FFFFFF'         // 今日：白色
            : this.hasDiary(day) ? COLOR_TEXT_MAIN  // 有日记：深色
            : COLOR_TEXT_SECONDARY                  // 无日记：灰色
        )
        .fontWeight(
          this.hasDiary(day) || this.isToday(day) ? FontWeight.Bold : FontWeight.Normal
        )

      // 有日记小圆点
      if (this.hasDiary(day) && !this.isToday(day)) {
        Circle().width(4).height(4).fill(COLOR_PRIMARY)
      }
    }
    .alignItems(HorizontalAlign.Center)
  }
  .width('100%').height(52)
}

二、条件渲染逻辑

2.1 日期文字颜色

2.2 视觉标记

三、年视图的今日标记

// 今日
if (day === this.todayDate && monthIndex === this.todayMonth && this.curYear === this.todayYear) {
  Circle().width(18).height(18).fill(COLOR_PRIMARY)
}

Text(day.toString())
  .fontSize(9)
  .fontColor(
    // 今日：白色
    // 有日记：橙色
    // 无日记：灰色
  )

四、常见问题

4.1 今日标记不显示

问题：今日日期没有显示橙色圆底。

原因：isToday() 判断逻辑有误，时间比较不正确。

解决方案：确保 isToday() 同时比较年、月、日。

总结

本文通过"海风日记"的日历页，深入讲解了今日标记的实现：

1. Circle 圆形底：36vp 橙色圆
2. Shadow 阴影：橙色阴影高亮
3. 条件渲染：根据日期状态显示不同颜色
4. 小圆点标记：4vp 橙色圆点

下一篇文章将深入讲解 有日记日期标记，敬请期待。

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

相关资源：

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