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

这次，我决定挑战一个全新的模块——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();