当前位置: 首页 > news >正文

「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
來源:坚果派
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


相关文章:

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

本篇将带你实现一个简易日历应用&#xff0c;显示当前月份的日期&#xff0c;并支持选择特定日期的功能。用户可以通过点击日期高亮选中&#xff0c;还可以切换上下月份&#xff0c;体验动态界面的交互效果。 关键词 UI互动应用简易日历动态界面状态管理用户交互 一、功能说明…...

Leetcode581. 最短无序连续子数组(HOT100)

链接 我的代码&#xff1a; class Solution { public:int findUnsortedSubarray(vector<int>& nums) {vector<int> res nums;sort(res.begin(),res.end());int l 0,r nums.size()-1;while(nums[l]res[l]){l;if(lnums.size()){return 0;}}while(nums[r]res…...

HTML前端开发-- Flex布局详解及实战

引言 Flex布局&#xff0c;全称为Flexible Box Layout&#xff0c;是一种现代CSS布局技术&#xff0c;它提供了一种更有效的方式来设计响应式布局和复杂页面布局。本文将详细介绍Flex布局的基本概念、属性以及实战应用。 一、基本概念 Flex布局的核心是Flex容器&#xff08;…...

基于JWT跨语言开发分布式业务系统的挑战与实践:多语言协作的最佳方案

在现代分布式架构下&#xff0c;开发团队往往由来自不同技术栈和开发语言的工程师组成。如何有效地管理这些开发人员的协作&#xff0c;尤其是在实现跨语言的认证与授权机制时&#xff0c;成为了开发者面临的一个重大挑战。JSON Web Token&#xff08;JWT&#xff09;作为一种轻…...

二分法篇——于上下边界的扭转压缩间,窥见正解辉映之光(2)

前言 上篇介绍了二分法的相关原理并结合具体题目进行讲解运用&#xff0c;本篇将加大难度&#xff0c;进一步强化对二分法的掌握。 一. 寻找峰值 1.1 题目链接&#xff1a;https://leetcode.cn/problems/find-peak-element/description/ 1.2 题目分析: 题目要求返回数组内…...

什么是 Kata Containers?

什么是 Kata Containers&#xff1f; Kata Containers 是一种结合了容器技术和虚拟机技术的轻量级运行时&#xff0c;旨在提供容器的速度和虚拟机的安全性。它将容器运行在一个隔离的虚拟机中&#xff0c;从而大幅提升安全性&#xff0c;同时保持容器的高效性。 Kata Contain…...

SpringMvc项目配置RabbitMq

前言&#xff1a;只有消费者部分&#xff0c;没有记录生产者部分 结构图 配置类 可以xml配置&#xff0c;也可以配置类&#xff0c;二者可以相互转化。两种bean注入的方式。 import org.springframework.amqp.rabbit.connection.CachingConnectionFactory; import org.spring…...

shell编程(4)脚本与用户交互以及if条件判断

shell编程&#xff08;4&#xff09;脚本与用户交互以及if条件判断 声明&#xff01; 学习视频来自B站up主 ​泷羽sec​​ 有兴趣的师傅可以关注一下&#xff0c;如涉及侵权马上删除文章 笔记只是方便各位师傅的学习和探讨&#xff0c;文章所提到的网站以及内容&#xff0c;…...

vue2组件跨层级数据共享provide 和 inject

在 Vue 2 中&#xff0c;provide 和 inject 的功能也是可以使用的&#xff0c;虽然在 Vue 3 中它们成为了组合式 API 的一部分。在 Vue 2 中&#xff0c;provide 和 inject 主要是用于祖先组件和后代组件之间的数据共享&#xff0c;而不是通过 props 和 emit 逐层传递。 Vue 2…...

springboot/ssm校园闲置物品交易系统ava大学生二手闲置交易平台web二手源码

springboot/ssm校园闲置物品交易系统ava大学生二手闲置交易平台web二手源码 基于springboot(可改ssm)htmlvue项目 开发语言&#xff1a;Java 框架&#xff1a;springboot/可改ssm vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数…...

Redis实现限量优惠券的秒杀

