当前位置：首页 > article >正文

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

article 2024/11/29 13:32:51

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

在这里插入图片描述

关键词

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

一、功能说明

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

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

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

二、所需组件

@Entry 和 @Component 装饰器
Column 和 Row 布局组件，用于页面和网格布局
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.ets

import { SimpleCalendarPage } from './SimpleCalendarPage';

@Entry
@Component
struct Index {
  build() {
    Column() {
      SimpleCalendarPage() // 调用简易日历页面
    }
    .padding(20)
  }
}