HarmonyOS Next 系列之可移动悬浮按钮实现(六)

系列文章目录

HarmonyOS Next 系列之省市区弹窗选择器实现(一)
HarmonyOS Next 系列之验证码输入组件实现(二)
HarmonyOS Next 系列之底部标签栏TabBar实现(三)
HarmonyOS Next 系列之HTTP请求封装和Token持久化存储(四)
HarmonyOS Next 系列之从手机选择图片或拍照上传功能实现(五)
HarmonyOS Next 系列之可移动悬浮按钮实现(六)


文章目录

  • 系列文章目录
  • 前言
  • 一、实现原理分析
  • 二、API简单回顾
  • 三、规避和限制移动范围
  • 四、窗口宽高、状态栏高度、底部规避区域高度获取
    • 1、窗口宽高获取
    • 2、状态栏高度获取
    • 2、底部规避区域高度获取
  • 四、完整代码实现
  • 五、其他说明


前言

HarmonyOS Next(基于API11)实现一个可移动的悬浮按钮
在这里插入图片描述在这里插入图片描述

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


一、实现原理分析

1、布局方面:使用Stack容器,让悬浮按钮堆叠在页面之上,通过postion属性x,y设置悬浮按钮位置(x,y为相对页面左上角距离)
2、事件处理:在移动过程中通过监听touch事件,获取手指在屏幕上位置与初始触摸点位置比较,计算悬浮按钮的偏移量,动态更新悬浮按钮x,y值。

二、API简单回顾

touch触摸事件

1、触摸类型TouchType

名称描述
Down手指按下时触发。
Up手指抬起时触发。
Move手指按压态在屏幕上移动时触发。

2、手指信息TouchObject

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

说明:以x轴为例,计算两个触摸点(A、B)水平方向距离只需B.windowX-A.windowX,而在我们实现悬浮按钮处理过程中这个A点就是手指刚按下去触摸点的windowX,B点就是移动过程中触摸点的windowX,在移动过程中不断计算这个差值后更新悬浮按钮坐标就能让其跟着手指移动。当然在这个过程中还需要考虑悬浮按钮移出屏幕情况,需要规避和限制。

ps:windowX、windowY单位为vp


三、规避和限制移动范围

为了让悬浮按钮不移出屏幕,需要限制x、y大小
最小值很容易想到x>=0,y>=0,也即悬浮按钮在最左上角
在这里插入图片描述

最大值位置在页面右下角

在这里插入图片描述
假设悬浮按钮半径为R,窗口宽为winWidth、窗口高winHeight,状态栏高statusHeight,底部规避区域高:bottomHeight

x最大值=winWidth-2R
y最大值=winHeight-2R-statusHeight-bottomHeight
所以x范围为0~(winWidth-2R),y范围0 ~(winHeight-2R-statusHeight-bottomHeight)


四、窗口宽高、状态栏高度、底部规避区域高度获取

1、窗口宽高获取