核心&#xff1a;避免超卖问题&#xff0c;保证一人一单 业务逻辑 代码步骤分析 全部代码 Service public class VoucherOrderServiceImpl extends ServiceImpl<VoucherOrderMapper, VoucherOrder> implements IVoucherOrderService {Resourceprivate ISeckillVoucher…...

Linux centOS 7 安装 rabbitMQ

1.安装前需要了解&#xff0c;rabbitmq安装需要先安装erlang&#xff0c;特别注意的是erlang与rabbitmq的版本之间需要匹配。 el/7/rabbitmq-server-3.10.0-1.el7.noarch.rpm - rabbitmq/rabbitmq-server packagecloud 3.10版本的rabbitmq 对于erlang的版本要求可以看此连接…...

活着就好20241202

亲爱的朋友们&#xff0c;大家早上好&#xff01;今天是2024年12月2日&#xff0c;第49周的第一天&#xff0c;也是十二月的第二天&#xff0c;农历甲辰[龙]年十月三十。在这个全新月份的开始、阳光初升的清晨&#xff0c;愿第一缕阳光悄悄探进你的房间&#xff0c;带给你满满的…...

自由学习记录(28)

C# 中的流&#xff08;Stream&#xff09; 流&#xff08;Stream&#xff09;是用于读取和写入数据的抽象基类。 流表示从数据源读取或向数据源写入数据的矢量过程。 C# 中的流类是从 System.IO.Stream 基类派生的&#xff0c;提供了多种具体实现&#xff0c;每种实现都针对…...

操作系统、虚拟化技术与云原生01

操作系统基础 操作系统定义 OS声明了软件怎么调用硬件&#xff0c;同时支持人机交互 人机交互的过程&#xff1a; shell是人机交互转换的虚拟环境&#xff0c;内核只能识别0、1组成的数据流&#xff0c;底层资源只能识别电流的变化 操作系统的组成 1. 进程管理 进程定义&#x…...

linux的挂卸载

挂卸载操作 在 Linux 系统中&#xff0c;挂载&#xff08;mount&#xff09;和卸载&#xff08;umount&#xff09;是管理文件系统和存储设备的核心操作。通过这两个操作&#xff0c;我们可以将设备&#xff08;如硬盘、光盘、U盘等&#xff09;或网络文件系统的内容集成到系统…...

【和春笋一起学C++】OpenCV中数组和指针运用实例

前言&#xff1a;前面学习了数组和指针在C中的处理原理&#xff0c;本文通过自己编写一个图像处理的函数实例来加深对数组和指针的理解。为什么是图像处理呢&#xff0c;因为图像数据是一个二维矩阵&#xff0c;相当于一个二维数组&#xff0c;前面学习了一维数组&#xff0c;现…...

Maya 中创建游戏角色的头发,并将其导出到 Unreal Engine 5

这段视频教程讲解了如何在 Maya 中创建游戏角色的头发&#xff0c;并将其导出到 Unreal Engine 5 中&#xff0c;重点是如何处理头发的物理模拟和材质。 作者 Andrew Giovannini 首先展示了一个已完成的带物理模拟的头发模型&#xff0c;并介绍了他自己的游戏行业背景。然后&a…...

React 路由(React Router):在 React 应用中管理路由

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…...

SAP-CPI组件Transformation介绍之Converter

1.配置CSV to XML Converter Field Description XML Schema 选择Select按钮,选择合适 XSD 文件. 或者可以选择 Upload from File System 系统中查找合适的XML文件....

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

jmeter聚合报告中参数详解

sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample&#xff08;样本数&#xff09; 表示测试中发送的请求数量&#xff0c;即测试执行了多少次请求。 单位&#xff0c;以个或者次数表示。 示例&#xff1a;…...

探索Selenium:自动化测试的神奇钥匙

目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...

Axure 下拉框联动

实现选省、选完省之后选对应省份下的市区...

【大模型】RankRAG:基于大模型的上下文排序与检索增强生成的统一框架

文章目录 A 论文出处B 背景B.1 背景介绍B.2 问题提出B.3 创新点 C 模型结构C.1 指令微调阶段C.2 排名与生成的总和指令微调阶段C.3 RankRAG推理&#xff1a;检索-重排-生成 D 实验设计E 个人总结 A 论文出处 论文题目&#xff1a;RankRAG&#xff1a;Unifying Context Ranking…...