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.mzph.cn/web/32036.shtml

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

相关文章

ios swift5 播放视频失败 本地的可以 网页链接播放失败

ios swift5 播放视频失败 本地的可以 网页链接播放失败

Main thread blocked by synchronous property query on not-yet-loaded property (PreferredTransform) for HTTP(S) asset. This could have been a problem if this asset were being read from a slow network. Asset is not playable
阅读更多...
基数排序！

基数排序！

大鸡排～ 算法描述定义常量和全局变量初始化PowOfBase数组输入函数和输出函数获取某一位的基数值基数排序函数主函数 完整代码 https://articles.zsxq.com/id_flaketn5n3uo.html 算法描述 定义常量和全局变量 const int MAXN 100005; // 1 const int MAXT …
阅读更多...
MQ~消息队列能力、AMQP协议、现有选择（Kafka、RabbitMQ、RocketMQ 、Pulsar）

MQ~消息队列能力、AMQP协议、现有选择（Kafka、RabbitMQ、RocketMQ 、Pulsar）

消息队列 消息队列看作是一个存放消息的容器，当我们需要使用消息的时候，直接从容器中取出消息供自己使用即可。由于队列 Queue 是一种先进先出的数据结构，所以消费消息时也是按照顺序来消费的。 常⽤的消息队列主要这 五 种，分别…
阅读更多...
使用 DISPATCHERS 进行 Blueprint 之间的通信

使用 DISPATCHERS 进行 Blueprint 之间的通信

文章目录 初始准备DISPATCHERS 的创建和绑定实现效果 初始准备 首先 UE5 默认是不提供 静态网格体编辑器也就是 Modeling Mode 的，这里需要从插件中添加 Modeling Tools Editor Mode 进入 Modeling Mode 模式，创建一个正方体 然后利用 PolyGroup Edit 和…
阅读更多...
网络编程1

网络编程1

网络编程中&#xff0c;客户端调用close或者shutdown后&#xff0c;操作系统会给服务器发送一个FIN #include <stdio.h> #include <stdlib.h> #include <string.h> #include <unistd.h> #include <arpa/inet.h>int main() {int sockfd;struct s…
阅读更多...
Vue79-路由组件独有的2个新的生命周期钩子

Vue79-路由组件独有的2个新的生命周期钩子

一、需求 news.vue路由组件被缓存了&#xff08;因为想要保留里面的输入框的数据&#xff01;&#xff09;&#xff0c;导致&#xff0c;路由页面切走&#xff0c;组件也不会被销毁&#xff0c;所以&#xff0c;beforeDestroy()函数就不会被执行&#xff0c;所以&#xff0c;定…
阅读更多...
npm、yarn、pnpm 最新国内镜像源设置和常见问题解决

npm、yarn、pnpm 最新国内镜像源设置和常见问题解决

1. npm 设置国内镜像源 1.1 镜像源概述 镜像源是软件包管理工具用来下载和安装软件包的服务器地址。由于网络原因&#xff0c;直接使用官方源可能会导致速度慢或连接失败的问题。国内镜像源可以提供更快的访问速度和更稳定的连接。 1.2 镜像源的选择 国内有许多可用的npm镜…
阅读更多...
Java中如何使用设计模式来解决编程问题？

Java中如何使用设计模式来解决编程问题？

Java中使用设计模式来解决编程问题&#xff0c;可以显著提高代码的可复用性、可维护性和可读性。设计模式是一套被广泛应用于软件工程的解决方案&#xff0c;描述了在特定上下文中面对具体问题时的可复用解决方案。以下是几种常用的设计模式及其应用场景&#xff1a; 单例模式…
阅读更多...
数据结构课设——文章编辑系统

数据结构课设——文章编辑系统

需求分析（菜单 输入文章 统计字符 童子字符串出现次数 删除某子串 查看文章 保存文章 加载文章）、概要设计（算法功能设计 软件环境）、详细设计（主要数据类型 变量 函数 算法流程图）、调试分析（非法合法测试数据、遇到问题解决方案解决结果）、总结、文献、附录（代码） …
阅读更多...
React+TS前台项目实战（十二）-- 全局常用组件Toast封装，以及rxjs和useReducer的使用

React+TS前台项目实战（十二）-- 全局常用组件Toast封装，以及rxjs和useReducer的使用

文章目录 前言Toast组件1. 功能分析2. 代码详细注释&#xff08;1&#xff09;建立一个reducer.ts文件&#xff0c;用于管理状态数据&#xff08;2&#xff09;自定义一个清除定时器的hook&#xff08;3&#xff09;使用rxjs封装全局变量管理hook&#xff08;4&#xff09;在to…
阅读更多...
文字模拟：经营酒店隐私政策