import { window } from '@kit.ArkUI'
.....
.....
.....window.getLastWindow(getContext(this), (err, windowClass) => {if (!err.code) {//获取窗口宽高let windowProperties = windowClass.getWindowProperties()this.winWidth = px2vp(windowProperties.windowRect.width)this.winHeight = px2vp(windowProperties.windowRect.height)}})

2、状态栏高度获取

import { window } from '@kit.ArkUI'
.....
.....
.....window.getLastWindow(getContext(this), (err, windowClass) => {if (!err.code) {//获取状态栏高度this.statusHeight = px2vp(windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect.height)}})

2、底部规避区域高度获取

import { window } from '@kit.ArkUI'
.....
.....
.....
window.getLastWindow(getContext(this), (err, windowClass) => {if (!err.code) {//获取手机底部规避区域高度this.bottomAvoidAreaHeight = px2vp(windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR).bottomRect.height)}})

ps:需要注意的是上述获取到的宽高单位都是px需要统一转成vp单位,方便和windowXY进行计算

四、完整代码实现

SuspensionButton .ets

import {  window } from '@kit.ArkUI'@Entry
@Component
struct SuspensionButton {@State statusHeight: number = 0 //状态栏高度@State bottomAvoidAreaHeight: number = 0 //手机底部规避区域高度@State curLeft: number = 0 //当前悬浮按钮距离窗口左边距离@State curTop: number = 0 //当前悬浮按钮距离窗口顶部距离private startLeft: number = 0 //开始移动那一刻悬浮按钮距离窗口左边距离private startTop: number = 0 //开始移动那一刻悬浮按钮距离窗口顶部距离private startX: number = 0 //开始移动触摸点x坐标,相对窗口左上角private startY: number = 0 //开始移动触摸点y坐标,相对窗口左上角private radius: number = 25 //悬浮按钮半径,单位vpprivate winWidth: number = 0 //窗口宽度private winHeight: number = 0 //窗口高度aboutToAppear() {this.getWindowInfo()}//获取窗口尺寸信息getWindowInfo() {window.getLastWindow(getContext(this), (err, windowClass) => {if (!err.code) {//状态栏高度this.statusHeight = 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.curLeft=this.winWidth*0.8this.curTop=this.winHeight*0.8}})}build() {Stack() {Column(){//页面内容}.width('100%').height('100%')//悬浮按钮Row() {Image($r('app.media.top')).width(25)}.width(this.radius * 2).height(this.radius * 2).justifyContent(FlexAlign.Center).borderRadius(this.radius).backgroundColor('#E8E8E8').position({x: this.curLeft,y: this.curTop}).onTouch((event: TouchEvent) => {//手指按下记录初始触摸点坐标、悬浮按钮位置if (event.type === TouchType.Down) {this.startX = event.touches[0].windowXthis.startY = event.touches[0].windowYthis.startLeft = this.curLeftthis.startTop = this.curTop}//手指拖动else if (event.type === TouchType.Move) {let touch = event.touches[0]//计算悬浮球与左边距离(x坐标), 当前悬浮球距离左边=开始位置(x轴)+(当前触摸点x坐标-开始移动触摸点x坐标)let curLeft = this.startLeft + (touch.windowX - this.startX)//限制悬浮球不能移除屏幕左边curLeft = Math.max(0, curLeft)//限制悬浮球不能移除屏幕右边this.curLeft = Math.min(this.winWidth - 2 * this.radius, curLeft)//计算悬浮球与顶部距离(y坐标), 当前悬浮球距离顶部=开始位置(y轴)+(当前触摸点y坐标-开始移动触摸点y坐标)let curTop = this.startTop + (touch.windowY - this.startY)//限制悬浮球不能移除屏幕上边curTop = Math.max(0, curTop)//限制悬浮球不能移除屏幕下边this.curTop = Math.min(this.winHeight - 2 * this.radius - this.bottomAvoidAreaHeight - this.statusHeight, curTop)}})}.width('100%').height('100%').backgroundColor('#f2f2f2')}
}

运行效果
在这里插入图片描述

五、其他说明

如果是想实现悬浮窗原理也一样,只不过把悬浮按钮半径计算拆开为x,y2个方向,根据悬浮窗宽高替换带入计算即可。
如果想实现不可移动悬浮按钮,类似案例中回到顶部固定在页面右下角,只需要把触摸事件去掉即可。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/360036.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Pytorch Geometric(PyG)入门

PyG (PyTorch Geometric) 是建立在 PyTorch 基础上的一个库,用于轻松编写和训练图形神经网络 (GNN),适用于与结构化数据相关的各种应用。官方文档 Install PyG PyG适用于python3.8-3.12 一般使用场景:pip install torch_geometric 或conda …

百度地图3d区域掩膜,最常见通用的大屏地图展现形式

需求及效果 原本项目使用的是百度地图3.0,也就是2d版本的那个地图,客户不满意觉得不够好看,让把地图改成3d的,但是我们因为另外的系统用的都是百度地图,为了保持统一只能用百度地图做 经过3天的努力,最后我终于把这个效果实现了,效果如下: 如何引用GL版本 为了实现…

前端项目外包出去,是我痛苦的开始。如何破?

不止一个老铁给我反馈,他们把其前端项目外包出去,非常的痛苦,远不如用自己的员工省心。明面上钱省了,实际精力大量耗费在上面,一算账并没省,反而闹了一肚子气,问我这事该如何破?其实…

C#的无边框窗体项目模板 - 开源研究系列文章

继续整理和编写代码及博文。 这次将笔者自己整理的C#的无边框窗体项目的基本模板进行总结,得出了基于C#的.net framework的Winform的4个项目模板,这些模板具有基本的功能,即已经初步将代码写了,直接在其基础上添加业务代码即可&am…

Servlet组件

目录 1 我们为什么需要Servlet? 1.1 Web应用基本运行模式 1.2 Web服务器中Servlet作用举例 2 什么是Servlet? 3 如何使用Servlet? 3.1 操作步骤 3.2 运行分析(执行原理) 3.3 Servlet作用总结 4 Servlet生命周期 4.1 Servlet生命周期…

CRMEB 多门店后台登录入口地址修改(默认admin)

一、>2.4版本 1、修改后端 config/admin.php 配置文件,为自定义的后缀 2、修改 平台后台前端源码中 view/admin/src/settings.js 文件,修改为和上面一样的配置 3、修改后重新打包前端代码,并且覆盖到后端的 public 目录下&#xff1a;打包方法 4、重启swoole 二、<2.4版…

滑动窗口算法——部分OJ题详解

目录 关于滑动窗口 部分OJ题详解 209.长度最小的子数组 3.无重复字符的最长字串 1004.最大连续1的个数Ⅲ 1658.将x减到0的最小操作数 904.水果成篮 438.找到字符串中所有字母异位词 30.串联所有单词的子串 76.最小覆盖子串 关于滑动窗口 其实滑动窗口也是通过双指针…

项目性能优化之给dist文件夹中chunk-vendors.js做splitChunks分包,从而减少首屏加载时间

问题描述 我们项目做完&#xff0c;验收通过以后&#xff0c;就需要打包发布上线啦。于是我们执行命令&#xff1a;npm run build打dist包&#xff0c;打包完以后截图如下&#xff1a; 直接打包的chunk-vendors.js太大了 chunk-vendors.js文件太大了&#xff0c;所以我们需要…

软件测试基础知识

软件测试基础 一、软件测试质量 软件研发过程中&#xff0c;通常定义了2个软件质量相关的角色&#xff1a; QC就是测试人员&#xff0c;职责是尽可能早地发现软件的缺陷&#xff0c;并确保缺陷得到修复QA是流程的监督者&#xff0c;职责是创建和执行 改进软件开发过程&#x…

STARTRADER星迈:银和铜的未来前景,是否即将迎来历史新高?

随着全球经济的复苏和技术进步的加速&#xff0c;大宗商品市场特别是金属市场近年来表现出强劲的动态。2024年&#xff0c;包括白银和铜在内的大宗商品价格已连续创下多年和历史新高&#xff0c;被分析师誉为可能是大宗商品交易史上赚钱的一年。本文将STARTRADER外汇深入探讨白…

Chromium 开发指南2024 Mac篇-编译前的准备工作(一)

1.引言 Chromium 是一款开源的网页浏览器项目&#xff0c;作为 Google Chrome 浏览器的基础&#xff0c;其卓越的性能和广泛的应用使其成为众多开发者研究和学习的对象。对于希望深入了解浏览器内核&#xff0c;或是计划在 Chromium 基础上开发自定义浏览器的开发者来说&#…

在Tomcat中部署war包

1、准备war包 确保已经有一个有效的war包&#xff0c;该war包包含了web应用程序的所有内容&#xff1b; 2、停止tomcat服务器 在部署之前&#xff0c;确保tomcat服务器已经停止&#xff0c;进入tomcat的配置目录执行命令&#xff1a;[路径]/tomcat/conf&#xff1b; 在Linux…

EXCEL表格怎么批量删除日期后的时间?

竞价师最近有点忙了&#xff0c;因为百度新出来一个“线索有效性诊断”功能 一、下载电话、表单、咨询表格 二、选中整列 三、选中ctrlf 进行替换&#xff0c;日期输入空格&#xff0c;时间输入*&#xff0c;替换为空即可&#xff01; 四、整列单元格格式“日期”拉倒底部&…

线上OOM问题排查总结

自己搭建了一个小博客&#xff0c;该文章与博客文章同步。 一般情况下&#xff0c;出现OOM主要有一下三种原因。 一次性申请对象的太多。更改申请对象数量。内存资源耗尽未释放。找到未释放的对象进行释放。本身资源不够。jmap -heap 查看堆信息。 分几种情况解决&#xff1…

css文字镂空加描边

css文字镂空加描边 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>文字镂空</title><style>/* 公用样式 */html,body{width: 100%;height: 100%;position: relative;}/* html{overflow-y: scroll;} */*{margi…

C# 中的 StreamReader 和 StreamWriter 类

在这里插入代码片StreamReader 和 StreamWriter 位于 System.IO 命名空间中。当您想要读取或写入基于字符的数据时&#xff0c;这两个类都很有用。这两个类都处理 Unicode 字符。 StreamReader 派生自抽象类“TextReader”&#xff0c;StreamWriter 派生自“TextWriter”。 下…

爆火的儿童绘本如何用AI制作?一文解锁从制作到变现的全流程!

大家好我是安琪&#xff01; AI绘图发展势头如此猛烈&#xff0c;无论是Stable Diffusion&#xff0c;Midjourney&#xff0c;还是国内百度的文心一格&#xff0c;字节的豆包等&#xff0c;AI绘图技术越来越成熟&#xff0c;风格也越来越多样化。那么问题来了&#xff0c;对于普…

Linux企业 集群批量管理-秘钥认证

集群批量管理-秘钥认证 概述 管理更加轻松&#xff1a;两个节点&#xff0c;通过秘钥认证形成进行访问&#xff0c;不需要输入密码&#xff0c;单向服务要求&#xff08;应用场景&#xff09;&#xff1a; 一些服务在使用前要求我们做秘钥认证 手动写批量管理脚本名字&#x…

MySQL锁、加锁机制(超详细)—— 锁分类、全局锁、共享锁、排他锁;表锁、元数据锁、意向锁;行锁、间隙锁、临键锁;乐观锁、悲观锁

文章目录 一、概述1.1 MySQL锁的由来1.2 锁定义1.3 锁分类 二、共享锁与排他锁2.1 共享锁&#xff08;S锁&#xff09;2.2 排他锁&#xff08;X锁&#xff09;2.3 MySQL锁的释放 三、全局锁3.1 介绍3.2 语法3.3 特点 四、表级锁4.1 介绍4.2 表锁4.3 元数据锁&#xff08;Meta D…

auto_undercoat:可编辑 PSD 自动上色工具

现有的自动上色和 AI 上色只能输出单图&#xff0c;想要优化或微调的话很不方便&#xff0c;auto_undercoat 实现了通过提示词上色后&#xff0c;可以生成一个 PSD 文件在 PhotoShop 中继续编辑&#xff0c;大大提升了 AI 上色可用性&#xff01;