CalendarYearPage 年视图：12 个月微型日历网格

前言“海风日记“的年视图页面展示了全年的日历概览使用 Grid 3 列布局展示 12 个月微型日历每个微型日历包含月份标题、星期行和日期网格。本文将从CalendarYearPage.ets源码出发深入讲解年视图的实现。一、年视图布局1.1 整体结构Scroll() { Grid() { ForEach(this.createIndexArray(12), (monthIndex: number) { GridItem() { this.miniCalendar(monthIndex) // 12 个微型日历 } }) } .columnsTemplate(1fr 1fr 1fr) // 3 列 .columnsGap(10).rowsGap(10) }1.2 微型日历构建器Builder miniCalendar(monthIndex: number) { Column({ space: 4 }) { // 月份标题 Text(this.months[monthIndex]) .fontSize(13).fontColor(COLOR_TEXT_MAIN).fontWeight(FontWeight.Bold) // 星期行 Row() { ForEach([日,一,二,三,四,五,六], (d: string) { Text(d).fontSize(8).fontColor(COLOR_TEXT_HINT) }) } // 日期网格 Grid() { // 空白偏移 ForEach(this.createIndexArray(new Date(monthIndex).getDay()), (i) { GridItem() { Column().width(100%).height(18) } }) // 日期 ForEach(this.createDayArray(new Date(monthIndex 1, 0).getDate()), (day) { GridItem() { Stack() { if (isToday) { Circle().width(18).height(18).fill(COLOR_PRIMARY) } Text(day.toString()).fontSize(9) } } }) } .columnsTemplate(1fr 1fr 1fr 1fr 1fr 1fr 1fr) } .padding(10).backgroundColor(COLOR_CARD_BG) .borderRadius(CARD_RADIUS) .shadow({ radius: 8, color: rgba(160,120,60,0.08), offsetY: 2 }) }二、微型日历的尺寸元素尺寸说明月份标题13vp加粗星期文字8vp极小字号日期数字9vp小字号行高18vp紧凑今日圆点18vp橙色三、年份导航Row({ space: 4 }) { Button() { SymbolGlyph($r(sys.symbol.chevron_left)).fontSize(16).fontColor([COLOR_AMBER]) } .onClick(() { this.curYear - 1 }) Button() { SymbolGlyph($r(sys.symbol.chevron_right)).fontSize(16).fontColor([COLOR_AMBER]) } .onClick(() { this.curYear 1 }) }四、常见问题4.1 微型日历显示不全问题微型日历中的日期数字显示不全。原因Grid 单元格太小无法容纳所有日期。解决方案减小字号9vp和行高18vp。总结本文通过“海风日记“的年视图深入讲解了微型日历网格的实现3 列 Grid12 个月按 3×4 排列微型日历 Builder月份标题 星期行 日期网格紧凑布局小字号、短线高年份导航左右箭头切换年份下一篇文章将深入讲解年统计与最长连续天数敬请期待。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Grid 组件文档Builder 装饰器文档Shadow 属性文档海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区