鸿蒙 7.0 多形态服务窗口:闪控球+闪控窗跨应用轻量交互——常驻直达根因
本文是「鸿蒙 7.0 新特性」系列第 13 篇。上篇讲鸿蒙 AI 文档识别(Data Augmentation Kit 端侧知识加工,零延迟)。本文讲鸿蒙多形态服务窗口核心:闪控球+闪控窗跨应用轻量交互——根因在常驻直达引擎。鸿蒙 7.0(API 26)多形态服务窗口三层架构(闪控球展示少量关键信息支持应用外一键操作自动拉起应用 + 闪控窗展示更多关键信息支持应用外便捷操作实时监测常驻展示实时状态 + 闪控窗两标准状态常规态矩形自由宽高/Mini态横向细长条矩形遮挡小,自由拖动+侧边栏暂存+与闪控球一键切换),本文用本机 API 21 就能跑的
onDragEnter/onDragMove/onDragLeave(拖拽态监听,API 11)+dragPreview(拖拽预览,API 11)+DragEvent(拖拽事件含 x/y 全局坐标,API 11)真机演示闪控窗拖拽态逻辑,再讲鸿蒙 7.0 多形态服务窗口演进根因:悬浮窗(API 6)→ 闪控球+闪控窗(API 26,跨应用轻量交互常驻直达)。
一、开篇:多形态服务窗口不是「全量功能悬浮窗」,是「常驻直达轻量交互引擎」
你写 React 时,跨应用操作是「全量功能悬浮窗魔法」(一个悬浮窗承载应用全量功能,切换不同功能):
// React 悬浮窗:全量功能悬浮窗魔法(一个悬浮窗承载应用全量功能)
function FloatWindow() {
const [showFull, setShowFull] = useState(false)
return (
<div className="float-window">
{/* ❌ 一个悬浮窗承载应用全量功能,切换不同功能(重浮沉) */}
{showFull ? (
<FullAppUI /> // ❌ 全量功能悬浮,无单一功能聚焦,重浮沉
) : (
<MiniBall onClick={() => setShowFull(true)} /> // ❌ 球展开为全量窗,无中间态
)}
{/* ❌ 无跨应用轻量交互(悬浮窗只在自己应用内,无法跨应用常驻) */}
</div>
)
}
// React 悬浮窗:全量功能悬浮窗魔法(一个悬浮窗承载应用全量功能,无单一功能聚焦,重浮沉)
你写鸿蒙 ArkTS 时,多形态服务窗口是常驻直达轻量交互引擎——闪控球+闪控窗跨应用轻量交互:
// ArkTS 多形态服务窗口:常驻直达轻量交互引擎,闪控球+闪控窗
@Entry
@Component
struct Index {
@State currentMode: string = 'regular' // ✅ 常规态/Mini态两标准状态
@State currentContent: string = '金融盯盘:上证 3125.67 +0.85%'
build() {
Column() {
// ✅ 闪控窗演示区域(常规态矩形/Mini态横向细长条,两标准状态模板)
Text(this.currentContent)
.fontSize(this.currentMode === 'regular' ? 14 : 10)
// ✅ dragPreview 拖拽预览(API 11,DragPreviewMode.AUTO 自动渲染预览)
.dragPreview(this.currentContent)
// ✅ onDragEnter/Move/Leave 拖拽态监听(API 11,闪控窗自由拖动+侧边栏暂存)
.onDragEnter((event: DragEvent) => {
// ✅ 拖拽进入:闪控窗拖拽预览显示
})
.onDragMove((event: DragEvent) => {
// ✅ 拖拽移动:DragEvent 含 x/y 全局坐标,拖到屏幕边缘触发侧边栏暂存态
const x = event.getX()
if (x < 50) {
// ✅ 拖到左侧边栏暂存(闪控窗收纳到侧边栏,点击恢复)
}
})
.onDragLeave((event: DragEvent) => {
// ✅ 拖拽离开:松手落位(自由拖动到任意位置或侧边栏暂存)
})
}
}
}
// ArkTS 多形态服务窗口:常驻直达轻量交互引擎,闪控球+闪控窗
全量功能悬浮窗魔法 vs 常驻直达轻量交互引擎的区别:React 把跨应用操作当全量功能悬浮窗魔法(一个悬浮窗承载应用全量功能,无单一功能聚焦,重浮沉,无跨应用常驻),ArkTS 把多形态服务窗口当「常驻直达轻量交互引擎」(闪控球+闪控窗跨应用轻量交互,闪控球展示少量关键信息一键操作,闪控窗展示更多信息高频轻量交互,常驻直达)。根因不是全量功能悬浮窗是常驻直达轻量交互引擎——闪控球+闪控窗跨应用轻量交互,常驻直达轻量交互引擎。
二、根因:鸿蒙多形态服务窗口的常驻直达三层架构机制
鸿蒙 7.0 多形态服务窗口是常驻直达三层架构绑定——闪控球+闪控窗+两标准状态,来自三重绑定机制。
机制 1:闪控球——展示少量关键信息,支持应用外一键操作,自动拉起应用
闪控球——展示少量关键信息,支持应用外一键操作,自动拉起应用:
// ✅ 闪控球(API 26):展示少量关键信息,支持应用外一键操作,自动拉起应用
// ✅ 闪控球定位:实现跨应用快捷操作,适用于抢单/记账/比价等场景
// ✅ 闪控球展示少量关键信息(如抢单状态/记账金额/比价结果),点击自动拉起应用对应界面
// ✅ 闪控球场景:抢单(应用外一键抢单,球展示抢单状态)/ 记账(应用外快速记账,球展示记账金额)
// ✅ 闪控球场景:比价(应用外实时比价,球展示比价结果),点击球自动拉起应用对应界面
// 闪控球:展示少量关键信息,支持应用外一键操作,自动拉起应用,跨应用快捷操作
闪控球 vs React MiniBall 的区别:闪控球(展示少量关键信息,支持应用外一键操作,自动拉起应用,跨应用快捷操作,API 26),React MiniBall(只在自己应用内,无跨应用常驻,点击展开为全量窗无中间态)。根因不是 React MiniBall 是闪控球——跨应用快捷操作自动拉起应用。
机制 2:闪控窗——展示更多关键信息,支持应用外便捷操作、实时监测,常驻展示实时状态
闪控窗——展示更多关键信息,支持应用外便捷操作、实时监测,常驻展示实时状态:
// ✅ 闪控窗(API 26):展示更多关键信息,支持应用外便捷操作、实时监测,常驻展示实时状态
// ✅ 闪控窗定位:实现跨应用高频、轻量交互操作,适用于金融盯盘/游戏直播/歌词显示等场景
// ✅ 闪控窗场景:金融盯盘(常驻展示实时股价)/ 游戏直播(常驻展示直播画面)/ 歌词显示(常驻展示当前歌词)
// ✅ 闪控窗特性:自由拖动 + 侧边栏暂存 + 与闪控球一键切换,系统内最多显示一个闪控窗
// ✅ 应用接入闪控窗功能后,用户可通过应用内指定入口手动开启闪控窗
// ✅ 点击闪控窗,跳转至原应用对应界面(从哪来到哪去的基本原则)
// 闪控窗:展示更多关键信息,支持应用外便捷操作、实时监测,常驻展示实时状态
闪控窗 vs 系统悬浮窗的区别:闪控窗(承载应用内单一功能或局部信息,无法覆盖全应用业务,支持应用内悬浮或跨应用悬浮,窗口仅限执行本任务相关功能,API 26),系统悬浮窗(承载应用全量功能,在同一个悬浮窗内可进行应用内不同功能的切换和跳转)。根因不是系统悬浮窗是闪控窗——承载单一功能局部信息,跨应用悬浮仅限本任务相关功能。
机制 3:闪控窗两标准状态——常规态矩形自由宽高 / Mini态横向细长条矩形遮挡小
闪控窗两标准状态——常规态矩形自由宽高 / Mini态横向细长条矩形遮挡小:
// ✅ 闪控窗两标准状态(API 26):常规态 / Mini态,两标准状态模板
// ✅ 常规态:矩形,在最大最小尺寸范围内可自由设定宽高,适用于大多数使用场景
// ✅ Mini态:横向细长条矩形,窗口对于页面遮挡较小,适用于游戏直播、盯盘等场景
// ✅ 窗口模板(titlebar 布局、拖拽区、内容区):提供常规态与mini态的两种标准状态模板
// ✅ 如果业务同时接入常规态和mini态两种窗口形态,则需要在窗口内容区自行配置窗口形态切换按钮
// ✅ 闪控窗尺寸有最大、最小尺寸限制,可按需在区间内自由定义窗口尺寸大小与比例
// ✅ 为保证在不同设备下窗口视觉体验的一致性,尺寸大小与计算规则根据设备类型有所不同
// ✅ 竖屏:屏幕宽度30% | 窗口宽度 | 窗口宽度*75% | 屏幕宽度5%
// ✅ 闪控窗两标准状态:常规态矩形自由宽高 / Mini态横向细长条矩形遮挡小
闪控窗两标准状态 vs React 固定悬浮窗尺寸的区别:闪控窗两标准状态(常规态矩形自由宽高/Mini态横向细长条矩形遮挡小,两标准状态模板,API 26),React 固定悬浮窗尺寸(无标准状态模板,无形态切换,无最大最小尺寸限制)。根因不是 React 固定悬浮窗尺寸是闪控窗两标准状态——两标准状态模板按场景切换,最大最小尺寸限制保证视觉体验一致性。
三、真机配图:鸿蒙多形态服务窗口——闪控球+闪控窗跨应用轻量交互

