HarmonyOS 鸿蒙Next如何创建应用内的悬浮窗

发布于 1周前 作者 phonegap100 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next如何创建应用内的悬浮窗

请问如何在应用内上实现一个应用内悬浮窗（非TYPE_FLOAT类型），但有一个前提是不修改应用的主page视图。或者是否有办法实现自定义window的点击穿透？

Harmonyos Next教程
2 回复

可以通过基于子窗口实现创建应用内悬浮窗，

在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(<span class="hljs-string"><span class="hljs-string">'pages/Page'</span></span>, (err, data) =&gt; {
  <span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (err.code) {
    hilog.error(<span class="hljs-number"><span class="hljs-number">0x0000</span></span>, <span class="hljs-string"><span class="hljs-string">'testTag'</span></span>, <span class="hljs-string"><span class="hljs-string">'Failed to load the content. Cause: %{public}s'</span></span>, <span class="hljs-built_in"><span class="hljs-built_in">JSON</span></span>.stringify(err) ?? <span class="hljs-string"><span class="hljs-string">''</span></span>);
    <span class="hljs-keyword"><span class="hljs-keyword">return</span></span>;
  }
  <span class="hljs-comment"><span class="hljs-comment">// 保存窗口管理器</span></span>
  AppStorage.setOrCreate(<span class="hljs-string"><span class="hljs-string">"windowStage"</span></span>, windowStage);
  hilog.info(<span class="hljs-number"><span class="hljs-number">0x0000</span></span>, <span class="hljs-string"><span class="hljs-string">'testTag'</span></span>, <span class="hljs-string"><span class="hljs-string">'Succeeded in loading the content. Data: %{public}s'</span></span>, <span class="hljs-built_in"><span class="hljs-built_in">JSON</span></span>.stringify(data) ?? <span class="hljs-string"><span class="hljs-string">''</span></span>);
});

}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>
 

创建子窗口，子窗口样式由子窗口加载的页面组件样式决定。

this.windowStage.createSubWindow(“mySubWindow”, (err, windowClass) => {
if (err.code > 0) {
console.error(“failed to create subWindow Cause:” + err.message)
return;
}
try {
// 设置子窗口加载页
windowClass.setUIContent(“pages/MySubWindow”, () => {
windowClass.setWindowBackgroundColor("#00000000")
});
// 设置子窗口左上角坐标
windowClass.moveWindowTo(0, 200)
// 设置子窗口大小
windowClass.resize(vp2px(75), vp2px(75))
// 展示子窗口
windowClass.showWindow();
// 设置子窗口全屏化布局不避让安全区
windowClass.setWindowLayoutFullScreen(true);
} catch (err) {
console.error(“failed to create subWindow Cause:” + err)
}
})<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

参考文档：管理应用窗口（Stage模型）-窗口管理-ArkUI（方舟UI框架）-开发 | 华为开发者联盟 (huawei.com)

作为IT专家，对于HarmonyOS 鸿蒙Next如何创建应用内的悬浮窗，有以下专业解答：

在HarmonyOS 鸿蒙Next中，创建应用内悬浮窗需先获取WindowStage对象，在EntryAbility的onWindowStageCreate回调中获取。随后，利用WindowStage的createSubWindow方法创建子窗口。创建成功后，可设置子窗口的位置、大小、背景色及UI内容。为实现悬浮窗的拖拽功能，需监听拖动手势，并在手势更新时调用moveWindowTo方法更新悬浮窗位置。

具体步骤如下：

  1. 在EntryAbility的onWindowStageCreate回调中获取WindowStage对象。
  2. 调用WindowStage的createSubWindow方法创建子窗口。
  3. 设置子窗口的位置、大小、背景色等属性。
  4. 利用setUIContent方法设置子窗口的UI内容。
  5. 监听拖动手势，实现悬浮窗的拖拽功能。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部