多端harmony卡片应用开发 - 日历卡片的实现

在本篇博客中，我们将展示如何使用 Harmony OS 开发一个日历卡片，能够将公历日期转换为农历日期，并展示干支纪年和生肖信息。除了提供实用的日期功能外，我们还会对卡片的前端样式进行定制，使其更加现代、简洁和美观。通过使用Harmony OS的UI框架，我们可以高效实现日期转换和数据展示，为用户提供丰富的文化信息和优质的视觉体验。

Damon小智

7816人浏览 · 2024-06-25 20:23:30

Damon小智 · 2024-06-25 20:23:30 发布

一、项目功能概述

本项目的主要功能是将公历日期转换为农历日期，同时展示干支纪年和生肖信息。我们还将通过前端卡片的方式来展示这些信息，帮助用户更加便捷地查看公历和农历的相关数据。

公历转换农历：根据公历日期计算对应的农历日期。
干支纪年与生肖：根据年份获取干支纪年和生肖。
UI展示：通过卡片形式展示公历与农历日期，并配合现代化的界面风格。

二、鸿蒙卡片的原理和介绍

在Harmony OS中，卡片（Card）是一种常用的UI元素，用于展示信息的集合。它可以是静态的，也可以根据需求进行动态更新。在本项目中，日历卡片的功能正是通过这种组件实现的。

1. 卡片的设计理念

鸿蒙卡片的设计理念强调简洁、直观和功能性。在卡片中，信息通过不同的模块清晰展示，例如日期、干支纪年、生肖等。每个卡片组件都可以独立更新，与其它组件解耦，因此非常适合用来展示时间、天气等实时变化的内容。

在这里插入图片描述

通过使用鸿蒙的卡片组件，我们能够轻松创建漂亮且功能强大的UI界面。此外，卡片组件支持响应式设计，使得它在不同设备上都能够良好展示。

在这里插入图片描述

服务卡片有三个特征：易用可见、智能可选和多端可变。

易用可见：凸显服务信息的内容外露，减少层级跳转。
智能可选：全天可变的数据信息，支持自定义类型的服务卡片设计。
多端可变：适配多端设备的自适应属性。

2. 卡片组件的使用

在开发过程中，理解服务卡片的整体框架至关重要。
服务卡片主要由三个部分组成：卡片使用方、卡片管理服务和卡片提供方。

卡片使用方：这是显示卡片内容的宿主应用，它负责控制卡片在宿主中的展示位置，比如桌面、服务中心、搜索等。卡片使用方与用户的交互密切相关。
卡片管理服务：这是用于管理系统中所有添加的卡片的常驻代理服务，负责管理卡片对象、卡片的生命周期以及卡片的周期性刷新等操作。它确保卡片的正常展示和更新。
卡片提供方：这是提供卡片显示内容的HarmonyOS应用或原子化服务。它负责控制卡片的显示内容、控件布局及控件的点击事件，确保卡片展示信息的准确性与交互的流畅性。

卡片组件架构

接下来，我们详细介绍服务卡片的生命周期及其回调函数。

生命周期阶段	回调函数	说明
卡片创建	`onCreate()`	在卡片被创建时调用，通常用于初始化卡片数据和设置初始界面。
卡片激活	`onActive()`	当卡片显示在屏幕上时调用，通常用于加载数据、开始动画或启用交互功能。
卡片更新	`onUpdate()`	当卡片需要更新时调用，通常用于刷新卡片显示的数据或界面。
卡片隐藏	`onInactive()`	当卡片被隐藏或移出屏幕时调用，通常用于暂停或释放卡片上的资源。
卡片销毁	`onDestroy()`	在卡片销毁之前调用，通常用于释放资源、停止活动或保存卡片状态。
卡片恢复	`onRestore()`	当卡片从后台恢复或重新展示时调用，通常用于恢复卡片状态或重新加载数据。
卡片数据接收	`onReceive()`	在接收到数据时调用，通常用于根据新数据更新卡片内容。
卡片交互事件	`onClick()`	在用户点击卡片时调用，通常用于响应点击事件并触发相关操作或页面跳转。

