ext

文章前言一、实现原理分析二、API简单回顾三、规避和限制移动范围四、窗口宽高、状态栏高度、底部规避区域高度获取1、窗口宽高获取2、状态栏高度获取2、底部规避区域高度获取

四、完整代码实现五、其他说明

ps为演示作用这边和后续代码例子随便用回到顶部图标来做演示实际可自定义替换

一、实现原理分析

1、布局方面使用Stack容器让悬浮按钮堆叠在页面之上通过postion属性x,y设置悬浮按钮位置x,y为相对页面左上角距离

2、事件处理在移动过程中通过监听touch事件获取手指在屏幕上位置与初始触摸点位置比较计算悬浮按钮的偏移量动态更新悬浮按钮x,y值。

二、API简单回顾

名称描述Down手指按下时触发。

Up手指抬起时触发。

Move手指按压态在屏幕上移动时触发。

2、手指信息TouchObject

名称描述type触摸事件的类型windowX触摸点相对于应用窗口左上角的X坐标。

windowY触摸点相对于应用窗口左上角的Y坐标。

说明以x轴为例计算两个触摸点(A、B)水平方向距离只需B.windowX-A.windowX而在我们实现悬浮按钮处理过程中这个A点就是手指刚按下去触摸点的windowXB点就是移动过程中触摸点的windowX在移动过程中不断计算这个差值后更新悬浮按钮坐标就能让其跟着手指移动。

当然在这个过程中还需要考虑悬浮按钮移出屏幕情况需要规避和限制。

三、规避和限制移动范围

假设悬浮按钮半径为R窗口宽为winWidth、窗口高winHeight状态栏高statusHeight,底部规避区域高bottomHeight

x最大值winWidth-2R

y最大值winHeight-2R-statusHeight-bottomHeight

~winHeight-2R-statusHeight-bottomHeight

1、窗口宽高获取

.....window.getLastWindow(getContext(this),

(err,

windowClass.getWindowProperties()this.winWidth

px2vp(windowProperties.windowRect.width)this.winHeight

px2vp(windowProperties.windowRect.height)}})2、状态栏高度获取

import

.....window.getLastWindow(getContext(this),

(err,

px2vp(windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect.height)}})2、底部规避区域高度获取

import

window.getLastWindow(getContext(this),

(err,

{//获取手机底部规避区域高度this.bottomAvoidAreaHeight

px2vp(windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR).bottomRect.height)}})ps:需要注意的是上述获取到的宽高单位都是px需要统一转成vp单位方便和windowXY进行计算

四、完整代码实现

{this.getWindowInfo()}//获取窗口尺寸信息getWindowInfo()

{window.getLastWindow(getContext(this),

(err,

px2vp(windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect.height)//获取手机底部规避区域高度this.bottomAvoidAreaHeight

px2vp(windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR).bottomRect.height)//获取窗口宽高let

windowProperties

windowClass.getWindowProperties()this.winWidth

px2vp(windowProperties.windowRect.width)this.winHeight

px2vp(windowProperties.windowRect.height)//设置初始位置位于屏幕右下角演示设置可根据实际调整this.curLeftthis.winWidth*0.8this.curTopthis.winHeight*0.8}})}build()

{Stack()

{Column(){//页面内容}.width(100%).height(100%)//悬浮按钮Row()

{Image($r(app.media.top)).width(25)}.width(this.radius

2).justifyContent(FlexAlign.Center).borderRadius(this.radius).backgroundColor(#E8E8E8).position({x:

this.curLeft,y:

event.touches[0].windowXthis.startY

event.touches[0].windowYthis.startLeft

(event.type

event.touches[0]//计算悬浮球与左边距离x坐标

当前悬浮球距离左边开始位置(x轴)当前触摸点x坐标-开始移动触摸点x坐标let

curLeft

this.startX)//限制悬浮球不能移除屏幕左边curLeft

Math.max(0,

curLeft)//限制悬浮球不能移除屏幕右边this.curLeft

this.radius,

当前悬浮球距离顶部开始位置(y轴)当前触摸点y坐标-开始移动触摸点y坐标let

curTop

this.startY)//限制悬浮球不能移除屏幕上边curTop

Math.max(0,

curTop)//限制悬浮球不能移除屏幕下边this.curTop

this.radius

curTop)}})}.width(100%).height(100%).backgroundColor(#f2f2f2)}

运行效果

如果是想实现悬浮窗原理也一样只不过把悬浮按钮半径计算拆开为x,y2个方向根据悬浮窗宽高替换带入计算即可。

如果想实现不可移动悬浮按钮类似案例中回到顶部固定在页面右下角只需要把触摸事件去掉即可。