HarmonyOS 应用开发《掌上英语》第78篇:Live View Kit 实况窗：将学习进度“钉“在锁屏上

Live View Kit 实况窗将学习进度钉在锁屏上一、实况窗的概念生活中我们都有这样的场景锁屏想看学了多少单词必须解锁手机、打开 App、等待首页加载、查看进度数字——操作成本太高。HarmonyOS 6.0 的 Live View Kit 实况窗允许 App 在锁屏和通知栏上创建动态信息卡片用户无需解锁就能看到关键信息。实况窗分为三种位置形态锁屏实况窗在锁屏界面底部展示支持交互点击跳转应用。通知栏实况窗下拉通知栏时展示通常信息更详细。灵动岛胶囊在挖孔屏设备的顶部胶囊区域展示紧凑信息。对于英语学习 App最实用的场景是锁屏上显示今日已学 15/30 词用户在通勤路上扫一眼就知道今天的学习进度。如果还有未完成的单词点击实况窗直接跳转到CourseHomePage继续学习。二、Live View 的创建、更新与销毁Live View 的生命周期分为三个阶段创建、更新、销毁。创建当用户开始学习进入CourseHomePage时创建实况窗。import{ liveView }fromkit.LiveViewKit;functioncreateStudyLiveView():void{ liveView.createLiveView(study_progress, {template: liveView.TemplateType.ASSISTANT, data: { title:今日学习, progress:0, target:30, currentWord:, continuousDays:0, }, buttons: [ {text:继续学习, actionType: liveView.ActionType.JUMP }, ], }); }更新当用户学完一个单词后更新实况窗数据。functionupdateStudyProgress(learnedCount:number, target:number):void{ liveView.updateLiveView(study_progress, {progress: learnedCount,target: target,currentWord:apple,// 当前学习的单词}); }销毁当用户完成今日目标或退出学习页面时销毁实况窗。functiondestroyStudyLiveView(): void { liveView.destroyLiveView(study_progress); }实况窗的数据更新频率需要合理控制。建议在以下时机触发更新用户学完一个单词更新进度。用户完成一次答题练习更新正确率。连续学习天数变更更新徽章信息。今日目标完成触发庆祝动画。三、辅助区模板百分比进度环Live View Kit 提供了多种模板类型其中辅助区模板支持在实况窗中嵌入进度环、图标等视觉元素。对于学习进度展示进度环是最直观的方式——一眼就能看出今天完成了多少。liveView.createLiveView(study_progress, { template: liveView.TemplateType.ASSISTANT,//主信息区 mainInfo: { title:今日目标, description:已学 X/30 词, progress:0.5,//50% },//辅助信息区进度环 auxiliaryInfo: { type: liveView.AuxiliaryType.PROGRESS_RING, value:0.5, startColor:#007DFF, endColor:#00E5FF, }, });进度环的参数包括起始颜色、结束颜色和当前值。建议使用蓝色渐变与 App 主色调一致在目标完成时切换为金色或绿色渐变营造完成感和成就感。四、锁屏实况窗今日已学 X/30 词锁屏实况窗是用户最常看到的位置。在锁屏界面实况窗展示在时钟下方用户可以快速获取信息。场景一学习进行中。用户在CourseHomePage背单词时锁屏锁屏实况窗显示今日已学 12/30 词以及当前单词的单词和音标。这实现了碎片化复习——用户锁屏时无意中又看到了一次当前单词相当于一次被动复习。场景二学习暂停中。用户中途退出 App但今日目标尚未完成。锁屏实况窗保持显示进度提醒用户还有未完成的学习任务。这是一种温柔提醒比通知推送更不打扰用户但效果同样显著。场景三目标完成。用户学完 30 词后实况窗切换到完成状态显示今日目标已完成连续学习 7 天并展示一个小徽章图标。成就感驱动用户明天继续学习。function onStudyComplete(plan:LearningPlan): void {liveView.updateLiveView(study_progress, { mainInfo:{title: 今日目标完成,description:连续学习 ${plan.continuousDays} 天,progress:1.0,}, auxiliaryInfo:{type:liveView.AuxiliaryType.PROGRESS_RING,value:1.0,startColor:#00C853,endColor:#69F0AE,}, }); }五、通知栏实况窗连续学习天数 明日目标通知栏实况窗比锁屏实况窗有更大的展示空间可以展示更多信息。在学习场景中建议展示以下内容连续学习天数以徽章或数字形式突出显示。明日目标基于 LearningPlanManager 的数据显示明日推荐学习量。进步曲线近 7 天的学习时长 / 单词数趋势。通知栏实况窗的优势在于用户可以主动下拉查看信息密度可以更高。例如──────────────── 英语学习 | 连续7天 今日15/30词 | 正确率85%明日目标25词同阶段词汇 [继续学习] [查看报告] ────────────────liveView.updateLiveView(study_progress, { template:liveView.TemplateType.NOTIFICATION,data:{title:连续学习 7 天 ,description:今日${todayCount}/${target} 词,subDescription:明日目标${tomorrowTarget} 词,stats:{correctRate:85%,totalWords:plan.totalWordCount,totalDays:plan.continuousDays,}, }, });六、基于 StatisticsManager 的数据推送实况窗的数据来源是项目中已有的数据管理层。通过StatisticsManager获取答题统计通过LearningPlanManager获取学习计划和今日进度。functionrefreshLiveViewData(): void {constplan LearningPlanManager.getInstance().getLearningPlan();conststats StatisticsManager.getInstance().getHistoryStatistics(); liveView.updateLiveView(study_progress, { progress: plan.todayWordCount, target: plan.dailyWordGoal, continuousDays: plan.continuousDays, correctRate: stats.correctRate, }); }建议在LearningPlanManager.recordWordStudy()方法中自动触发实况窗更新。这样每当用户学完一个单词实况窗的数据自动刷新无需在 UI 层手动调用。七、实践建议学习开始创建学习结束销毁实况窗虽然强大但不宜长期驻留。推荐的生命周期管理策略创建时机用户进入CourseHomePage开始学习或完成一次答题练习时创建。更新时机每次recordWordStudy()调用后更新。销毁时机用户完成当日所有目标或主动点击结束学习时销毁。闲置超时用户超过 30 分钟没有学习操作自动销毁实况窗。这种策略确保实况窗只在用户真正在学习时显示避免被用户视为广告位。实况窗的核心价值是方便而非打扰。八、总结Live View Kit 实况窗将学习进度从 App 内部延伸到锁屏界面创造了一个无需解锁就知道进度、扫一眼就能被提醒的学习闭环。基于StatisticsManager和LearningPlanManager的数据驱动结合进度环模板和分段生命周期管理实况窗成功地将英语学习的信息触达率提升到了一个新的高度。