这些回调函数在服务卡片的不同生命周期阶段发挥着重要作用，帮助开发者控制卡片的显示、更新和销毁，保证卡片功能的稳定和流畅。在实际开发中，合理运用这些回调函数，可以优化卡片的性能和用户体验。

鸿蒙的卡片组件可以通过@Resource、@State等方式来管理数据状态和资源。例如，可以在卡片中展示农历日期信息，并通过定时器或外部事件更新卡片内容。卡片的高度、宽度等属性可以通过样式灵活控制，确保其在不同屏幕尺寸上的适配。

三、核心代码实现

1. `Lunar.ets` - 公历转换农历

下面是主要的农历转换代码，通过公历日期获取农历日期及相关信息。代码中已增加详细注释，帮助理解每个步骤。

// 将公历日期转换为农历日期的函数
solarToLunar(solar: Date): any {
    let year = solar.getFullYear();  // 获取公历年份
    let offset = year - 1900;  // 计算年份的偏移量（1900年为基准）

    // 检查年份是否在有效范围内
    if (offset < 0 || offset >= MAPPING.length) {
        throw new Error('Specified date range is invalid.');  // 抛出错误
    }
    
    // 查找对应农历数据
    let data = this.findLunar(solar, offset, 0, 13, false);

    // 如果没有找到数据，查找前一年的数据
    data = data || this.findLunar(solar, offset - 1, 12, 99, true);

    // 如果还是没有找到，表示日期超出范围，返回false
    if (!data) return false;

    // 计算农历的日期
    let firstDay = new Date(data.year, data.month - 1, data.day);
    let day = this.solarDiff(solar, firstDay, "d") + 1;  // 计算与农历第一天的天数差
    let month = data.leapMonth > 0 && data.lunarMonth > data.leapMonth ? data.lunarMonth - 1 : data.lunarMonth;
    let leap = data.leapMonth > 0 && data.leapMonth + 1 == data.lunarMonth;  // 判断是否为闰月

    // 返回农历信息
    let result = {
        leap: leap,
        year: data.lunarYear,  // 农历年份
        month: month,  // 农历月份
        day: day  // 农历日期
    };
    
    return result;  // 返回农历数据
}

2. 干支纪年和生肖的计算

// 获取干支纪年和生肖
getChineseZodiac(year: number): { zodiac: string, ganZhi: string } {
    const zodiacs = ['鼠', '牛', '虎', '兔', '龙', '蛇', '马', '羊', '猴', '鸡', '狗', '猪'];
    const gan = ['甲', '乙', '丙', '丁', '戊', '己', '庚', '辛', '壬', '癸'];
    const zhi = ['子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申', '酉', '戌', '亥'];

    // 根据年份计算生肖
    const zodiac = zodiacs[(year - 4) % 12];
    // 根据年份计算干支纪年
    const ganZhi = gan[(year - 4) % 10] + zhi[(year - 4) % 12];

    return {
        zodiac: zodiac,  // 返回生肖
        ganZhi: ganZhi  // 返回干支纪年
    };
}

四、UI展示与样式

在前端展示方面，我们可以使用 Harmony OS 提供的灵活UI框架来展示日历卡片。以下是简单的样式示例：

1. 卡片样式设计

<entry>
    <text class="title">农历日期</text>
    <text class="solar-date">公历：2023-12-05</text>
    <text class="lunar-date">农历：十月廿三</text>
    <text class="gan-zhi">干支：癸卯年</text>
    <text class="zodiac">生肖：兔</text>
</entry>

2. 样式文件 `calendar_style.css`

.entry {
    padding: 16px;
    background-color: #f4f6f9;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

.solar-date, .lunar-date, .gan-zhi, .zodiac {
    font-size: 16px;
    margin-top: 5px;
}