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

鸿蒙实况窗 (Live View) 实战：仿 iOS“灵动岛”效果，实时显示外卖/打车进度

news 2026/5/12 19:57:03

🌟 前言：为什么它是“用户体验”的神？

传统的通知是“一次性”的：“骑手已接单”-> 划掉 ->“骑手已送达”-> 划掉。
用户想看中间的进度，必须解锁手机 -> 打开 App -> 等待加载 -> 查看地图。

实况窗的逻辑是“伴随”：
任务开始，它出现；任务进行中，它实时更新（剩余 500米 -> 300米 -> 100米）；任务结束，它自动消失。

它有两种核心形态：

胶囊态 (Capsule)：位于状态栏左上角，显示极简信息（如：图标 + 时间）。
卡片态 (Card)：在通知中心或锁屏界面，显示详细信息（如：地图、司机电话、车牌）。

🏗️ 一、架构原理：从后台到前台

实况窗本质上是一种特殊的Form (卡片)。它的生命周期由后台服务驱动。

数据流转图 (Mermaid):

🛠️ 二、核心实战：编写 ArkTS UI

实况窗的 UI 代码写在EntryFormAbility对应的 Widget 页面中。
关键在于：一套代码，适配两种形态。我们需要判断ohos.extra.param.key.form_dimension或者是自定义的布局类型。

1. 定义数据结构

classRideInfo{status:string;// "已接单", "行程中"plate:string;// 车牌号 "苏A·88888"time:string;// "3 分钟"icon:Resource;}

2. 编写响应式布局 (LiveViewCard.ets)

鸿蒙提供了LiveView专用组件布局结构。

@Entry@Componentstruct LiveViewCard{// 接收外部更新的数据@LocalStorageProp('status')status:string='等待接单';@LocalStorageProp('time')time:string='--';// 自动判断当前是胶囊还是卡片@StorageProp('formDimension')formDimension:number=0;build(){// 根容器RelativeContainer(){// --- 形态 1: 胶囊态 (状态栏左上角) ---// 只有在胶囊模式下显示if(this.isCapsule()){Row(){Image($r('app.media.car_icon')).width(18).height(18).margin({right:4})Text(this.time).fontSize(14).fontColor(Color.White)}.backgroundColor('#007DFF').borderRadius(20).padding({left:8,right:8,top:2,bottom:2})}// --- 形态 2: 卡片态 (锁屏/通知中心) ---// 只有在卡片模式下显示if(this.isCard()){Column(){// 标题栏Row(){Text('正在前往').fontSize(16).fontWeight(FontWeight.Bold)Blank()Text(this.time).fontSize(20).fontColor('#007DFF')}.width('100%')// 详细信息Row(){Text(`车牌: 苏A·88888`).fontSize(14).fontColor('#666')Text(this.status).fontSize(14).fontColor('#333')}.width('100%').margin({top:10})// 进度条Progress({value:60,total:100,type:ProgressType.Linear}).color('#007DFF').width('100%').margin({top:15})}.padding(15).backgroundColor(Color.White).borderRadius(16)}}}isCapsule():boolean{// 这里的判断逻辑需参考官方文档的 dimension 枚举returnthis.formDimension===2;// 假设 2 代表胶囊}isCard():boolean{returnthis.formDimension===3;// 假设 3 代表卡片}}

📡 三、逻辑驱动：后台更新数据

UI 写好了，怎么让它动起来？
我们需要在后台服务（ServiceExtensionAbility）或者主进程中调用notificationManager或formProvider。

注意：实况窗通常归类为Notification (通知)的一种特殊类型 (LiveView)。

importnotificationManagerfrom'@ohos.notificationManager';// 1. 创建实况窗 (Publish)asyncfunctionstartLiveView(){letnotificationRequest={id:1001,content:{contentType:notificationManager.ContentType.NOTIFICATION_CONTENT_LIVE_VIEW,liveView:{status:notificationManager.LiveViewStatus.LIVE_VIEW_STATUS_UPDATE,// 这里关联你的 UI Ability 和初始数据extraInfo:{"status":"司机已出发","time":"5 分钟"}}},// 设为常驻，用户无法划掉，直到任务结束isOngoing:true,isUnremovable:true};awaitnotificationManager.publish(notificationRequest);}// 2. 实时更新 (Update)// 比如每隔 10秒 调用一次asyncfunctionupdateProgress(timeLeft:string){letrequest={id:1001,// ID 必须一致content:{contentType:notificationManager.ContentType.NOTIFICATION_CONTENT_LIVE_VIEW,liveView:{status:notificationManager.LiveViewStatus.LIVE_VIEW_STATUS_UPDATE,extraInfo:{"status":"即将到达","time":timeLeft}}}};awaitnotificationManager.publish(request);}// 3. 结束实况窗 (End)asyncfunctionendLiveView(){// 发送结束状态，系统会自动做收尾动画// 或者直接 cancelawaitnotificationManager.cancel(1001);}

🎨 四、交互细节：灵动的核心

要让实况窗看起来“高级”，必须处理好Transitions (状态流转)。

颜色语义：

蓝色：进行中（如：司机赶往中）。
绿色：已完成/到达（如：司机已到达）。
红色：异常/警告（如：订单超时）。

点击跳转：
实况窗被点击时，应该直接跳转到 App 的详情页（如地图页），而不是首页。
在notificationRequest中配置wantAgent实现跳转。
动画过渡：
鸿蒙系统自动处理了从“胶囊”展开为“卡片”的动画，但你需要确保两个布局的数据是对应的，这样视觉上才不会突兀。