文字模拟：经营酒店隐私政策

隐私政策 文字模拟&#xff1a;经营酒店隐私政策 一、引言 本隐私政策适用于我们提供的文字模拟&#xff1a;经营酒店小游戏&#xff08;以下简称“游戏”&#xff09;。我们非常重视用户的隐私和个人信息的保护&#xff0c;因此制定了本隐私政策&#xff0c;以解释我们如何…
阅读更多...
在scrapy中使用Selector提取数据

在scrapy中使用Selector提取数据

经院吉吉&#xff1a; 首先说明一下&#xff0c;在scrapy中使用选择器是基于Selector这个对象滴&#xff0c;selector对象在scrapy中通过XPATH或是CSS来提取数据的&#xff0c;我们可以自己创建selector对象&#xff0c;但在实际开发中我们不需要这样做&#xff0c;因为respons…
阅读更多...
御道源码（ruoyi-vue-pro）个人使用小结

御道源码（ruoyi-vue-pro）个人使用小结

御道源码&#xff08;ruoyi-vue-pro&#xff09;个人使用小结 一、Git地址 1、平台项目简介及地址 2、开发指南&#xff0c;如图所示&#xff0c;部分功能需要收费&#xff0c;可自行了解 二、项目文件夹结构示例&#xff1a; 三、技术介绍 1.基于 Spring Boot MyBatis P…
阅读更多...
Java字符串连接符拼接操作

Java字符串连接符拼接操作

在Java的算术运算符中的加法符号“ ”&#xff0c;可以用来进行算术运算&#xff0c;也可以用来当作连接符进行字符串的拼接。 当“ ”操作中出现字符串时&#xff0c;这个“ ”是字符串连接符&#xff0c;而不是运算符了。 会将前后的数据进行拼接在一起&#xff0c;并产生…
阅读更多...
dll丢失应该怎么解决，总结5种解决DLL丢失问题的方法

dll丢失应该怎么解决，总结5种解决DLL丢失问题的方法

在数字时代&#xff0c;我们与计算机的每一天都密不可分。然而&#xff0c;就像所有技术产品一样&#xff0c;我们的计算设备也时不时地会出现一些问题&#xff0c;让人头疼不已。就在上周&#xff0c;我遭遇了一个令人崩溃的技术挑战——DLL文件丢失。这个看似微不足道的小问题…
阅读更多...
转--基于OpenEuler的Docker容器安装使用

转--基于OpenEuler的Docker容器安装使用

/usr/sbin/sshd执行以下命令查看ssh服务是否已经开始监听22端口&#xff1a; netstat -tuln | grep :22看到以下输出证明ssh服务已启动&#xff1a; [rootmaster /]# netstat -tuln | grep :22 tcp 0 0 0.0.0.0:22 0.0.0.0:* LISTEN …
阅读更多...
【MySQL】 -- 事务

【MySQL】 -- 事务

如果对表中的数据进行CRUD操作时&#xff0c;不加控制&#xff0c;会带来一些问题。 比如下面这种场景&#xff1a; 有一个tickets表&#xff0c;这个数据库被两个客户端机器A和B用时连接对此表进行操作。客户端A检查tickets表中还有一张票的时候&#xff0c;将票出售了&#x…
阅读更多...
OpenCloudOS系统上安装Java环境

OpenCloudOS系统上安装Java环境

在腾讯云OpenCloudOS系统上安装Java环境&#xff0c;可以使用yum包管理器进行安装。以下是安装Java环境的步骤和示例代码&#xff1a; 首先打开终端。 执行以下命令以更新yum包索引&#xff1a; sudo yum update 安装OpenJDK Java环境&#xff0c;可以选择安装Java 8或者更…
阅读更多...
【Linux基础IO】深入理解缓冲区

【Linux基础IO】深入理解缓冲区

缓冲区在文件操作的过程中是比较重要的&#xff0c;理解缓冲区向文件刷新内容的原理可以更好的帮助我们更深层的理解操作系统内核对文件的操作。 FILE 因为IO相关函数与系统调用接口对应&#xff0c;并且库函数封装系统调用&#xff0c;所以本质上&#xff0c;访问文件都是通过…
阅读更多...
ES数值类型慢查询优化

ES数值类型慢查询优化

现象 某个查询ES接口慢调用告警&#xff0c;如图&#xff0c;接口P999的耗时都在2500ms: 基本耗时都在查询ES阶段&#xff1a; 场景与ES设定 慢调用接口为输入多个条件分页查询&#xff0c;慢调用接口调用的ES索引为 express_order_info&#xff0c;该索引通过DTS(数据同步…
阅读更多...
最新文章

Copyright @ 2022~2023