HarmonyOS7 互动卡片和闪控窗，正在重写 UI 交互

文章目录前言互动卡片不只是静态展示核心能力互动卡片组件开发卡片配置注册闪控窗悬浮窗的终极形态三种形态闪控窗配置闪控窗内的 UI 面板把互动卡片和闪控窗串起来踩坑与心得小结前言上篇我们搞定了 3D 商品展示今天换个方向——看看 HarmonyOS 7 最吸引眼球的两个 UI 新能力互动卡片和闪控窗。这两个东西组合起来能干嘛简单说就是你的 App 卡片在桌面上能动起来用户摇一摇手机卡片就有动态反馈同时还能有一个全局悬浮的闪控球随时呼出智能助手不用切应用。互动卡片不只是静态展示传统的桌面服务卡片就是一张静态图点击跳 App。HarmonyOS 7 的互动卡片加了一层活的东西——你可以通过传感器事件比如摇一摇触发卡片的动态效果。核心能力静态转动态摇一摇手机卡片从静态图变成动画状态前景出框卡片里的人物/商品可以溢出卡片边界产生立体感视差效果随手机倾斜角度变化卡片内元素产生视差移动互动卡片组件开发互动卡片还是基于Entry装饰器的 Form 组件但多了Interactive装饰器和传感器事件绑定// card/SmartAssistantCard.etsEntryComponentInteractivestruct SmartAssistantCard{StateisShaking:booleanfalse;StatetiltX:number0;StatetiltY:number0;StorageLink(cardWeather)weatherData:string晴;build(){Stack(){// 背景层——静态天气场景Image($r(app.media.weather_bg)).width(100%).height(100%).objectFit(ImageFit.Cover)// 前景元素——会出框的天气图标Image($r(app.media.sun_icon)).width(80).height(80).offset({x:this.tiltX*10,y:this.tiltY*10-(this.isShaking?20:0)}).scale({x:this.isShaking?1.2:1.0,y:this.isShaking?1.2:1.0}).animation({duration:300,curve:Curve.EaseOut})// 文字信息Column(){Text(this.weatherData).fontSize(24).fontWeight(FontWeight.Bold).fontColor(#FFFFFF)Text(智能生活助手).fontSize(12).fontColor(#CCFFFFFF)}.alignItems(HorizontalAlign.Start).padding(16).layoutAlign(Alignment.BottomStart)}.width(100%).height(100%).borderRadius(16)// 绑定摇一摇事件.onShake((){this.isShakingtrue;setTimeout((){this.isShakingfalse;},1500);})// 绑定倾斜传感器.onTilt((event:TiltEvent){this.tiltXevent.angleX;this.tiltYevent.angleY;})}}几个要点Interactive装饰器告诉系统这个卡片支持交互事件onShake和onTilt是卡片专属的传感器回调普通页面里用不到这套 API。前景出框效果的核心就是让元素在offset方向上突破卡片边界——系统会自动裁切掉超出部分但通过clip(false)可以让它溢出来产生 3D 感。卡片配置注册别忘了在module.json5里声明互动能力{module:{extensionAbilities:[{name:SmartAssistantForm,type:form,metadata:[{name:ohos.extension.form,resource:$profile:form_config}],interactive:true,sensorCapabilities:[shake,tilt]}]}}interactive: true和sensorCapabilities这两行是关键少了任何一个摇一摇和倾斜事件都不会触发。闪控窗悬浮窗的终极形态闪控窗是 HarmonyOS 7 把悬浮窗、侧边栏暂存、闪控球三个东西融为一体的新方案。以前做一个悬浮功能你得处理窗口管理、边界检测、收纳逻辑现在系统全帮你搞定。三种形态悬浮窗模式正常浮动在屏幕上的小窗口可以自由拖动和调整大小侧边栏暂存拖到屏幕边缘自动吸附变成侧边条不占空间但随时可拉出来闪控球模式缩成一个悬浮小球在任何 App 上方都能显示点击展开恢复窗口闪控窗配置闪控窗通过window模块的StageWindowManager来管理// utils/FlashControlManager.etsimport{window}fromkit.ArkUI;exportclassFlashControlManager{privateflashWindow:window.FlashControlWindow|nullnull;// 创建闪控窗asynccreate(context:Context):Promisevoid{constconfig:window.FlashControlConfig{// 初始化为悬浮窗模式initialMode:window.FlashControlMode.FLOATING,// 窗口初始尺寸和位置bounds:{x:100,y:600,width:360,height:480},// 允许的模式切换supportedModes:[window.FlashControlMode.FLOATING,window.FlashControlMode.SIDEBAR,window.FlashControlMode.BALL],// 闪控球的外观ballConfig:{size:56,icon:$r(app.media.assistant_ball),autoHide:true,// 无操作 5 秒后半透明edgeAttach:true// 允许吸附屏幕边缘}};this.flashWindowawaitwindow.createFlashControl(context,config);// 加载卡片内容页面awaitthis.flashWindow.setUIContent(pages/AssistantFlashPanel);// 监听模式切换this.flashWindow.on(modeChanged,(mode:window.FlashControlMode){switch(mode){casewindow.FlashControlMode.BALL:// 缩成球时暂停不必要的后台任务console.info(闪控窗已缩为闪控球);break;casewindow.FlashControlMode.FLOATING:// 展开时恢复console.info(闪控窗已展开);break;}});// 显示this.flashWindow.show();}// 从闪控球状态主动展开asyncexpand():Promisevoid{if(this.flashWindow){awaitthis.flashWindow.setMode(window.FlashControlMode.FLOATING);}}// 销毁destroy():void{this.flashWindow?.destroy();this.flashWindownull;}}FlashControlConfig里的supportedModes决定了用户能怎么操作。如果不想让用户切成侧边栏去掉SIDEBAR就行。ballConfig.autoHide挺实用的——闪控球在用户不碰它几秒后自动变半透明不会挡住底下内容。闪控窗内的 UI 面板闪控窗里加载的是一个独立的页面我们的智能助手面板长这样// pages/AssistantFlashPanel.etsEntryComponentstruct AssistantFlashPanel{Statequery:string;Statemessages:string[][];build(){Column(){// 顶部拖动条系统自动渲染但你可以自定义颜色Row().width(40).height(4).borderRadius(2).backgroundColor(#CCCCCC).margin({top:8,bottom:8})// 消息列表List(){ForEach(this.messages,(msg:string){ListItem(){Text(msg).fontSize(14).padding(8).backgroundColor(#F0F0F0).borderRadius(8)}})}.layoutWeight(1)// 输入区Row(){TextInput({placeholder:问点什么...,text:this.query}).layoutWeight(1).onChange((value:string){this.queryvalue;})Button(发送).onClick((){if(this.query.trim()){this.messages.push(this.query);this.query;}})}.padding(12)}.width(100%).height(100%).backgroundColor(#FFFFFF).borderRadius(16)}}把互动卡片和闪控窗串起来在我们的智能生活助手里这两个功能是这么配合的桌面卡片展示天气/日程摘要 → 用户摇一摇看到动态效果 → 点击卡片展开详情 → 闪控球弹出悬浮面板 → 用户在面板里跟助手对话。关键代码是在卡片的点击事件中拉起闪控窗// 卡片中点击展开的回调.onClick((){// 通过 Want 通知主应用启动闪控窗constwant:Want{bundleName:com.example.smartassistant,abilityName:MainAbility,action:action.showFlashControl};context.startAbility(want);})然后在MainAbility的onNewWant里判断 action决定是否拉起闪控窗。这部分逻辑比较直白就不展开了。踩坑与心得卡片刷新频率有限制。互动卡片的动态更新不是无限的系统有帧率管控大约 30fps 上限别在里面做太复杂的逐帧动画会卡。闪控窗权限。创建闪控窗需要ohos.permission.SYSTEM_FLOAT_WINDOW权限这是个 system_grant 权限需要在module.json5里声明。普通应用能申请到但审核时华为会看你的使用场景是否合理。侧边栏暂存的 UI 适配。从悬浮窗拖到侧边栏时窗口宽度会被压到很窄。你的 UI 得能响应这个变化建议用MediaQuery做适配或者监听boundsChanged事件动态调整布局。小结互动卡片和闪控窗是 HarmonyOS 7 在系统级 UI 上的大升级。互动卡片让桌面不再只是图标排列闪控窗让悬浮交互有了标准化方案。做智能助手这类需要常驻和随时可达的应用这两个能力几乎是必选项。下一篇我们聊多形态服务窗口——悬浮窗、分屏、平行视界看看怎么让 App 在不同设备形态上都好用。