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的數據驅動結合進度環模板和分段生命周期管理實況窗成功地將英語學習的信息觸達率提升到了一個新的高度。