今日橙色圆底标记：Circle + Shadow + 条件渲染
前言
在日历中，今日标记是最重要的视觉提示。“海风日记“的日历页使用橙色圆形底 + 阴影来高亮今日日期，同时通过小圆点标记有日记的日期。
本文将从源码出发，深入讲解今日标记的实现和条件渲染逻辑。
一、今日标记实现
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 日期文字颜色
| 状态 | 文字颜色 | 字重 |
|---|---|---|
| 今日 | #FFFFFF（白色） | Bold |
| 有日记 | COLOR_TEXT_MAIN（深色） | Bold |
| 无日记 | COLOR_TEXT_SECONDARY（灰色） | Normal |
2.2 视觉标记
| 状态 | 标记 |
|---|---|
| 今日 | 橙色圆形底 + 阴影 |
| 有日记（非今日） | 4px 橙色小圆点 |
| 无日记 | 无 |
三、年视图的今日标记
// 今日 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()同时比较年、月、日。
总结
本文通过“海风日记“的日历页，深入讲解了今日标记的实现：
- Circle 圆形底：36vp 橙色圆
- Shadow 阴影：橙色阴影高亮
- 条件渲染：根据日期状态显示不同颜色
- 小圆点标记：4vp 橙色圆点
下一篇文章将深入讲解有日记日期标记，敬请期待。
如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！
相关资源：
- Circle 组件文档
- Shadow 属性文档
- Grid 组件文档
- 海风日记项目源码
- [HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs
- 开源鸿蒙跨平台社区