HarmonyOS7 悬浮窗、分屏、平行视界怎么配合？多形态窗口实战

文章目录前言多窗口体系全景EasyGo 新特性应用内分屏比价设备形态适配策略实战智能助手的分屏比价布局悬浮窗场景语音助手常驻踩坑记录我的感受前言上篇我们玩了互动卡片和闪控窗今天继续聊窗口——但这次是整个多窗口体系的全面实战。HarmonyOS 7 的多窗口能力说实话让我眼前一亮。悬浮窗、侧边栏、分屏、平行视界这四种形态组合在一起基本覆盖了用户从手机到平板到折叠屏的所有使用场景。我们的智能生活助手要做到哪里都能出现就靠这套东西了。多窗口体系全景先把概念理清楚。HarmonyOS 7 的多窗口不是一个功能是一整套窗口形态体系悬浮窗App 内容以小窗形式悬浮在其他应用之上比如视频通话时切到聊天界面视频画面缩小成浮窗继续侧边栏窗口停靠在屏幕边缘半收起状态用户拉出来就能操作类似系统的快捷面板分屏两个应用左右或上下并排显示各自独立操作平行视界同一个应用在左右两侧显示不同层级的内容——左侧是列表右侧是详情这四种形态可以互相转换。闪控窗就是这个体系的核心枢纽——一个闪控球可以同时管理悬浮窗和侧边栏用户一键切换。EasyGo 新特性应用内分屏比价HarmonyOS 7 在平行视界基础上加了一个很实用的功能——应用内分屏比价。简单说就是同一个页面内左右两边同时展示不同商品或不同渠道的信息用户可以直观对比。这个功能对我们的智能助手太合适了。用户在选商品的时候左边看 A 平台的价格右边看 B 平台的价格不用再两个 App 来回切换。EasyGo 的配置很轻量核心就是在module.json5里声明支持平行视界然后在代码里做分屏布局// module.json5{module:{abilities:[{name:ShoppingAbility,srcEntry:./ets/entryability/ShoppingAbility.ets,launchType:multiton,orientation:auto_rotation,multiWindowConfig:{splitMode:horizontal,minWidth:360,minHeight:480,supportWindowModes:[fullscreen,split,floating,sidebar]}}]}}supportWindowModes这个字段决定了你的应用支持哪些窗口形态。fullscreen是默认的全屏split是分屏floating是悬浮窗sidebar是侧边栏。建议全勾上让系统自动适配。设备形态适配策略这才是真正让人头疼的地方。手机、平板、折叠屏三种设备形态下窗口的表现完全不同。手机上主要用悬浮窗和侧边栏分屏体验一般——屏幕太窄了两个应用挤在一起很难用。平板和折叠屏就不一样了分屏和平行视界才是主角悬浮窗反而用得少。我的做法是根据设备类型动态调整默认窗口策略// utils/WindowStrategy.etsimport{deviceInfo}fromkit.BasicServicesKit;import{window}fromkit.ArkUI;exporttypeDeviceFormphone|tablet|foldable;exportfunctiongetDeviceForm():DeviceForm{consttypedeviceInfo.deviceType;if(typetablet)returntablet;if(type2in1||typefoldable)returnfoldable;returnphone;}exportfunctiongetDefaultWindowMode():window.WindowMode{constformgetDeviceForm();switch(form){casetablet:casefoldable:returnwindow.WindowMode.WINDOW_MODE_SPLIT_PRIMARY;casephone:default:returnwindow.WindowMode.WINDOW_MODE_FLOATING;}}这段代码通过deviceInfo.deviceType判断设备类型然后返回推荐的默认窗口模式。平板和折叠屏默认走分屏手机默认走悬浮窗。实战智能助手的分屏比价布局接下来把比价功能跑通。核心思路是在平行视界模式下左侧显示商品列表右侧显示对比详情// pages/CompareShopping.etsimport{mediaquery}fromkit.ArkUI;EntryComponentstruct CompareShopping{StateleftProductId:string;StaterightProductId:string;StateisSplitMode:booleanfalse;privatesmBreakpoint:mediaquery.SMBreakPointnewmediaquery.SMBreakPoint();aboutToAppear(){this.smBreakpoint.register((sm:mediaquery.SMBreakpoint){// 当屏幕宽度大于 sm 阈值时启用分屏模式this.isSplitModesm.currentBreakpointlg||sm.currentBreakpointxl;});}aboutToDisappear(){this.smBreakpoint.unregister();}build(){if(this.isSplitMode){// 分屏布局左列表 右详情Row(){// 左侧商品列表ProductListPanel({onProductSelect:(id:string){this.leftProductIdid;}}).width(40%).height(100%)Divider().vertical(true)// 右侧对比详情CompareDetailPanel({productId:this.leftProductId}).width(60%).height(100%)}.width(100%).height(100%)}else{// 手机模式普通的列表→详情跳转ProductListPanel({onProductSelect:(id:string){router.pushUrl({url:pages/ProductDetail,params:{productId:id}});}})}}}这里用mediaquery的断点系统来判断当前窗口宽度。大屏幕下直接左右分栏小屏幕下退化成传统的列表→详情跳转。同一套代码不同设备自动适配。悬浮窗场景语音助手常驻智能助手还有个很自然的悬浮窗场景——语音助手浮窗。用户在购物界面悬浮窗显示语音助手按钮点击就能语音搜索商品不用离开当前页面// components/AssistantFloatingView.etsEntryComponentstruct AssistantFloatingView{StateisExpanded:booleanfalse;StatevoiceText:string;build(){Column(){if(this.isExpanded){// 展开态显示语音识别结果和快捷操作Column({space:12}){Text(this.voiceText||按住说话).fontSize(14).fontColor(#666)Row({space:16}){Button(搜商品).onClick((){/* 触发搜索 */})Button(比价格).onClick((){/* 跳转比价 */})Button(查物流).onClick((){/* 查物流 */})}}.padding(16).borderRadius(16).backgroundColor(#FFFFFF).shadow({radius:8,color:#20000000,offsetX:0,offsetY:2})}else{// 收起态只显示一个小圆球Image($r(app.media.assistant_icon)).width(48).height(48).borderRadius(24)}}.onClick((){this.isExpanded!this.isExpanded;}).animation({duration:200,curve:Curve.EaseInOut})}}悬浮窗组件配合闪控球用户随时能呼出语音助手。点击闪控球展开完整面板再点一次收起。这个交互在购物流程中特别顺滑。踩坑记录开发过程中踩了几个坑分享一下窗口尺寸变化时数据丢失。从全屏切到分屏组件会重新布局如果状态管理没做好State里的数据可能丢失。解决方案是用StorageLink或者把关键状态存到AppStorage里这样窗口变化不影响数据。侧边栏宽度适配。侧边栏模式下可用宽度比预期小很多硬编码宽度很容易溢出。建议侧边栏模式全部用百分比布局或者Flex弹性布局。多窗口间的通信。两个分屏窗口想共享数据别用EventHub——它只在同一个 UIAbility 内有效。用ohos.app.ability.common里的sharedData或者分布式数据管理跨窗口通信更靠谱。我的感受多窗口体系是 HarmonyOS 7 在用户体验层面感知最强的升级之一。但说实话适配工作量不小。三种设备形态 × 四种窗口模式排列组合下来有十几种布局状态。我的建议是先做手机全屏 悬浮窗跑通核心流程再逐步加分屏和平行视界。一口吃不成胖子分阶段来会轻松很多。EasyGo 的分屏比价确实好用我自己在折叠屏上试了试同时看两个平台的商品价格体验非常直觉。如果你的 App 有类似的对比场景强烈建议试试这个能力。下一篇我们来聊方舟引擎看看怎么把这些窗口界面的渲染性能拉上去。