在 HarmonyOS（鸿蒙） 中，动态卡片（Dynamic Card） 是一种用户界面元素，用于在设备屏幕上展示信息。动态卡片可以根据不同的场景和需求自动更新其内容，通常用于展示实时信息，如天气预报、新闻、通知等。

动态卡片不仅支持静态显示，还能根据应用的数据变化实时更新。它可以帮助开发者创建更具互动性和信息更新性的用户界面，提升用户体验。

✅ 一、动态卡片概述

动态卡片是 HarmonyOS 提供的一种灵活的视图组件，它与静态卡片的不同之处在于，它支持实时更新和交互。开发者可以为卡片配置不同的更新周期和显示内容，以适应不同的使用场景。

动态卡片通常用于以下场景：

  • 显示实时数据（如天气、股票、消息等）
  • 展示系统通知或更新
  • 提供可交互的功能（如点击卡片获取更多信息）

✅ 二、动态卡片的基本使用

在 HarmonyOS 中，创建和使用动态卡片通常涉及以下几个步骤：

  1. 定义卡片模板：指定卡片的基本布局和样式。
  2. 定义动态更新逻辑：通过数据变化更新卡片的内容。
  3. 在桌面或锁屏上显示卡片：将动态卡片显示到桌面、锁屏或应用的卡片视图中。

2.1 定义卡片模板

动态卡片的模板定义了卡片的基本布局和样式。在 HarmonyOS 中，卡片模板通常由 XML 文件 或 JSON 文件 描述，定义了卡片的结构、样式、内容等元素。

例如，创建一个简单的天气动态卡片模板：

<card>
    <content>
        <text id="city" font-size="20" color="#000000" />
        <image id="weatherIcon" />
        <text id="temperature" font-size="24" color="#FF5722" />
    </content>
</card>
  • <card>：定义卡片的根元素。
  • <content>：卡片的内容部分，包含不同的 UI 元素（如文本、图片等）。
  • <text>：用于显示文本内容，可以设置字体大小和颜色。
  • <image>：用于显示图片（如天气图标）。

2.2 定义动态更新逻辑

动态卡片的核心在于它的动态更新功能。开发者可以通过更新卡片的内容来反映实时变化的数据。通常，动态卡片的更新是基于数据变化触发的。

import card from '@ohos.bundle.card';

// 更新卡片内容
async function updateCardData(cardId, data) {
    try {
        const cardData = {
            city: data.city,
            weatherIcon: data.weatherIcon,
            temperature: data.temperature
        };
        
        // 更新卡片的内容
        await card.update(cardId, cardData);
    } catch (error) {
        console.error('更新卡片内容失败:', error);
    }
}
  • card.update(cardId, cardData)：用于更新卡片内容。cardId 是卡片的唯一标识符，cardData 包含需要更新的数据。

2.3 在桌面或锁屏上显示卡片

动态卡片可以在 桌面 或 锁屏 上显示，提供实时信息或快捷操作。通过 CardService，你可以注册卡片，并设置卡片的显示方式。

import cardService from '@ohos.bundle.cardService';

// 创建并显示卡片
async function showCard(cardTemplate) {
    try {
        // 注册卡片服务
        await cardService.addCard(cardTemplate);
        
        // 显示卡片
        console.log('卡片已显示');
    } catch (error) {
        console.error('显示卡片失败:', error);
    }
}
  • cardService.addCard(cardTemplate)：将卡片添加到桌面或锁屏中进行显示。
  • cardTemplate 是之前定义的卡片模板。

2.4 设置动态更新周期

在一些应用场景中，可能需要定期更新卡片内容，比如天气应用需要每小时更新一次天气预报。你可以通过定时任务或定时器来定期更新卡片。

import timer from '@ohos.timer';

// 定时更新卡片
function scheduleCardUpdate() {
    const updateInterval = 3600000;  // 每小时更新一次

    timer.setInterval(() => {
        // 获取新数据并更新卡片
        const newData = fetchWeatherData();  // 假设这是一个获取新数据的函数
        updateCardData('weatherCard', newData);
    }, updateInterval);
}
  • timer.setInterval()：设置定时任务，用于定期执行卡片更新操作。

✅ 三、动态卡片的交互功能

动态卡片不仅可以展示信息，还可以实现交互功能。例如，用户点击卡片时，可以打开一个新的界面或执行某个操作。通过在卡片模板中定义交互行为，你可以让用户与卡片进行互动。

3.1 设置点击事件

你可以为卡片的某些区域设置点击事件，以便用户点击后触发相应的操作。例如，点击天气卡片可以跳转到详细的天气页面。

import { Button } from '@ohos.ui.widget';

async function onCardClick() {
    // 用户点击卡片后执行的操作，例如跳转到详细页面
    console.log('卡片被点击');
    openWeatherDetailsPage();
}

// 在卡片模板中绑定点击事件
&lt;Button onClick={onCardClick}>查看详情&lt;/Button>
  • onClick：为按钮或卡片区域绑定点击事件，点击后可以执行预定的操作。

3.2 卡片更新与状态保持

当用户交互时，有时需要保持卡片的状态（例如，显示某种提示信息、动态变化的内容等）。你可以根据用户的操作来更新卡片的内容，或为卡片添加状态标记。

async function updateCardState(state) {
    const stateData = {
        text: state ? '加载完成' : '加载中...',
        icon: state ? 'success_icon' : 'loading_icon'
    };

    // 更新卡片状态
    await card.update('weatherCard', stateData);
}
  • card.update()：更新卡片的状态或内容，实时反映用户操作的结果。

✅ 四、动态卡片的应用场景

动态卡片可以应用于各种场景，尤其是当需要展示实时数据或提供快捷操作时。以下是一些典型的应用场景：

场景描述
天气预报显示当前天气状况、气温、风速等信息，实时更新。
新闻推送显示最新的新闻标题、简短描述和图片，用户点击查看详情。
消息通知显示新收到的消息或通知内容，支持快速查看或跳转。
社交媒体更新显示社交媒体平台的动态，用户可点击查看详细内容。
系统状态监控显示设备状态、系统性能信息（如 CPU、内存等）。

✅ 五、总结

功能描述
定义卡片模板使用 XML 或 JSON 文件定义卡片的布局和样式。
动态内容更新使用 API 更新卡片的内容，反映实时变化的数据。
交互功能设置点击事件和交互行为，提升用户体验。
定时更新设置定时器定期更新卡片内容，展示实时信息。
在桌面/锁屏上显示卡片将卡片添加到桌面或锁屏，提供快速信息查看和操作。

通过动态卡片，开发者可以轻松实现实时更新的内容展示，同时也能增强用户与应用的交互体验。动态卡片不仅能让应用的界面更加生动，还能提供重要的功能和信息提示，提升用户的整体体验。