今日橙色圆底标记：Circle + Shadow + 条件渲染

2026/7/18 23:58:32

前言

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

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

一、今日标记实现

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( // 今日：白色 // 有日记：橙色 // 无日记：灰色 )