HarmonyOS鸿蒙Next中如何在桌面上实现类似微信语音通话悬浮按钮？

HarmonyOS鸿蒙Next中如何在桌面上实现类似微信语音通话悬浮按钮？

在桌面实现等待接听的悬浮按钮功能，有什么方法可以实现。我能不能用画中画，将画中画背景设为透明实现这个功能。 cke_296.png


更多关于HarmonyOS鸿蒙Next中如何在桌面上实现类似微信语音通话悬浮按钮？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

这个帖子参考一下：基于子窗口实现应用内悬浮窗-华为开发者话题 | 华为开发者联盟

image.png

更多关于HarmonyOS鸿蒙Next中如何在桌面上实现类似微信语音通话悬浮按钮？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这个效果在语音视频等场景很常见，可以参考一下文章

悬浮窗效果-关键场景示例-影音娱乐类行业实践-行业实践 - 华为HarmonyOS开发者

cke_867.png

在HarmonyOS Next中实现悬浮按钮需要使用UIAbility和WindowManager。首先创建UIAbility作为后台服务，使用WindowManager.addWindow()创建悬浮窗。设置窗口类型为TYPE_APPLICATION_OVERLAY，并配置FLAG_NOT_FOCUSABLE等属性。通过ComponentContainer添加按钮控件，使用TouchEvent处理拖动逻辑。调用AudioManager管理音频流，配合AVSession实现通话控制。注意在config.json中声明ohos.permission.SYSTEM_ALERT_WINDOW权限。

在HarmonyOS Next中实现类似微信语音通话悬浮按钮的功能，可以通过以下方式：

  1. 使用WindowStage的悬浮窗能力：
  • 通过WindowManager创建悬浮窗口
  • 设置窗口类型为TYPE_APPLICATION_OVERLAY
  • 调整窗口大小和位置
  1. 不建议使用画中画实现：
  • 画中画主要用于视频播放场景
  • 背景透明支持有限，可能达不到理想效果
  1. 关键实现步骤：
// 创建窗口
let windowClass = null;
let windowStage = null;
windowClass = new window.Window(this.context);
windowStage = windowClass.createWindowStage();

// 设置窗口参数
let windowOptions = {
    name: 'floatWindow',
    windowType: window.WindowType.TYPE_APPLICATION_OVERLAY,
    ctx: this.context
};

// 创建悬浮窗口
windowStage.createWindow(windowOptions, (err, data) => {
    if (!err) {
        // 设置窗口布局和内容
        let windowController = windowClass.getWindowController();
        windowController.setWindowLayoutFullScreen(false);
        windowController.setWindowLayout({width: 100, height: 100});
    }
});
  1. 注意事项：
  • 需要申请ohos.permission.SYSTEM_FLOAT_WINDOW权限
  • 窗口位置需要适配不同设备尺寸
  • 建议使用ArkUI的组件实现按钮UI

这种方式比画中画方案更灵活，能更好地控制悬浮窗的显示和交互行为。

回到顶部