今日橙色圆底标记：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灰色Normal2.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开源鸿蒙跨平台社区