鸿蒙(HarmonyOS)实战开发篇——基于子窗口实现应用内悬浮窗

最新推荐文章于 2025-04-30 16:31:53 发布

海绵胖

最新推荐文章于 2025-04-30 16:31:53 发布

阅读量1.2k

点赞数 7

分类专栏：移动开发 harmonyOS 鸿蒙开发文章标签： harmonyos ui 用户界面鸿蒙移动开发

本文链接：https://blog.csdn.net/lc748258/article/details/142592708

版权

场景描述

app应用会使用悬浮窗/悬浮球的方式来给用户展示一些应用重要&便捷功能的入口，类似android和iOS应用中常见的应用内可拖拽的悬浮球和小窗口视频悬浮窗，点击悬浮窗修改悬浮窗样式和响应事件跳转页面，在跳转页面后依然可以显示在屏幕中上个页面拖拽后的固定位置等。

应用经常会遇到如下的业务诉求：

场景一：通过事件添加和移除悬浮窗，悬浮窗样式可定制（暂定两种，无白边圆球形和小视频播放窗口类型），可代码修改位置和布局。
场景二：创建悬浮窗后，主窗口的系统侧滑返回事件可正常使用。
场景三：可响应正常点击事件，可通过触发拖动使悬浮窗的移动，根据最后手势停留位置，做动画靠屏幕左或靠右显示，跳转和返回上级页面后悬浮窗依然存在，且相对手机屏幕位置不变。
场景四：悬浮窗内组件事件触发主窗口的页面跳转（Router和Navigation两种都要有）。
场景五：悬浮窗的窗口大小自适应组件，子窗口中页面设置了宽高，需要让子窗口自适应页面组件大小。
场景六：支持控制悬浮窗隐藏和销毁。
场景七：视频类应用主动调用画中画完成后台播放，以及返回桌面时自动启动画中画。

方案描述

场景一：

通过事件添加和移除悬浮窗，悬浮窗样式可定制（暂定两种，无白边圆球形和小视频播放窗口类型），可代码修改位置和布局。

效果图

方案

通过子窗口创建windowStage.createSubWindow(‘mySubWindow’)，和windowClass.setWindowLayoutFullScreen去除白边。

核心代码

在EntryAbility中获取WindowStage。

onWindowStageCreate(windowStage: window.WindowStage): void {

  // Main window is created, set main page for this ability

  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

  windowStage.loadContent('pages/Page', (err, data) => {

  if (err.code) {

  hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');

  return;

}

// 保存窗口管理器

AppStorage.setOrCreate("windowStage", windowS