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

自学记录：鸿蒙5使用ArkTS和ArkUI实现Live View功能

article 2025/1/4 2:51:37

这次，我决定挑战一个全新的模块——Live View Kit，它提供了实况窗的创建、更新和管理功能。作为API 13的全新特性，我想用它开发一个智能餐厅的点餐和取餐提醒功能。

这篇文章不仅是我的学习记录，也是我探索HarmonyOS Next API 13的实践总结，伴随着思考与代码分享。

学习起点：什么是Live View Kit？

Live View Kit是HarmonyOS中一个用于展示实时动态信息的模块，它支持各种应用场景，比如物流跟踪、航班信息更新、取餐提醒等。它通过实况窗（Live View）的形式展示信息，分为卡片形态和胶囊形态。

根据官方文档，Live View Kit具备以下核心能力：

创建实况窗（如取餐通知）。
更新实况窗内容（如实时更新物流状态）。
结束实况窗。
查询实况窗状态。

这一切听起来很棒，但作为开发者，我知道技术文档和实际开发之间，总会有些需要摸索的部分。

搭建开发环境

工具准备

如果你是真的从零开始，那么你需要先准备下面的内容：

安装DevEco Studio（最新版支持HarmonyOS API 13）。
阅读官方的ArkTS基础教程。

不过你不会ArkTS，那么我建议你先学一下，因为这个并不难，我也可以简单的介绍一下。ArkTS（Ark TypeScript）是华为生态的全新语言，其语法和TypeScript非常相似，同时支持声明式编程。ArkUI则是基于ArkTS的UI框架，采用组件化和声明式开发。

实战开始：开发一个取餐提醒应用

功能设计

我的目标是开发一个智能餐厅的取餐提醒功能，包含以下特点：

创建实况窗：当餐品准备好时，显示取餐码和窗口号。
更新实况窗：实时更新剩余等待时间。
结束实况窗：用户完成取餐后关闭提醒。

项目初始化

在DevEco Studio中创建Stage模型应用后，我引入了以下模块：

import { liveViewManager } from '@kit.LiveViewKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { BusinessError } from '@kit.BasicServicesKit';

1. 检查实况窗功能是否开启

首先，我需要确保设备支持并启用了Live View功能。以下是代码实现：

async function checkLiveViewEnabled() {
  try {
    const isEnabled = await liveViewManager.isLiveViewEnabled();
    hilog.info(0x0000, 'LiveViewCheck', `LiveView is enabled: ${isEnabled}`);
    if (!isEnabled) {
      console.error('Live View is not enabled on this device.');
    }
  } catch (err) {
    let error: BusinessError = err as BusinessError;
    hilog.error(0x0000, 'LiveViewCheck', `Error checking LiveView: ${error.message}`);
  }
}

checkLiveViewEnabled();

我的思考：这一步虽然简单，但它是项目启动的关键。设备支持和功能启用是Live View能否正常运行的基础。

2. 创建实况窗

接下来，我实现了创建实况窗的功能。当餐品准备好时，实况窗会显示取餐码和窗口号。

async function startLiveView() {
  try {
    const liveView = {
      id: 101,
      event: 'PICK_UP',
      sequence: 1,
      isMute: false,
      liveViewData: {
        primary: {
          title: '餐品已备好',
          content: [
            { text: '请前往' },
            { text: '一号窗口', textColor: '#FF0000' }
          ],
          keepTime: 3600,
          layoutData: {
            layoutType: liveViewManager.LayoutType.LAYOUT_TYPE_PICKUP,
            title: '取餐码',
            content: 'A12345',
            underlineColor: '#0000FF'
          }
        },
        capsule: {
          type: liveViewManager.CapsuleType.CAPSULE_TYPE_TEXT,
          status: 1,
          title: '待取餐',
          content: '取餐码：A12345',
          backgroundColor: '#308977'
        }
      }
    };

    const result = await liveViewManager.startLiveView(liveView);
    hilog.info(0x0000, 'LiveViewStart', `LiveView started successfully: ${JSON.stringify(result)}`);
  } catch (err) {
    let error: BusinessError = err as BusinessError;
    hilog.error(0x0000, 'LiveViewStart', `Failed to start LiveView: ${error.message}`);
  }
}

startLiveView();

我的思考：Live View的UI布局是通过layoutType控制的。API提供了多种布局类型，如LAYOUT_TYPE_PICKUP、LAYOUT_TYPE_PROGRESS等。在这个场景中，我选择了取餐专用的LAYOUT_TYPE_PICKUP。

3. 更新实况窗

如果用户需要实时更新取餐等待时间，可以调用以下代码：

async function updateLiveView(sequence: number, remainingTime: string) {
  try {
    const liveView = {
      id: 101,
      event: 'PICK_UP',
      sequence: sequence,
      liveViewData: {
        primary: {
          content: [
            { text: `预计等待时间：${remainingTime}` }
          ]
        }
      }
    };

    const result = await liveViewManager.updateLiveView(liveView);
    hilog.info(0x0000, 'LiveViewUpdate', `LiveView updated successfully: ${JSON.stringify(result)}`);
  } catch (err) {
    let error: BusinessError = err as BusinessError;
    hilog.error(0x0000, 'LiveViewUpdate', `Failed to update LiveView: ${error.message}`);
  }
}

// Example usage
updateLiveView(2, '5分钟');

4. 结束实况窗

用户完成取餐后，可以调用以下代码关闭实况窗：

async function stopLiveView() {
  try {
    const liveView = {
      id: 101,
      event: 'PICK_UP'
    };

    const result = await liveViewManager.stopLiveView(liveView);
    hilog.info(0x0000, 'LiveViewStop', `LiveView stopped successfully: ${JSON.stringify(result)}`);
  } catch (err) {
    let error: BusinessError = err as BusinessError;
    hilog.error(0x0000, 'LiveViewStop', `Failed to stop LiveView: ${error.message}`);
  }
}

stopLiveView();