鸿蒙Next官方悬浮窗组件如何使用

在鸿蒙Next开发中，官方提供的悬浮窗组件具体怎么调用？需要哪些基础配置？能否给出一个简单的代码示例说明创建和显示悬浮窗的完整流程？另外，悬浮窗的拖拽、点击事件以及权限管理该如何处理？

2 回复

鸿蒙Next悬浮窗？简单！

  1. 创建WindowManager实例，申请悬浮窗权限。
  2. 用WindowScene设置窗口参数（大小、位置）。
  3. 绑定UI组件，调用show()飘起来！
    注意：别让悬浮窗挡住系统按钮，否则用户会像找不到遥控器一样暴躁😆
    代码示例官方文档里有，复制粘贴改改就行～

更多关于鸿蒙Next官方悬浮窗组件如何使用的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中，悬浮窗组件主要通过WindowManager和WindowStage实现。以下是核心使用步骤和示例代码：

1. 添加权限

在module.json5中声明权限：

{
  "module": {
    "requestPermissions": [
      {
        "name": "ohos.permission.SYSTEM_FLOAT_WINDOW"
      }
    ]
  }
}

2. 创建悬浮窗

import window from '@ohos.window';
import UIAbility from '@ohos.app.ability.UIAbility';

// 获取WindowManager实例
let windowManager = window.getWindowManager();

// 创建悬浮窗参数
let floatWindowOption = {
  name: "floatWindow",
  windowType: window.WindowType.TYPE_FLOAT,
  ctx: this.context // UIAbility的Context
};

// 创建并显示悬浮窗
windowManager.createWindow(floatWindowOption).then((windowStage) => {
  windowStage.loadContent('pages/FloatWindowPage', (err) => {
    if (err) {
      console.error('Failed to load the content.');
      return;
    }
    windowStage.showWindow((err) => {
      if (err) {
        console.error('Failed to show the window.');
      }
    });
  });
});

3. 设置悬浮窗属性

// 设置窗口大小和位置
windowStage.resize(500, 500).then(() => {
  windowStage.moveTo(100, 200).then(() => {
    console.info('Suspended window resized and moved');
  });
});

// 设置可触摸区域（避免遮挡关键操作）
windowStage.setTouchable(true);

4. 关闭悬浮窗

windowStage.destroyWindow();

关键注意事项：

  1. 权限申请：需用户手动在设置中开启悬浮窗权限
  2. 窗口类型：必须使用WindowType.TYPE_FLOAT
  3. 生命周期：悬浮窗独立于主窗口，需要单独管理
  4. 尺寸限制：系统对悬浮窗最小/最大尺寸有限制

完整示例页面（pages/FloatWindowPage）：

// FloatWindowPage.ets
@Entry
@Component
struct FloatWindowPage {
  build() {
    Column() {
      Text('悬浮窗内容')
        .fontSize(20)
        .padding(10)
      
      Button('关闭')
        .onClick(() => {
          // 通过getLastWindow获取窗口实例
          window.getLastWindow(this.context).then((win) => {
            win.destroyWindow();
          });
        })
    }
    .width('100%')
    .height('100%')
  }
}

建议在实际使用中增加拖拽功能和适当的动画效果来提升用户体验。

回到顶部