今天跟大家分享一下 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##工具效率 #
评论