HarmonyOS NEXT开发教程：全局悬浮窗

后雪闵 · 前天 10:26

今天跟大家分享一下HarmonyOS开发中的悬浮窗。

对于悬浮窗，可能有的同学会想到使用层叠布局是否可以实现，将悬浮窗叠在导航栏组件Tabs上，像这样：

Stack({alignContent:Alignment.BottomEnd}){
Tabs({barPosition:BarPosition.End}){
TabContent(){
Text('page1')
.fontColor(Color.Black)
.fontSize(40)
}
.tabBar(this.Tabbar())
TabContent(){
Page2()
}
.tabBar(this.Tabbar())
}
Row(){
//这是悬浮窗
}
.width(60)
.height(60)
.borderRadius(30)
.backgroundColor(Color.Blue)
}

复制代码

这样的布局在push到下一个页面时悬浮窗就会消失，所以是行不通的。
对于悬浮窗鸿蒙系统有专属的创建方法，就是使用createSubWindow创建子窗口，这个子窗口会悬浮在整个应用上方。具体实现代码如下：

windowStage.createSubWindow('floatWindow',(err: BusinessError, data) =>})

复制代码

在创建完成后，可以设置悬浮窗的尺寸、位置和内容等属性,要注意这里的单位是px，且只能传正整数类型：

//尺寸data.resize(300,300,(err: BusinessError) =>})

复制代码

//位置data.moveWindowTo(400,400,(err: BusinessError) =>})

复制代码

//展示data.showWindow((err: BusinessError) =>});

复制代码

有的时候你可能需要设置悬浮窗是圆形，办法是先去对应的内容页面设置圆角后发现还是会有白色的背景，然后把窗口背景色设置为透明，这个方法最好在setUIContent的回调中设置：

data?.setWindowBackgroundColor('#00000000');

复制代码

当需要关闭悬浮窗时，可以调用destroyWindow方法进行销毁：

window.findWindow(FloatUntil.windowName).destroyWindow()

复制代码

以上就是悬浮窗的常见使用方法，为了便于使用，我把以上方法进行了简单的封装，可以一行代码就实现悬浮窗的展示、移动、关闭等操作：

import EntryAbility from "../entryability/EntryAbility";
import { BusinessError } from "@kit.BasicServicesKit";
import { display, window } from "@kit.ArkUI";
export class FloatUntil{
static screen_width = display.getDefaultDisplaySync().width
static screen_height = display.getDefaultDisplaySync().height
static float_size = 420
static float_positon_x = FloatUntil.screen_width - FloatUntil.float_size - 40
static float_positon_y = FloatUntil.screen_height - FloatUntil.float_size - 440
static windowName = 'floatWindow'
static creatAndShowSubWindow(){
EntryAbility.gloabalWindowStage.createSubWindow(FloatUntil.windowName, (err: BusinessError, data) => {
let errCode: number = err.code;
if (errCode) {
return;
}
//位置、尺寸单位是px，只支持正整数
data.moveWindowTo(FloatUntil.float_positon_x, FloatUntil.float_positon_y, (err: BusinessError) => {
let errCode: number = err.code;
if (errCode) {
return;
}
console.info('Succeeded in moving the window.');
});
data.resize(FloatUntil.float_size, FloatUntil.float_size, (err: BusinessError) => {
let errCode: number = err.code;
if (errCode) {
return;
}
});
//悬浮窗是否可触
data.setWindowTouchable(true);
data.setUIContent("pages/FloatWindow", (err: BusinessError) => {
let errCode: number = err.code;
if (errCode) {
console.error('Failed to load the content. Cause:' + JSON.stringify(err));
return;
}
console.info('Succeeded in loading the content.');
//设置窗口背景色透明，只有在这调用才不会报错
data?.setWindowBackgroundColor('#00000000');
data.showWindow((err: BusinessError) => {
let errCode: number = err.code;
if (errCode) {
console.error('Failed to show the window. Cause: ' + JSON.stringify(err));
return;
}
console.info('Succeeded in showing the window.');
});
});
})
}
static moveWindowTo(x:number,y:number){
window.findWindow(FloatUntil.windowName).moveWindowTo(x,y)
}
static destroyFloatWindow(){
window.findWindow(FloatUntil.windowName).destroyWindow()
}
}

复制代码

#HarmonyOS语言##ArkTs##工具效率#

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

账号		自动登录	找回密码
密码			立即注册

HarmonyOS NEXT开发教程：全局悬浮窗

浏览过的版块

签约作者