HarmonyOS实战:实现任意拖动的应用悬浮窗口

简介: 本文介绍了在鸿蒙系统上实现全局悬浮窗口的方法。通过创建子 Window,结合手势拖动、边界处理和窗口销毁等功能,实现一个可在任意页面悬浮、移动且不会超出边界的悬浮窗。文章详细解析了技术实现步骤,包括使用 `createSubWindow` 创建窗口、设置布局与背景、手势交互及边界计算等。此外,还提到 Window 的应用场景可扩展至自定义弹窗、Poupwindow 和 toast 等功能,为开发者提供更多可能性。

前言

为了增加应用程序功能的丰富性和便利性,很多应用都会提供一个悬浮窗口实现多页面显示。特别是一些性能检测工具,比如 dokit 。在鸿蒙上怎么实现类似的全局悬浮窗口呢?阅读完本篇文章你将学会在鸿蒙上如何实现这一功能。

实现效果

需求分析

要想实现全局悬浮窗口,必须满足以下几个要求:

  1. 窗口可以悬浮在任意页面。
  2. 窗口可以跟随手势拖动。
  3. 边界处理。

技术实现

在 ArkUI 中,页面只有 Window 和 View 两种组成。View 通常都是显示在 Window 中,如果要想实现一个可以在任意页面都能停留显示的悬浮窗,只能通过 window 来实现。

  1. 通过 windowState 调用 createSubWIndow 来创建一个子 Window。
this.windowState.createSubWindow("subWindow", (err: BusinessError, window) => {
     
    })
  1. 对于 windowState 的获取,一般都在 EntryAbility 中的 onWindowStateCreate 中提供,如果不想通过传递参数的方式获取 windowStage,系统也提供了工具类可以在任意地方获取。
//存储windowStage
WindowManager.setWindowStage(windowStage);
//获取windowstage
 this.windowState = WindowManager.getWindowStage()
  1. 初始化 Window。url 为 window 页面的路径。
window.setWindowLayoutFullScreen(false) //设置window是否全屏显示
      window.setUIContent(url, (error) => {
        window.showWindow((error) => {
          window.setWindowBackgroundColor("#00000000") //设置window背景色
        })
      })
      window.resize(this.size, this.size)//设置window大小
      window.moveWindowTo(this.locationX, this.locationY) //设置window的初始位置
  1. 手势移动,通过调研 PanGesture()的 onActionUpdate 方法不断更新 window 的位置。
.gesture(GestureGroup(
      GestureMode.Exclusive,
      PanGesture().onActionUpdate((event)=>{
        this.currentWindow?.moveWindowTo(event.offsetX,event.offsetY)
      })
    ))
  1. 边界处理,计算最小移动范围和最大移动范围。确保 window 不会移出当前页面。
this.locationX = Math.min(Math.max(this.locationX + x, this.minX), this.maxX)
 this.locationY = Math.min(Math.max(this.locationY + y, this.minY), this.maxY)
  1. window 销毁。当退出应用时,需要将 window 关闭,调用 window 的 destroyWindow 方法销毁 window。
this.contentWindow.destroyWindow(() => {
        this.contentWindow = undefined
      })

总结

通过 window 不仅能实现全局悬浮窗,还可以实现自定义弹窗,Poupwindow,toast 等一系列弹窗。使用 window 的好处在于可以彻底和当前页面分离,不依赖页面存在。可以实现在任意地方弹窗。快动手试试吧!

目录
相关文章
|
8天前
|
存储 人工智能 算法
鸿蒙HamonyOS应用上架手动签名与发布
鸿蒙HamonyOS应用上架手动签名与发布
56 4
鸿蒙HamonyOS应用上架手动签名与发布
|
11天前
|
JavaScript 开发者 索引
鸿蒙应用开发从入门到实战(九):ArkTS渲染控制
ArkTS拓展了TypeScript,可以结合ArkUI进行渲染控制,是的界面设计具有可编程性。本文简要描述鸿蒙应用开发中的条件渲染和循环渲染。
|
8天前
|
数据安全/隐私保护 开发者
鸿蒙应用开发从入门到实战(十一):ArkUI组件Text&TextInput
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解文本组件Text和TextInput的使用。
|
7天前
|
开发者
鸿蒙应用开发从入门到实战(十二):ArkUI组件Button&Toggle
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解按钮组件Button和Toggle的使用。
|
12天前
|
JavaScript
鸿蒙应用开发从入门到实战(八):ArkTS自定义组件语法
ArkUI除系统预置的组件外,还支持自定义组件。使用自定义组件,可使代码的结构更加清晰,并且能提高代码的复用性。
|
9天前
|
存储 编解码 JSON
鸿蒙应用开发从入门到实战(十):ArkUI图片组件Image
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解Image图片组件的使用。
|
13天前
|
API
鸿蒙应用开发从入门到实战(七):ArkTS组件声明语法
《鸿蒙应用开发从入门到项目实战》系列文章持续更新中,陆续更新AI+编程、企业级项目实战等原创内容、欢迎关注!​本文从界面制作从组件声明开始,通过一个相对简单的案例来系统的学习 ArkTS 声明组件的语法。
|
13天前
|
JavaScript 前端开发 开发者
鸿蒙应用开发从入门到实战(六):ArkTS声明式UI和组件化
鸿蒙开发语言ArkTS在继承了Typescrip语法的基础上,主要扩展了声明式UI开发相关的能力。
|
JavaScript Java API
【鸿蒙 HarmonyOS】创建 Java 语言 HarmonyOS 手机应用 ( 首次进入 DevEco Studio 配置环境 | 创建 Java 手机工程 | 鸿蒙工程代码目录简介 )(二)
【鸿蒙 HarmonyOS】创建 Java 语言 HarmonyOS 手机应用 ( 首次进入 DevEco Studio 配置环境 | 创建 Java 手机工程 | 鸿蒙工程代码目录简介 )(二)
478 0
【鸿蒙 HarmonyOS】创建 Java 语言 HarmonyOS 手机应用 ( 首次进入 DevEco Studio 配置环境 | 创建 Java 手机工程 | 鸿蒙工程代码目录简介 )(二)
|
4月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
仓颉语言实战分享,教你如何用仓颉开发外卖App界面。内容包括页面布局、导航栏自定义、搜索框实现、列表模块构建等,附完整代码示例。轻松掌握Scroll、List等组件使用技巧,提升HarmonyOS应用开发能力。