「Mac畅玩鸿蒙与硬件35」UI互动应用篇12 - 简易日历

本篇将带你实现一个简易日历应用,显示当前月份的日期,并支持选择特定日期的功能。用户可以通过点击日期高亮选中,还可以切换上下月份,体验动态界面的交互效果。

在这里插入图片描述


关键词
  • UI互动应用
  • 简易日历
  • 动态界面
  • 状态管理
  • 用户交互

一、功能说明

简易日历应用提供了以下功能:

  1. 查看当前月份的日期。
  2. 点击某一天后高亮显示选中的日期。
  3. 支持切换到上一个或下一个月份。

用户通过动态界面交互,实时查看和选择日期,提升应用的互动体验。


二、所需组件
  • @Entry@Component 装饰器
  • ColumnRow 布局组件,用于页面和网格布局
  • Button 组件,用于切换月份和选择日期
  • Text 组件,用于显示标题和选中的日期
  • @State 修饰符,用于管理界面动态更新的状态

三、项目结构
  • 项目名称SimpleCalendarApp
  • 自定义组件名称SimpleCalendarPage
  • 代码文件
    • SimpleCalendarPage.ets:实现核心逻辑。
    • Index.ets:作为应用入口调用主页面组件。

四、代码实现
// 文件名:SimpleCalendarPage.ets@Component
export struct SimpleCalendarPage {@State currentDate: Date = new Date(); // 当前日期@State selectedDate: Date | null = null; // 选中的日期build() {Column({ space: 20 }) {// 显示当前年份和月份Row({ space: 10 }) {Button('上一个月').onClick(() => this.changeMonth(-1));Text(`${this.currentDate.getFullYear()}${this.currentDate.getMonth() + 1}`).fontSize(24).fontWeight(FontWeight.Bold).alignSelf(ItemAlign.Center);Button('下一个月').onClick(() => this.changeMonth(1));}.justifyContent(FlexAlign.SpaceBetween);// 显示星期标题Row({ space: 5 }) {ForEach(['日', '一', '二', '三', '四', '五', '六'], (day: string) => {Text(day).fontSize(18).fontWeight(FontWeight.Bold).width('12%').textAlign(TextAlign.Center);});}// 显示日期Column({ space: 5 }) {ForEach(this.getDatesInMonth(), (week: (Date | null)[]) => {Row({ space: 10 }) {ForEach(week, (date: Date | null) => {if (date) {Button(date.getDate().toString()).backgroundColor(this.selectedDate && this.isSameDay(this.selectedDate, date)? Color.Blue: Color.Gray).fontColor(Color.White).onClick(() => this.selectedDate = date).width('12%').height('50px');} else {Text(' ')// 空白占位.width('12%').height('50px');}});}.justifyContent(FlexAlign.SpaceBetween);});}// 显示选中日期if (this.selectedDate) {Text(`选中的日期:${this.selectedDate.toLocaleDateString()}`).fontSize(20).alignSelf(ItemAlign.Center);}}.padding(20).width('100%').height('100%').alignItems(HorizontalAlign.Center);}// 获取当月的所有日期,按星期分组private getDatesInMonth(): (Date | null)[][] {const year = this.currentDate.getFullYear();const month = this.currentDate.getMonth();const firstDay = new Date(year, month, 1).getDay();const lastDay = new Date(year, month + 1, 0).getDate();const weeks: (Date | null)[][] = [];let currentWeek: (Date | null)[] = Array(firstDay).fill(null);for (let day = 1; day <= lastDay; day++) {currentWeek.push(new Date(year, month, day));if (currentWeek.length === 7) {weeks.push(currentWeek);currentWeek = [];}}if (currentWeek.length > 0) {while (currentWeek.length < 7) {currentWeek.push(null);}weeks.push(currentWeek);}return weeks;}// 判断两个日期是否为同一天private isSameDay(date1: Date, date2: Date): boolean {return (date1.getFullYear() === date2.getFullYear() &&date1.getMonth() === date2.getMonth() &&date1.getDate() === date2.getDate());}// 切换月份private changeMonth(offset: number) {const newDate = new Date(this.currentDate);newDate.setMonth(this.currentDate.getMonth() + offset);this.currentDate = newDate;this.selectedDate = null; // 切换月份时清除选中状态}
}
// 文件名:Index.etsimport { SimpleCalendarPage } from './SimpleCalendarPage';@Entry
@Component
struct Index {build() {Column() {SimpleCalendarPage() // 调用简易日历页面}.padding(20)}
}

效果示例:用户可以通过按钮切换月份,并点击某一天高亮选中。界面实时更新,选中的日期显示在屏幕下方。

在这里插入图片描述


五、代码解读
  • 状态管理@State currentDate@State selectedDate 用于保存当前显示的月份和选中的日期。
  • 动态生成日期按钮:通过 getDatesInMonth 方法动态生成当月的所有日期,使用 ForEach 渲染按钮。
  • 日期高亮显示:通过 isSameDay 方法判断是否选中某一天,并更新按钮的背景色。
  • 月份切换逻辑:通过 changeMonth 方法更新 currentDate 并重新计算日期。

六、优化建议
  1. 添加工作日和周末标记:用不同颜色标记工作日和周末,增加视觉提示。
  2. 支持跳转到指定日期:提供输入框或日期选择器,快速跳转到特定月份。
  3. 扩展交互功能:例如显示当月的节假日信息或增加任务记录功能。

七、相关知识点
  • 「Mac畅玩鸿蒙与硬件11」鸿蒙 UI 组件篇1 - Text 和 Button 组件详解
  • 「Mac畅玩鸿蒙与硬件33」UI互动应用篇10 - 数字猜谜游戏

小结

本篇通过动态生成日历网格,展示了如何结合状态管理和用户交互实现简易日历功能。用户可通过按钮切换月份,并高亮选中日期,体验鸿蒙系统的开发便捷性。


下一篇预告

在下一篇「UI互动应用篇13 - 数字滚动抽奖器」中,我们将探索如何设计一个富有趣味的抽奖应用。你将学习如何实现数字滚动效果,打造一个动态变化的抽奖界面,增加用户交互的趣味性与吸引力。


上一篇: 「Mac畅玩鸿蒙与硬件34」UI互动应用篇11 - 颜色选择器
下一篇: 「Mac畅玩鸿蒙与硬件36」UI互动应用篇13 - 数字滚动抽奖器

作者:SoraLuna
链接:https://www.nutpi.net/thread?topicId=312
來源:坚果派
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/62882.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【AI系统】推理系统介绍

推理系统介绍 推理系统是一个专门用于部署神经网络模型&#xff0c;执行推理预测任务的 AI 系统。它类似于传统的 Web 服务或移动端应用系统&#xff0c;但专注于 AI 模型的部署与运行。通过推理系统&#xff0c;可以将神经网络模型部署到云端或者边缘端&#xff0c;并服务和处…

Docker 之 bootfs 和 rootfs概述

概述 在 Docker 技术中&#xff0c;理解 bootfs&#xff08;boot file system&#xff09;和 rootfs&#xff08;root file system&#xff09;的概念对于深入掌握容器技术至关重要。这两个文件系统是 Docker 镜像和容器运行的基础。 bootfs&#xff08;Boot File System&am…

困扰解决:mfc140u.dll丢失的解决方法,多种有效解决方法全解析

当电脑提示“mfc140u.dll丢失”时&#xff0c;这可能会导致某些程序无法正常运行&#xff0c;给用户带来不便。不过&#xff0c;有多种方法可以尝试解决这个问题。这篇文章将以“mfc140u.dll丢失的解决方法”为主题&#xff0c;教大家有效解决mfc140u.dll丢失。 判断是否是“mf…

M4V 视频是一种什么格式?如何把 M4V 转为 MP4 格式?

M4V 是一种视频文件格式&#xff0c;主要由苹果公司用于其产品和服务中&#xff0c;如 iTunes Store 上的电影和电视节目。这种格式可以包含受版权保护的内容&#xff0c;并且通常与苹果的 DRM&#xff08;数字版权管理&#xff09;技术结合使用&#xff0c;以限制内容的复制和…

VS打开UI文件失败

选择一个UI文件&#xff0c;右键打开方式&#xff0c;要自己添加路径 然后选择自己的QT Creator路径 可以参考我的去找一下&#xff1a;"C:\Qt\Qt5.14.2\Tools\QtCreator\bin\qtcreator.exe"

网络编程(UDP\TCP回显服务器)

目录 套接字socket TCP和UDP特点比较 特点 比较 UDP回显服务器/客户端的编写 UDP的socket api 回显服务器 客户端 TCP回显服务器/客户端的编写 TCP的socket api 回显服务器 客户端 优化服务器 1.关闭服务器创建的socket对象 2.引入线程池&#xff0c;为多个客户…

(长期更新)《零基础入门 ArcGIS(ArcMap) 》实验三----学校选址与路径规划(超超超详细!!!)

目录 实验三 学校选址与道路规划 3.1 实验内容及目的 3.1.1 实验内容 3.1.2 实验目的 3.2 实验方案 3.3 操作流程 3.3.1 环境设置 3.3.2 地势分析 &#xff08;1&#xff09;提取坡度: (2)重分类: 3.3.3 学校点分析 (1)欧氏距离: (2)重分类: 3.3.4 娱乐场所点分析 (1)欧氏距离…

【Delphi】modbus-TCP 协议库

在日常开发中&#xff0c;也会遇到使用modbus的部件&#xff0c;比如温度控制器、读卡器等等&#xff0c;那么使用Delphi开发&#xff0c;也就必须遵守modbus-TCP协议&#xff0c;如果自己使用TCP控件写也没有问题&#xff0c;不过如果有开源的三方库&#xff0c;别人已经调试过…

计算机网络-网络安全

网络安全介绍 端口扫描 安全包括那些方面&#xff1a; 数据存储安全、应用程序安全、操作系统安全、网络安全、物理安全、用户安全教育 一、网络安全问题概述 1. 计算机网络面临的安全性威胁 计算机网络上的通信面临以下的四种威胁&#xff1a; 截获——从网络上窃听他人…

GEE Download Data——气温数据的下载

GEE数据下载第二弹!今天我们来分享气温数据的下载。 一、数据介绍 气温数据我们要用到的是MODIS数据产品,MOD11A2 V6.1 产品提供 1200 x 1200 公里网格内 8 天平均陆地表面温度 (LST)。 MOD11A2 中的每个像素值都是该 8 天内收集的所有相应 MOD11A1 LST 像素的简单平均值。…

【第 1 章 初识 C 语言】1.8 使用 C 语言的 7 个步骤

目录 1.8 使用 C 语言的 7 个步骤 1.8.1 第 1 步&#xff1a;定义程序的目标 1.8.2 第 2 步&#xff1a;设计程序 1.8.3 第 3 步&#xff1a;编写代码 1.8.4 第 4 步&#xff1a;编译 1.8.5 第 5 步&#xff1a;运行程序 1.8.6 第 6 步&#xff1a;测试和调试程序 1.8.…

docker部署RustDesk自建服务器

客户端&#xff1a; Releases rustdesk/rustdesk GitHub 服务端&#xff1a; 项目官方地址&#xff1a;GitHub - rustdesk/rustdesk-server: RustDesk Server Program 1、拉取RustDesk库 docker pull rustdesk/rustdesk-server:latest 阿里云库&#xff1a; docker pu…

通义灵码走进北京大学创新课堂丨阿里云云原生 10 月产品月报

云原生月度动态 云原生是企业数字创新的最短路径。 《阿里云云原生每月动态》&#xff0c;从趋势热点、产品新功能、服务客户、开源与开发者动态等方面&#xff0c;为企业提供数字化的路径与指南。 趋势热点 &#x1f947; 通义灵码走进北京大学创新课堂&#xff0c;与 400…

Java基础面向对象(String类)

String 特点 是内存中常量, 值在内存中一旦创建, 不可改 更改String类型引用的值本质上是将引用指向了一个新的字符串地址 String s1 "abc";String s2 s1;//引用s1的地址赋值给了s2 ​s2 "edf";//让s2指向新字符串 ​System.out.println("s1: &q…

【C++】深入优化计算题目分析与实现

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 &#x1f4af;前言&#x1f4af;第一题&#xff1a;圆的计算我的代码实现代码分析改进建议改进代码 老师的代码实现代码分析可以改进的地方改进代码 &#x1f4af;第二题&#xff1a;对齐输出我的代码实现…

6.824/6.5840 Lab 3: Raft——Part 3B3C

芙蓉花又栖满了枝头 奈何蝶难留 漂泊如江水向东流 望断门前隔岸的杨柳 寂寞仍不休 我无言让眼泪长流 ——山外小楼夜听雨 完整代码见&#xff1a; https://github.com/SnowLegend-star/6.824 在完成Lab之前&#xff0c;务必把论文多读几遍&#xff0c;力求完全理解Leader选举、…

LeetCode - #150 逆波兰表达式求值

文章目录 前言1. 描述2. 示例3. 答案关于我们 前言 我们社区陆续会将顾毅&#xff08;Netflix 增长黑客&#xff0c;《iOS 面试之道》作者&#xff0c;ACE 职业健身教练。&#xff09;的 Swift 算法题题解整理为文字版以方便大家学习与阅读。 LeetCode 算法到目前我们已经更新…

【C++】continue语句、goto语句

1、continue 语句 作用&#xff1a;在循环语句中&#xff0c;跳过本次循环中余下尚未执行的语句。继续下一次循环。 注意&#xff1a;continue只能用于循环中。 示例&#xff1a; 代码&#xff1a; //continue的用法 #include<iostream> using namespace std; int ma…

最长最短单词

最长最短单词 C语言实现C实现Java实现Python实现 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 输入1行句子&#xff08;不多于200个单词&#xff0c;每个单词长度不超过100&#xff09;&#xff0c;只包含字母、空格和逗号。单词由至少一…

ESP32项目 --- 智能门锁(WiFi 蓝牙 OTA)

1 项目简介 1.1 项目概述 本项目是实现一款智能门锁中的智能控制部分, 可以应用在家庭, 办公室等任何使用门锁的场所. 本项目实现了以下主要功能: &#xff08;1&#xff09;通过按键配置密码 &#xff08;2&#xff09;通过按键输入密码开锁 &#xff08;3&#xff09;录…