前言在日历中标记有日记的日期可以帮助用户快速定位已记录的内容。“海风日记“的日历页通过小圆点、加粗字重和点击跳转三种方式让有日记的日期一目了然。本文将从源码出发深入讲解有日记日期的视觉标记和交互逻辑。一、有日记日期标记1.1 源码// 有日记小圆点 if (this.hasDiary(day) !this.isToday(day)) { Circle().width(4).height(4).fill(COLOR_PRIMARY) } // 加粗字重 .fontWeight( this.hasDiary(day) || this.isToday(day) ? FontWeight.Bold : FontWeight.Normal ) // 点击跳转 .onClick(() { if (this.hasDiary(day)) { router.pushUrl({ url: pages/diary/DiaryDetailPage }) } })1.2 三种标记方式标记方式实现效果小圆点4px Circle日期下方橙色小点加粗字重FontWeight.Bold日期数字加粗点击跳转router.pushUrl点击进入日记详情二、有日记日期的判断private diaryDates: Setstring new Set( MOCK_DIARIES.map(d d.date) ) private hasDiary(day: number): boolean { const key ${this.curYear}-${String(this.curMonth1).padStart(2,0)}-${String(day).padStart(2,0)} return this.diaryDates.has(key) }三、月统计面板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) } 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) } Divider().vertical(true).height(30).color(COLOR_DIVIDER) Column({ space: 4 }) { Text().fontSize(22) Text(主要心情).fontSize(11).fontColor(COLOR_TEXT_SECONDARY) } }四、常见问题4.1 小圆点与其他标记重叠问题今日的橙色圆底和小圆点重叠。解决方案使用!this.isToday(day)条件今日不显示小圆点。总结本文通过“海风日记“的日历页深入讲解了有日记日期的标记小圆点4px 橙色圆点加粗字重FontWeight.Bold点击跳转router.pushUrl月统计面板本月日记数、连续天数、主要心情下一篇文章将深入讲解月份切换与年份导航敬请期待。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Circle 组件文档Router 路由文档Divider 组件文档海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区