HarmonyOs应用《重要日》开发第17篇 - 日历页多视图切换

发布时间：2026/8/11 14:25:51

HarmonyOs应用《重要日》开发第17篇 - 日历页多视图切换
本文解析 ImportantDays 项目中的日历页面CalendarPage包括年/月视图切换、日期导航前后月、今天、日期选择器、选中日期的重要日列表展示、以及日历与重要日数据的联动设计。一、页面定位CalendarPage是应用的第二个 Tab 页面提供日历浏览功能。用户可以在年视图和月视图之间切换左右滑动浏览不同月份/年份点击日期查看当天的重要日通过日期选择器快速跳转二、组件定义ComponentV2exportstruct CalendarPage{vm:CalendarVMCalendarVM.getInstance();manager:ImportantDayManagerImportantDayManager.getInstance();LocalcurrentTitle:string;LocalselectedDays:ImportantDay[][];LocalshowDatePicker:booleanfalse;}状态变量变量说明vm日历视图模型单例manager重要日管理器单例currentTitle当前显示的标题年/月selectedDays选中日期的重要日列表showDatePicker日期选择器弹窗状态三、生命周期aboutToAppear():void{this.updateTitle();this.updateSelectedDays();}页面即将出现时初始化标题和选中日期的重要日列表。四、build 方法整体结构build(){Column(){// 1. 标题栏导航 今天按钮Row(){...}// 2. 视图切换按钮Row(){...}// 3. 日历主体if(this.vm.viewTypeViewTypeEnum.YEAR){YearCalendar({...})}else{MonthWeekCalendar({...})}// 4. 选中日期的重要日列表if(this.selectedDays.length0){Divider()Text(当日重要日)Scroll(){Column(){ForEach(this.selectedDays,(day){this.importantDayCard(day)})}}}}.bindSheet($$this.showDatePicker,this.datePickerBuilder(),{...})}布局层次Column ├── Row (标题栏) ├── Row (视图切换) ├── YearCalendar / MonthWeekCalendar (日历主体) └── [条件] 当日重要日列表 ├── Divider ├── Text (标题) └── Scroll → ForEach → importantDayCard五、标题栏与导航Row(){// 上个月按钮Text().fontSize(20).fontColor(#666666).padding(8).onClick((){this.vm.selectDatethis.vm.selectDate.subtract(1,month);this.updateTitle();})// 当前月份标题Text(this.currentTitle).fontSize(20).fontWeight(FontWeight.Bold).fontColor(#333333).layoutWeight(1).textAlign(TextAlign.Center).onClick((){this.showDatePickertrue;})// 下个月按钮Text().fontSize(20).fontColor(#666666).padding(8).onClick((){this.vm.selectDatethis.vm.selectDate.add(1,month);this.updateTitle();})// 今天按钮Text(今天).fontSize(14).fontColor(#FF6B6B).padding({left:8,right:8}).onClick((){this.vm.goToToday();this.updateTitle();this.updateSelectedDays();})}导航功能按钮功能上一月标题打开日期选择器下一月今天跳转到今天标题点击点击标题文字打开日期选择器用户可以快速选择目标日期。六、视图切换Row(){ForEach(this.getViewTypes(),(item:ViewTypeItem){Text(item.name).fontSize(13).fontColor(this.vm.viewTypeitem.type?#FFFFFF:#666666).backgroundColor(this.vm.viewTypeitem.type?#FF6B6B:#F5F5F5).borderRadius(12).padding({left:12,right:12,top:4,bottom:4}).margin({right:8}).onClick((){this.vm.changeViewType(item.type);this.updateTitle();})})}privategetViewTypes():ViewTypeItem[]{return[{type:ViewTypeEnum.YEAR,name:年},{type:ViewTypeEnum.MONTH,name:月}];}视图切换按钮[年] [月]选中状态白字红底未选中灰字灰底切换逻辑点击按钮 →vm.changeViewType(type)→ VM 切换视图并重置数据 →updateTitle()更新标题。七、日历主体渲染if(this.vm.viewTypeViewTypeEnum.YEAR){YearCalendar({vm:this.vm,onSelectDate:(date:Date){this.vm.changeDate(dayjs(date));this.vm.changeViewType(ViewTypeEnum.MONTH);this.updateTitle();this.updateSelectedDays();}})}else{MonthWeekCalendar({vm:this.vm,onChangeDay:(date:Date){this.updateSelectedDays();},selectedColor:#FF6B6B,startWeekday:this.vm.startWeekday,isShowHeader:true})}年视图回调年视图中选择日期后更新 VM 选中日期自动切换到月视图更新标题和重要日列表月视图回调月视图中选择日期后更新选中日期的重要日列表下方区域展示当天重要日八、当日重要日列表if(this.selectedDays.length0){Divider().color(#EEEEEE)Text(当日重要日).fontSize(14).fontWeight(FontWeight.Medium).fontColor(#333333).padding({left:12,top:8,bottom:4})Scroll(){Column(){ForEach(this.selectedDays,(day:ImportantDay){this.importantDayCard(day)})}.padding({left:12,right:12,bottom:12})}.layoutWeight(1)}条件渲染只有选中日期有重要日时才显示此区域避免空列表占用空间。重要日卡片BuilderimportantDayCard(day:ImportantDay){Row(){// 颜色条Column().width(4).height(40).backgroundColor(day.color).borderRadius(2).margin({right:8})Column(){Text(day.title).fontSize(15).fontWeight(FontWeight.Medium).fontColor(#333333).maxLines(1)Text(${DateUtil.getFullDateStr(day.targetDate)}·${day.getDisplayText()}).fontSize(12).fontColor(#999999).margin({top:2})}.layoutWeight(1)// 倒数/正数标签Text(day.isCountdown?倒数:正数).fontSize(10).fontColor(day.isCountdown?#FF6B6B:#4ECDC4).backgroundColor(day.isCountdown?#FFF0F0:#E8FAF8).borderRadius(4).padding({left:6,right:6,top:2,bottom:2})}.padding({top:8,bottom:8}).borderRadius(8).backgroundColor(#FAFAFA).margin({bottom:4})}卡片设计┌─┬───────────────────────────────┬──────┐ │ │ 妈妈生日 │ 倒数 │ │ │ 2026年08月15日 · 还有 29 天 │ │ └─┴───────────────────────────────┴──────┘ 4vp layoutWeight(1) auto比列表页的卡片更简洁细色条4vp 宽代替宽色条无操作按钮添加倒数/正数标签九、日期选择器BuilderdatePickerBuilder(){Column(){Text(选择日期).fontSize(18).fontWeight(FontWeight.Medium).padding(16)DatePicker({start:newDate(2000-01-01),end:newDate(2099-12-31),selected:this.vm.selectDate.toDate()}).onChange((value:DatePickerResult){if(value.yearvalue.month!undefinedvalue.day){constdatedayjs().year(value.year).month(value.month).date(value.day);this.vm.changeDate(date);this.updateTitle();this.updateSelectedDays();}}).width(100%).height(200)Button(确定).width(80%).height(40).backgroundColor(#FF6B6B).margin({top:16}).onClick((){this.showDatePickerfalse;})}}DatePicker 配置配置值说明start2000-01-01可选最早日期end2099-12-31可选最晚日期selected当前选中日期初始显示日期选择流程用户滚动选择年/月/日onChange实时更新 VM 选中日期点击确定关闭弹窗标题和重要日列表自动更新十、更新方法privateupdateTitle():void{if(this.vm.viewTypeViewTypeEnum.YEAR){this.currentTitlethis.vm.getCurrentYearTitle();}else{this.currentTitlethis.vm.getCurrentMonthTitle();}}privateupdateSelectedDays():void{this.selectedDaysthis.vm.getSelectedDateDays();}updateTitle根据当前视图类型生成不同标题年视图2026年月视图2026年07月updateSelectedDays从 VM 获取选中日期的重要日列表更新到selectedDays。十一、数据联动日期选择 → 列表更新用户点击日期 ↓ MonthWeekCalendar.onDateClick ↓ vm.changeDate(date) ↓ onChangeDay 回调 ↓ CalendarPage.updateSelectedDays() ↓ vm.getSelectedDateDays() ↓ ImportantDayManager.getDaysByDate(dateStr) ↓ selectedDays 更新 ↓ UI 自动刷新Local 变化月份切换 → 标题更新用户滑动 Swiper ↓ handleSwiperChange ↓ vm.selectDate 更新到新月份 ↓ CalendarPage 检测到月份变化 ↓ updateTitle() ↓ 标题更新十二、总结CalendarPage的设计体现了以下原则多视图共存年视图和月视图通过条件渲染切换多维度导航前后按钮 今天按钮 日期选择器数据联动日期选择自动更新重要日列表条件渲染无重要日时不显示列表区域卡片差异化日历页卡片比列表页更简洁标题智能切换根据视图类型显示年或月标题日历页为用户提供了从宏观年视图到微观月视图当日重要日的完整日历浏览体验。

相关新闻

LDO稳压器原理、设计与选型指南

LDO稳压器原理、设计与选型指南

1. LDO基础概念与核心特性低压差线性稳压器（Low Dropout Regulator，简称LDO）是现代电子系统中不可或缺的电源管理器件。作为一名从事电源设计十余年的工程师，我见证了这个领域从传统线性稳压器到高性能LDO的技术演进。LDO最显著的…

2026/8/10 14:53:36 阅读更多 →
Windows系统隐藏文件夹清理与C盘空间优化指南

Windows系统隐藏文件夹清理与C盘空间优化指南

1. Windows系统隐藏文件夹的清理指南每次打开资源管理器看到C盘飘红，相信不少Windows用户都会心头一紧。系统盘空间不足不仅会导致运行卡顿，更会影响软件更新和日常使用。其实Windows系统中暗藏了不少"空间杀手"，它们往往躲在系统目…

2026/8/10 23:52:11 阅读更多 →
Spring Cloud Gateway核心架构与请求处理流程解析

Spring Cloud Gateway核心架构与请求处理流程解析

1. Spring Cloud Gateway 核心架构解析Spring Cloud Gateway作为Spring官方推出的第二代API网关，其核心设计哲学是"过滤器即一切"。与传统的Servlet Filter不同，它基于响应式编程模型构建，底层采用Netty作为通信框架。整个架构可以…

2026/8/10 16:10:57 阅读更多 →

最新新闻

如何实现Windows到Android的跨平台音频实时共享：AudioShare终极指南

如何实现Windows到Android的跨平台音频实时共享：AudioShare终极指南

如何实现Windows到Android的跨平台音频实时共享：AudioShare终极指南 【免费下载链接】AudioShare 将Windows的音频在其他Android设备上实时播放。Share windows audio 项目地址: https://gitcode.com/gh_mirrors/audi/AudioShare 你是否曾经想要将电脑上播放…

2026/8/11 14:25:24 阅读更多 →
零基础孩子英语入门先学听说习惯

零基础孩子英语入门先学听说习惯

针对周口零基础孩子英语入门教程的需求，不少家长都在寻找适合低龄孩子的启蒙路径，很多家长容易陷入提前背单词、学语法的误区，忽略了语言学习的核心逻辑。其实，对于零基础孩子来说，英语入门阶段先培养听说习惯&#xf…

2026/8/11 14:25:24 阅读更多 →
Chinese-CLIP终极指南：3步实现中文图文检索与零样本分类

Chinese-CLIP终极指南：3步实现中文图文检索与零样本分类

Chinese-CLIP终极指南：3步实现中文图文检索与零样本分类 【免费下载链接】Chinese-CLIP Chinese version of CLIP which achieves Chinese cross-modal retrieval and representation generation. 项目地址: https://gitcode.com/GitHub_Trending/ch/Chinese-CLIP…

2026/8/11 14:25:24 阅读更多 →
如何用Translumo免费实时翻译游戏和视频字幕？终极跨语言工具完整指南

如何用Translumo免费实时翻译游戏和视频字幕？终极跨语言工具完整指南

如何用Translumo免费实时翻译游戏和视频字幕？终极跨语言工具完整指南 【免费下载链接】Translumo Advanced real-time screen translator for games, hardcoded subtitles in videos, static text and etc. 项目地址: https://gitcode.com/gh_mirrors/tr/Translum…

2026/8/11 14:25:24 阅读更多 →
2025终极网盘直链下载神器：高效获取九大网盘真实下载地址

2025终极网盘直链下载神器：高效获取九大网盘真实下载地址

2025终极网盘直链下载神器：高效获取九大网盘真实下载地址 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 ，支持 百度网盘 / 阿里云盘 / 中国移动云盘 / 天…

2026/8/11 14:25:24 阅读更多 →
拆解3000行代码的自我进化智能体框架：从核心架构到实战应用

拆解3000行代码的自我进化智能体框架：从核心架构到实战应用

1. 从“智能体”到“自我进化”：一个从业者的视角 最近和几个做AI应用的朋友聊天，发现大家讨论的焦点，已经从“如何调用大模型API”悄悄转向了“如何构建一个真正能自主工作的智能体（Agent）”。这背后反映了一个趋势&a…

2026/8/11 14:24:24 阅读更多 →

日新闻

如何用Video2X实现专业级视频画质提升：AI视频增强完整指南

如何用Video2X实现专业级视频画质提升：AI视频增强完整指南

如何用Video2X实现专业级视频画质提升：AI视频增强完整指南 【免费下载链接】video2x A machine learning-based video super resolution and frame interpolation framework. Est. Hack the Valley II, 2018. 项目地址: https://gitcode.com/GitHub_Trending/vi/v…

2026/8/11 0:00:02 阅读更多 →
前后端分离项目中控制台与接口工具数据差异排查指南

前后端分离项目中控制台与接口工具数据差异排查指南

1. 问题现象解析：控制台与Apifox的数据差异 最近在调试一个前后端分离项目时，遇到了一个典型问题：后端服务在本地开发环境控制台能正常输出查询数据，但通过Apifox测试时却返回空结果。这种"控制台有数据，接口工具…

2026/8/11 0:00:03 阅读更多 →
AI编程实战：从Claude Code踩坑到游戏开发入门

AI编程实战：从Claude Code踩坑到游戏开发入门

1. 从“AI能帮我做游戏”到“AI让我重新学编程”最近身边不少朋友，尤其是一些非技术背景、但对游戏开发有浓厚兴趣的朋友，都在问我同一个问题：“听说现在用Claude Code这种AI编程工具，小白也能做游戏了，是真的吗&#…

2026/8/11 0:00:03 阅读更多 →

周新闻

5分钟告别提取码焦虑：baidupankey如何智能破解百度网盘资源锁

5分钟告别提取码焦虑：baidupankey如何智能破解百度网盘资源锁

5分钟告别提取码焦虑：baidupankey如何智能破解百度网盘资源锁 【免费下载链接】baidupankey 在线查询网盘提取码（维护中 rm repo） 项目地址: https://gitcode.com/gh_mirrors/ba/baidupankey 你是否曾经在深夜寻找一份重要资料&#x…

2026/8/11 1:08:05 阅读更多 →
如何快速生成中国车牌图片：Python开源工具完整指南

如何快速生成中国车牌图片：Python开源工具完整指南

如何快速生成中国车牌图片：Python开源工具完整指南 【免费下载链接】chinese_license_plate_generator 中国车牌生成器 项目地址: https://gitcode.com/gh_mirrors/ch/chinese_license_plate_generator 中国车牌生成器是一个基于Python的开源项目&#xff0c…

2026/8/11 1:08:05 阅读更多 →
收藏！小白程序员轻松入门大模型，从Harness工程开始实践

收藏！小白程序员轻松入门大模型，从Harness工程开始实践

文章强调学习大模型不应只关注模型本身，而应重视模型外的系统搭建，即Harness。提出AgentModelHarness的实用公式，详细介绍Harness的四个层次：持久化层、执行层、控制层和观察与验证层。文章还探讨了上下文工程、工具设计、AGENTS.…

2026/8/11 1:08:05 阅读更多 →

月新闻

免费解锁百度网盘SVIP加速：macOS用户必备的下载提速终极指南

免费解锁百度网盘SVIP加速：macOS用户必备的下载提速终极指南

免费解锁百度网盘SVIP加速：macOS用户必备的下载提速终极指南 【免费下载链接】BaiduNetdiskPlugin-macOS For macOS.百度网盘 破解SVIP、下载速度限制~ 项目地址: https://gitcode.com/gh_mirrors/ba/BaiduNetdiskPlugin-macOS 还在为百度网盘macOS版的龟速下…

2026/8/10 17:07:33 阅读更多 →
终极ncmdump指南：3分钟实现网易云NCM音乐解密与格式转换

终极ncmdump指南：3分钟实现网易云NCM音乐解密与格式转换

终极ncmdump指南：3分钟实现网易云NCM音乐解密与格式转换 【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump 还在为网易云音乐下载的NCM格式文件无法在其他播放器播放而烦恼吗？ncmdump解密工具帮你轻松解决这个困…

2026/8/11 1:08:06 阅读更多 →
HarmonyOS 应用开发《掌上英语》第81篇: 智能体卡片：为英语学习 App 打造桌面级学习助手

HarmonyOS 应用开发《掌上英语》第81篇: 智能体卡片：为英语学习 App 打造桌面级学习助手

AgentCard 智能体卡片：为英语学习 App 打造桌面级学习助手适用平台：HarmonyOS 7.0 (API 26 Beta)一、引言 HarmonyOS 7.0（API 26 Beta）新增了 AgentCard 智能体卡片能力，这是继 HMAF（鸿蒙智能体框架&#x…

2026/8/10 17:07:33 阅读更多 →