真机配图展示鸿蒙多形态服务窗口闪控球+闪控窗跨应用轻量交互:
- 初始态:鸿蒙 7.0 多形态服务窗口标题,五个场景卡片——场景1+2 闪控窗常规态/Mini态切换(两标准状态模板,闪控窗演示区域已显示「金融盯盘:上证 3125.67 +0.85%」)、场景3 闪控球与闪控窗一键切换、闪控窗内容场景切换(金融盯盘/游戏直播/歌词显示三按钮)、场景5 闪控球+闪控窗四高频交互场景,下方三层演进说明
- 常规态:点击「① 常规态」按钮,闪控窗演示区域显示「闪控窗 [常规态]」「金融盯盘:上证 3125.67 +0.85%」,windowState 显示「✅ 常规态(矩形,自由宽高):金融盯盘:上证 3125.67 +0.85%」——常规态验证(矩形窗口,宽度 90%,圆角 8)
- Mini态:点击「② Mini态」按钮,闪控窗演示区域显示「闪控窗 [Mini态]」「金融盯盘:上证 3125.67 +0.85%」(横向细长条矩形,宽度变窄 60%,圆角变大 20),windowState 显示「✅ Mini态(横向细长条):金融盯盘:上证 3125.67 +0.85%」——Mini态验证(横向细长条矩形,窗口对页面遮挡较小)
- 球↔窗切换态:点击「③ 闪控球 ↔ 闪控窗 切换」按钮,switchStatus 显示「✅ 闪控球 ↔ 闪控窗 一键切换:球展示少量关键信息(抢单/记账/比价),窗展示更多信息(盯盘/直播/歌词)」——球↔窗切换验证
- 四高频场景态:点击「⑦ 演示四高频场景」按钮,sceneStatus 显示「✅ 闪控球场景:抢单/记账/比价(少量关键信息,应用外一键操作)」,pipelineStatus 显示「✅ 闪控窗场景:金融盯盘/游戏直播/歌词显示(更多信息,应用外高频轻量交互)」——四高频场景验证
四、真解法:鸿蒙多形态服务窗口的三个场景
场景 1:闪控窗常规态/Mini态切换(两标准状态模板)——90% 场景首选
闪控窗常规态/Mini态切换用两标准状态模板(常规态矩形自由宽高/Mini态横向细长条矩形):
// ✅ 场景 1:闪控窗常规态/Mini态切换(API 26,两标准状态模板)
@Entry
@Component
struct Index {
@State currentMode: string = 'regular' // ✅ 'regular' 常规态 / 'mini' Mini态
@State currentContent: string = '金融盯盘:上证 3125.67 +0.85%'
switchToRegular() {
// ✅ 常规态:矩形,在最大最小尺寸范围内可自由设定宽高,适用于大多数使用场景
this.currentMode = 'regular'
}
switchToMini() {
// ✅ Mini态:横向细长条矩形,窗口对页面遮挡较小,适用于游戏直播/盯盘等场景
this.currentMode = 'mini'
}
build() {
Column() {
// ✅ 闪控窗演示区域(常规态/Mini态两形态,宽度/圆角按形态切换)
Text(this.currentContent)
.fontSize(this.currentMode === 'regular' ? 14 : 10) // ✅ Mini态字号小
.borderRadius(this.currentMode === 'regular' ? 8 : 20) // ✅ Mini态圆角大
.width(this.currentMode === 'regular' ? '90%' : '60%') // ✅ Mini态宽度窄
}
}
}
// 闪控窗常规态/Mini态切换:90% 场景首选,两标准状态模板按场景切换
鸿蒙闪控窗两标准状态 API 真名坑:常规态(矩形,在最大最小尺寸范围内可自由设定宽高,适用于大多数使用场景);Mini态(横向细长条矩形,窗口对页面遮挡较小,适用于游戏直播/盯盘等场景);两标准状态模板(titlebar 布局、拖拽区、内容区);如果业务同时接入常规态和mini态两种窗口形态,则需要在窗口内容区自行配置窗口形态切换按钮;闪控窗尺寸有最大、最小尺寸限制,可按需在区间内自由定义窗口尺寸大小与比例。
场景 2:闪控窗拖拽态监听(onDragEnter/onDragMove/onDragLeave + dragPreview)
闪控窗拖拽态监听用 onDragEnter/onDragMove/onDragLeave + dragPreview + DragEvent:
// ✅ 场景 2:闪控窗拖拽态监听(API 11,onDragEnter/Move/Leave + dragPreview)
@Entry
@Component
struct Index {
@State dragStatus: string = '(未拖拽)'
@State dragPos: string = '(0, 0)'
onDragMoveHandler(event: DragEvent) {
// ✅ onDragMove 拖拽移动回调(DragEvent 含 x/y 全局坐标)
// ⚠ getX()/getY() 已废弃(WARN),但本机 API 21 仍可跑(鸿蒙 7.0 升级为 event.x/y)
const x = event.getX()
const y = event.getY()
this.dragPos = `(${x}, ${y})`
// ✅ 拖到屏幕边缘(x < 50 或 x > 1270)触发侧边栏暂存态
if (x < 50) {
this.dragStatus = `✅ 拖到左侧边栏暂存(x=${x}):闪控窗收纳到侧边栏,点击恢复`
} else if (x > 1270) {
this.dragStatus = `✅ 拖到右侧边栏暂存(x=${x}):闪控窗收纳到侧边栏,点击恢复`
} else {
this.dragStatus = `✅ 拖拽中(x=${x}, y=${y}):自由拖动闪控窗到任意位置`
}
}
build() {
Column() {
Text('闪控窗演示')
// ✅ dragPreview 拖拽预览(API 11,DragPreviewMode.AUTO 自动渲染预览)
.dragPreview('闪控窗演示')
// ✅ onDragEnter/Move/Leave 拖拽态监听(API 11,闪控窗自由拖动+侧边栏暂存)
.onDragEnter((event: DragEvent) => {
this.dragStatus = '✅ onDragEnter 拖拽进入:拖拽预览显示'
})
.onDragMove((event: DragEvent) => this.onDragMoveHandler(event))
.onDragLeave((event: DragEvent) => {
this.dragStatus = '✅ onDragLeave 拖拽离开:松手落位'
})
}
}
}
// 闪控窗拖拽态监听:onDragEnter/Move/Leave + dragPreview,自由拖动+侧边栏暂存
鸿蒙拖拽态监听 API 真名坑:onDragEnter/onDragMove/onDragLeave 是 Text/Button 等组件的属性方法(API 11,回调参 DragEvent + extraParams?: string);DragEvent 含 getX()/getY() 全局坐标(已废弃 WARN,鸿蒙 7.0 升级为 event.x/event.y,本机 API 21 仍可跑);dragPreview(value) 配置拖拽预览(API 11,DragPreviewMode.AUTO 自动渲染预览);拖到屏幕边缘(x<50 或 x>1270)触发侧边栏暂存态(闪控窗收纳到侧边栏,点击恢复)。
场景 3:闪控球与闪控窗一键切换 + 鸿蒙 7.0 四高频交互场景(API 26)
闪控球与闪控窗一键切换 + 鸿蒙 7.0 四高频交互场景——球跨应用快捷操作,窗跨应用高频轻量交互:
// ✅ 场景 3:闪控球与闪控窗一键切换 + 鸿蒙 7.0 四高频交互场景(API 26)
switchBallWindow() {
// ✅ 鸿蒙 7.0(API 26)闪控球+闪控窗一键切换
// ✅ 闪控球→闪控窗:扩展信息展示(球展示少量关键信息→窗展示更多信息)
// ✅ 闪控窗→闪控球:收纳快捷操作(窗展示更多信息→球展示少量关键信息)
}
demonstrateFlashScenes() {
// ✅ 鸿蒙 7.0(API 26)闪控球+闪控窗四高频交互场景:
// ✅ 闪控球场景:抢单(应用外一键抢单,球展示抢单状态)/ 记账(应用外快速记账,球展示记账金额)
// ✅ 闪控球场景:比价(应用外实时比价,球展示比价结果),点击球自动拉起应用对应界面
// ✅ 闪控窗场景:金融盯盘(常驻展示实时股价)/ 游戏直播(常驻展示直播画面)/ 歌词显示(常驻展示当前歌词)
// ✅ 闪控窗特性:自由拖动 + 侧边栏暂存 + 与闪控球一键切换,系统内最多显示一个闪控窗
}
// 闪控球与闪控窗一键切换:球跨应用快捷操作,窗跨应用高频轻量交互
鸿蒙 7.0 闪控球+闪控窗 vs 系统悬浮窗的区别:鸿蒙 7.0 闪控球+闪控窗(承载应用内单一功能或局部信息,无法覆盖全应用业务,支持应用内悬浮或跨应用悬浮,窗口仅限执行本任务相关功能,API 26),系统悬浮窗(承载应用全量功能,在同一个悬浮窗内可进行应用内不同功能的切换和跳转)。根因不是系统悬浮窗是鸿蒙 7.0 闪控球+闪控窗——承载单一功能局部信息,跨应用悬浮仅限本任务相关功能。
五、一句话哲学
写鸿蒙 ArkUI 记住:多形态服务窗口不是「全量功能悬浮窗」是「常驻直达轻量交互引擎」——鸿蒙 7.0 多形态服务窗口常驻直达三层架构。根因不是全量功能悬浮窗是常驻直达轻量交互引擎——闪控球(展示少量关键信息,支持应用外一键操作,自动拉起应用,跨应用快捷操作,适用于抢单/记账/比价等场景,API 26)+ 闪控窗(展示更多关键信息,支持应用外便捷操作、实时监测,常驻展示实时状态,跨应用高频轻量交互,适用于金融盯盘/游戏直播/歌词显示等场景,自由拖动 + 侧边栏暂存 + 与闪控球一键切换,系统内最多显示一个闪控窗,API 26)+ 闪控窗两标准状态(常规态矩形在最大最小尺寸范围内自由设定宽高适用于大多数使用场景 / Mini态横向细长条矩形窗口对页面遮挡较小适用于游戏直播盯盘等场景,两标准状态模板 titlebar 布局+拖拽区+内容区,如果业务同时接入常规态和mini态两种窗口形态则需要在窗口内容区自行配置窗口形态切换按钮,API 26)。闪控球与闪控窗一键切换(球→窗扩展信息展示,窗→球收纳快捷操作,若应用同时接入闪控窗和闪控球,闪控窗和闪控球之间可以互相切换)。闪控窗拖拽态监听用 onDragEnter/onDragMove/onDragLeave + dragPreview(API 11,DragEvent 含 getX()/getY() 全局坐标已废弃 WARN 鸿蒙 7.0 升级为 event.x/y,拖到屏幕边缘 x<50 或 x>1270 触发侧边栏暂存态,dragPreview 配置拖拽预览 DragPreviewMode.AUTO 自动渲染)。闪控窗 vs 系统悬浮窗:窗承载应用内单一功能或局部信息无法覆盖全应用业务支持应用内悬浮或跨应用悬浮窗口仅限执行本任务相关功能,窗承载应用全量功能在同一个悬浮窗内可进行应用内不同功能的切换和跳转。常驻直达轻量交互引擎跨应用单一功能聚焦是鸿蒙 7.0 多形态服务窗口核心!
能力系列回链
- 鸿蒙 7.0 新特性篇 1「沉浸式毛玻璃 + 底部 Sheet 面板」——backgroundBlurStyle 系统材质渲染槽
- 鸿蒙 7.0 新特性篇 2「Component3D 空间计算」——一行加载 glTF 3D 模型真机渲染
- 鸿蒙 7.0 新特性篇 3「鸿蒙智能体框架 2.0」——意图即服务,InsightIntentExecutor 意图路由表
- 鸿蒙 7.0 新特性篇 4「超丝滑方舟引擎」——springMotion 物理弹簧动画,真实回弹手感
- 鸿蒙 7.0 新特性篇 5「鸿蒙星盾安全」——关键资产隔离 + 权限最小化,零信任安全
- 鸿蒙 7.0 新特性篇 6「鸿蒙星河互联」——分布式设备发现 + 跨设备拖放,碰一碰精准分享
- 鸿蒙 7.0 新特性篇 7「鸿蒙空间音频引擎」——AudioSpatializationManager 空间渲染,立体声场
- 鸿蒙 7.0 新特性篇 8「鸿蒙可变字体」——fontFeature + fontVariations,一文件多形态
- 鸿蒙 7.0 新特性篇 9「鸿蒙游戏快启」——launchAcceleration 预启动 + 冷启预建链,秒开
- 鸿蒙 7.0 新特性篇 10「鸿蒙分布式数据盾」——DDO 跨端数据对象 + DID 数字身份,可信同步
- 鸿蒙 7.0 新特性篇 11「鸿蒙 LTPO 可变帧率」——ExpectedFrameRateRange 范帧率,性能功耗平衡
- 鸿蒙 7.0 新特性篇 12「鸿蒙 AI 文档识别」——Data Augmentation Kit 端侧知识加工,零延迟
- 鸿蒙 7.0 新特性篇 13「鸿蒙多形态服务窗口」——闪控球+闪控窗跨应用轻量交互,常驻直达(本文)
真机 demo 完整代码
// 鸿蒙 7.0 新特性篇 13:多形态服务窗口——闪控球+闪控窗跨应用轻量交互根因
// 本 demo 用 API 11+ onDragEnter/onDragMove/onDragLeave + dragPreview 演示闪控窗拖拽态逻辑(本机 API 21 可跑)
// 文章里讲鸿蒙 7.0 多形态服务窗口演进:悬浮窗(API 6)→ 闪控球+闪控窗(API 26,跨应用轻量交互)
// ✅ 闪控窗形态(常规态/Mini态两标准状态模板)
interface FlashWindowState {
mode: string // ✅ 'regular' 常规态 / 'mini' Mini态(横向细长条矩形)
width: number // ✅ 窗口宽度(常规态自由设定,Mini态横向细长条)
height: number // ✅ 窗口高度
content: string // ✅ 窗口内容(金融盯盘/游戏直播/歌词显示等)
isFloating: boolean // ✅ 是否悬浮态(跨应用常驻)
}
@Entry
@Component
struct Index {
@State log: string = '(未操作)'
@State dragStatus: string = '(未拖拽)'
@State windowState: string = '(未切形态)'
@State switchStatus: string = '(未切换)'
@State sceneStatus: string = '(未选场景)'
@State pipelineStatus: string = '(未演示)'
@State currentMode: string = 'regular'
@State currentContent: string = '金融盯盘:上证 3125.67 +0.85%'
@State dragPos: string = '(0, 0)'
aboutToAppear() {
this.log = '鸿蒙 7.0 多形态服务窗口:闪控球+闪控窗跨应用轻量交互'
}
// ✅ 场景 1:闪控窗常规态(矩形,自由设定宽高,适用于大多数使用场景)
switchToRegular() {
this.currentMode = 'regular'
this.windowState = `✅ 常规态(矩形,自由宽高):${this.currentContent}`
this.log = '✅ 闪控窗切常规态:矩形窗口,最大最小尺寸范围内自由设定宽高(大多数使用场景)'
}
// ✅ 场景 2:闪控窗 Mini 态(横向细长条矩形,窗口对页面遮挡较小)
switchToMini() {
this.currentMode = 'mini'
this.windowState = `✅ Mini态(横向细长条):${this.currentContent}`
this.log = '✅ 闪控窗切 Mini 态:横向细长条矩形,窗口对页面遮挡较小(游戏直播/盯盘场景)'
}
// ✅ 场景 3:闪控球与闪控窗一键切换
switchBallWindow() {
this.switchStatus = '✅ 闪控球 ↔ 闪控窗 一键切换:球展示少量关键信息(抢单/记账/比价),窗展示更多信息(盯盘/直播/歌词)'
this.log = '✅ 鸿蒙 7.0 闪控球+闪控窗一键切换(API 26):球跨应用快捷操作,窗跨应用高频轻量交互'
}
// ✅ 场景 4:拖拽闪控窗到侧边栏暂存(onDragEnter/onDragMove/onDragLeave + dragPreview)
onDragMoveHandler(event: DragEvent) {
const x = event.getX()
const y = event.getY()
this.dragPos = `(${x}, ${y})`
if (x < 50) {
this.dragStatus = `✅ 拖到左侧边栏暂存(x=${x}):闪控窗收纳到侧边栏,点击恢复`
} else if (x > 1270) {
this.dragStatus = `✅ 拖到右侧边栏暂存(x=${x}):闪控窗收纳到侧边栏,点击恢复`
} else {
this.dragStatus = `✅ 拖拽中(x=${x}, y=${y}):自由拖动闪控窗到任意位置`
}
this.log = `✅ onDragMove 拖拽移动:x=${x}, y=${y}(API 11,dragPreview 拖拽预览)`
}
onDragEnterHandler(event: DragEvent) {
this.dragStatus = '✅ onDragEnter 拖拽进入:拖拽预览显示(dragPreview 配置)'
this.log = '✅ onDragEnter 拖拽进入:闪控窗拖拽预览显示(API 11,DragPreviewMode.AUTO)'
}
onDragLeaveHandler(event: DragEvent) {
this.dragStatus = '✅ onDragLeave 拖拽离开:松手落位(自由拖动到任意位置或侧边栏暂存)'
this.log = '✅ onDragLeave 拖拽离开:闪控窗松手落位(API 11,自由拖动或侧边栏暂存)'
}
// ✅ 场景 5:鸿蒙 7.0 闪控窗四高频交互场景
demonstrateFlashScenes() {
this.sceneStatus = '✅ 闪控球场景:抢单/记账/比价(少量关键信息,应用外一键操作)'
this.pipelineStatus = '✅ 闪控窗场景:金融盯盘/游戏直播/歌词显示(更多信息,应用外高频轻量交互)'
this.log = '✅ 鸿蒙 7.0 闪控球+闪控窗四高频交互场景(API 26):跨应用快捷操作 + 跨应用高频轻量交互'
}
// ✅ 切闪控窗内容场景
switchContent(scene: string) {
if (scene === 'finance') {
this.currentContent = '金融盯盘:上证 3125.67 +0.85%'
} else if (scene === 'live') {
this.currentContent = '游戏直播:王者荣耀决赛 BO5 第 3 局'
} else if (scene === 'lyric') {
this.currentContent = '歌词显示:起风了 - 这一路上走走停停'
}
this.windowState = `✅ ${this.currentMode === 'regular' ? '常规态' : 'Mini态'}:${this.currentContent}`
this.log = `切闪控窗内容:${scene}(${this.currentContent})`
}
build() {
Column({ space: 8 }) {
Text('鸿蒙 7.0 多形态服务窗口')
.fontSize(18).fontWeight(FontWeight.Bold).margin({ top: 16, bottom: 4 })
Text('闪控球+闪控窗跨应用轻量交互——常驻直达根因')
.fontSize(11).fontColor('#888').margin({ bottom: 8 })
// ✅ 场景 1+2:闪控窗常规态/Mini态切换
Column({ space: 6 }) {
Text('场景 1+2:闪控窗常规态/Mini态切换(API 26,两标准状态模板)')
.fontSize(12).fontColor('#2563eb').fontWeight(FontWeight.Bold)
Text('常规态矩形自由宽高 / Mini态横向细长条矩形遮挡小')
.fontSize(9).fontColor('#888')
Row({ space: 6 }) {
Button('① 常规态').height(28).fontSize(9).backgroundColor('#2563eb20')
.onClick(() => this.switchToRegular())
Button('② Mini态').height(28).fontSize(9).backgroundColor('#28a74520')
.onClick(() => this.switchToMini())
}
Column({ space: 4 }) {
Text(`闪控窗 [${this.currentMode === 'regular' ? '常规态' : 'Mini态'}]`)
.fontSize(10).fontColor('#6c757d').fontWeight(FontWeight.Bold)
Text(this.currentContent)
.fontSize(this.currentMode === 'regular' ? 14 : 10)
.fontColor('#333')
.padding(8)
.backgroundColor('#e0f0ff')
.borderRadius(this.currentMode === 'regular' ? 8 : 20)
.width(this.currentMode === 'regular' ? '90%' : '60%')
.dragPreview(this.currentContent)
.onDragEnter((event: DragEvent) => this.onDragEnterHandler(event))
.onDragMove((event: DragEvent) => this.onDragMoveHandler(event))
.onDragLeave((event: DragEvent) => this.onDragLeaveHandler(event))
}
.margin({ top: 6 })
Text(this.windowState).fontSize(9).fontColor('#28a745').margin({ top: 4 })
Text(this.dragStatus).fontSize(9).fontColor('#ff6600').margin({ top: 2 })
Text(`拖拽位置:${this.dragPos}`).fontSize(9).fontColor('#6c757d').margin({ top: 2 })
}
.width('92%').padding(8).backgroundColor('#e0f0ff').borderRadius(8)
// ✅ 场景 3:闪控球与闪控窗一键切换
Column({ space: 6 }) {
Text('场景 3:闪控球与闪控窗一键切换(API 26)')
.fontSize(12).fontColor('#ff6600').fontWeight(FontWeight.Bold)
Text('球展示少量关键信息(抢单/记账/比价)↔ 窗展示更多信息(盯盘/直播/歌词)')
.fontSize(9).fontColor('#888')
Button('③ 闪控球 ↔ 闪控窗 切换').height(30).fontSize(9).backgroundColor('#ff660020')
.onClick(() => this.switchBallWindow())
Text(this.switchStatus).fontSize(9).fontColor('#ff6600').margin({ top: 4 })
}
.width('92%').padding(8).backgroundColor('#fff3e0').borderRadius(8)
// ✅ 切闪控窗内容场景按钮组
Column({ space: 6 }) {
Text('闪控窗内容场景切换(演示不同高频交互场景)')
.fontSize(12).fontColor('#6c757d').fontWeight(FontWeight.Bold)
Row({ space: 6 }) {
Button('金融盯盘').height(26).fontSize(8).backgroundColor('#28a74520')
.onClick(() => this.switchContent('finance'))
Button('游戏直播').height(26).fontSize(8).backgroundColor('#dc354520')
.onClick(() => this.switchContent('live'))
Button('歌词显示').height(26).fontSize(8).backgroundColor('#6c757d20')
.onClick(() => this.switchContent('lyric'))
}
}
.width('92%').padding(8).backgroundColor('#f8f9fa').borderRadius(8)
// ✅ 场景 5:鸿蒙 7.0 闪控球+闪控窗四高频交互场景
Column({ space: 6 }) {
Text('场景 5:鸿蒙 7.0 闪控球+闪控窗四高频交互场景(API 26)')
.fontSize(12).fontColor('#dc3545').fontWeight(FontWeight.Bold)
Text('球:抢单/记账/比价(少量关键信息一键操作)/ 窗:盯盘/直播/歌词(更多信息高频轻量交互)')
.fontSize(9).fontColor('#888')
Button('⑦ 演示四高频场景').height(30).fontSize(9).backgroundColor('#dc354520')
.onClick(() => this.demonstrateFlashScenes())
Text(this.sceneStatus).fontSize(9).fontColor('#dc3545').margin({ top: 4 })
Text(this.pipelineStatus).fontSize(9).fontColor('#ff6600').margin({ top: 2 })
}
.width('92%').padding(8).backgroundColor('#f8d7da').borderRadius(8)
// ✅ 鸿蒙 7.0 多形态服务窗口三层演进说明
Column({ space: 3 }) {
Text('鸿蒙 7.0 多形态服务窗口三层演进')
.fontSize(10).fontColor('#6c757d').fontWeight(FontWeight.Bold)
Text('① 悬浮窗(API 6):应用全量功能悬浮,同一悬浮窗内可切换不同功能')
.fontSize(8).fontColor('#888')
Text('② 闪控球(API 26):展示少量关键信息,支持应用外一键操作,自动拉起应用')
.fontSize(8).fontColor('#28a745')
Text('③ 闪控窗(API 26):展示更多关键信息,支持应用外便捷操作实时监测,常驻展示实时状态')
.fontSize(8).fontColor('#ff6600')
Text('④ 闪控窗两标准状态:常规态矩形自由宽高 / Mini态横向细长条矩形遮挡小')
.fontSize(8).fontColor('#2563eb')
Text('⑤ 闪控窗特性:自由拖动 + 侧边栏暂存 + 与闪控球一键切换,系统内最多显示一个闪控窗')
.fontSize(8).fontColor('#dc3545')
Text('⚠ 闪控窗 vs 系统悬浮窗:窗承载应用内单一功能局部信息,窗承载应用全量功能')
.fontSize(8).fontColor('#6c757d')
}
.width('92%').padding(6).backgroundColor('#f8f9fa').borderRadius(8)
Text(`日志:${this.log}`).fontSize(9).fontColor('#333').margin({ top: 6 })
Text('鸿蒙 7.0(API 26)多形态服务窗口:闪控球+闪控窗,跨应用轻量交互,常驻直达')
.fontSize(8).fontColor('#dc3545').margin({ top: 6 })
}
.width('100%').height('100%').alignItems(HorizontalAlign.Center)
}
}
写鸿蒙 ArkUI 记住:多形态服务窗口不是「全量功能悬浮窗」是「常驻直达轻量交互引擎」——鸿蒙 7.0 多形态服务窗口常驻直达三层架构。根因不是全量功能悬浮窗是常驻直达轻量交互引擎——闪控球(展示少量关键信息,支持应用外一键操作,自动拉起应用,跨应用快捷操作,适用于抢单/记账/比价等场景,API 26)+ 闪控窗(展示更多关键信息,支持应用外便捷操作、实时监测,常驻展示实时状态,跨应用高频轻量交互,适用于金融盯盘/游戏直播/歌词显示等场景,自由拖动 + 侧边栏暂存 + 与闪控球一键切换,系统内最多显示一个闪控窗,API 26)+ 闪控窗两标准状态(常规态矩形在最大最小尺寸范围内自由设定宽高适用于大多数使用场景 / Mini态横向细长条矩形窗口对页面遮挡较小适用于游戏直播盯盘等场景,两标准状态模板 titlebar 布局+拖拽区+内容区,如果业务同时接入常规态和mini态两种窗口形态则需要在窗口内容区自行配置窗口形态切换按钮,API 26)。闪控球与闪控窗一键切换(球→窗扩展信息展示,窗→球收纳快捷操作,若应用同时接入闪控窗和闪控球,闪控窗和闪控球之间可以互相切换)。闪控窗拖拽态监听用 onDragEnter/onDragMove/onDragLeave + dragPreview(API 11,DragEvent 含 getX()/getY() 全局坐标已废弃 WARN 鸿蒙 7.0 升级为 event.x/y,拖到屏幕边缘 x<50 或 x>1270 触发侧边栏暂存态,dragPreview 配置拖拽预览 DragPreviewMode.AUTO 自动渲染)。闪控窗 vs 系统悬浮窗:窗承载应用内单一功能或局部信息无法覆盖全应用业务支持应用内悬浮或跨应用悬浮窗口仅限执行本任务相关功能,窗承载应用全量功能在同一个悬浮窗内可进行应用内不同功能的切换和跳转。常驻直达轻量交互引擎跨应用单一功能聚焦是鸿蒙 7.0 多形态服务窗口核心!
更多推荐
所有评论(0)