HarmonyOS(40) 悬浮框实现

郭梧悠2024-06-29 11:01

悬浮框

实现效果和样式

如下图：按住电话悬浮框，随着手指的拖动会滚动，同时当松开手指时如果在屏幕左半边，则自动移动到左边；反之会自动移动停靠到右边。

构建电话悬浮框的代码：就是一个Column>>Image + Text,然后设置圆角和通过shadow方法设置阴影即可。

java 复制代码 
@Component
export default struct FloatingWindowComponent {
  private res: Resource = $r('app.media.ic_call_green');
  private tips?: Resource = $r('app.string.Tips_call');

  build() {
    Column() {
      Image(this.res)
        .objectFit(ImageFit.Contain)
        .width('40%')
        .height('40%')

      Text(this.tips)
        .fontSize(12)
        .fontColor($r('app.color.background_green'))
        .fontWeight(FontWeight.Regular)
        .fontFamily($r('app.string.Font_family_regular'))
    }
    .width(80)
    .height(80)
    .backgroundColor($r('app.color.white'))
    .borderRadius(16)
    .shadow({ radius: 15, color: $r('app.color.btn_border_color') })
    .justifyContent(FlexAlign.SpaceAround)
  }
}

相关概念

实现随着手指的移动而移动，就需要获取手指当前的(x,y)坐标值。在onTouch事件TouchEvent来获取对应的位置，TouchEvent对象提供了(windowX,windowY)、（displayX,displayY）、（screenX,screenY）(已废弃）三对属性。比如我们想获取手指按下时对应的坐标位置，可以用如下代码：

dart 复制代码 
 if (event.type === TouchType.Down) {
    this.moveStartX = event.touches[0].windowX; // 按下时获取X坐标初始值
     this.moveStartY = event.touches[0].windowY; // 按下时获取Y坐标初始值
 }

具体的代表的意思如下：

实现思路

  1. 获取屏幕的宽度和高度，通过display获取屏幕的宽和高，然后通过px2vp将px转换成vp
java 复制代码 
  aboutToAppear() {
    display.getAllDisplays((err, data) => {
      // 拿到屏幕宽高的一半，作为判断基准值
      this.displayHalfWidth = data[0].width / 2;
      this.displayHalfHeight = data[0].height / 2;
      // 将拿到的px转为vp
      this.displayHalfWidth = px2vp(this.displayHalfWidth);
      this.displayHalfHeight = px2vp(this.displayHalfHeight);
    })
  }
  1. 使用@state方法修饰当前(x,y)的坐标位置，当二者的值发生变化时，会更新组件的位置，实现悬浮框跟着手指移动的效果。
dart 复制代码 
 @State positionX: number = 50; // 组件位置X
 @State positionY: number = 500; // 组件位置Y
 /下面的系列属性，官方给的demo中都加了@State修饰，其实没必要
 moveStartX: number = 0; // X方向起始点
 moveStartY: number = 0; // Y方向起始点
 moveEndX: number = 0; // X方向终点
 moveEndY: number = 0; // Y方向终点
 moveSumLengthX: number = 0; // X方向移动距离总和
 moveSumLengthY: number = 0; // Y方向移动距离总和
 moveStartTime: number = 0; // 触摸开始时间
 moveEndTime: number = 0; // 触摸结束时间
  1. 监听组件的onTouch方法，监听TouchType.Down，TouchType.Move, TouchType.Up事件，计算手指移动的位置，同时更新positionX和positionY,因为两个变量通过@State修饰，会刷新页面，实现悬浮框跟随者手指移动的效果，核心代码如下：
java 复制代码 
if (event.type === TouchType.Move) {
  //省略部分代码

  // 跟手过程，使用responsiveSpringMotion曲线
  animateTo({ curve: curves.responsiveSpringMotion() }, () => {
    // 减去半径，以使球的中心运动到手指位置
    this.positionX = event.touches[0].windowX - this.diameter / 2;
    this.positionY = event.touches[0].windowY - this.diameter / 2 - 120;
    Logger.info(TAG, `move end, animateTo x:${this.positionX}, y:${this.positionY}`);
  })
}
  1. 将positionX和positionY设置给组件的position(x,y)方法：

全部源码

dart 复制代码 
import { curves, display } from '@kit.ArkUI';
import { TitleBar } from '../../../../common/TitleBar'
import FloatingWindowComponent from './FloatingWindowComponent';
import Logger from '../../../../util/Logger';

const TAG = '[FloatingWindowPage]';

@Entry
@Component
struct FloatingWindowSample {
  private diameter: number = 120; // 触摸点相对偏移量
  @State positionX: number = 50; // 组件位置X
  @State positionY: number = 500; // 组件位置Y
  @State displayHalfWidth: number = 0; // 屏幕一半的宽
  @State displayHalfHeight: number = 0; // 屏幕一半的高
  @State moveStartX: number = 0; // X方向起始点
  @State moveStartY: number = 0; // Y方向起始点
  @State moveEndX: number = 0; // X方向终点
  @State moveEndY: number = 0; // Y方向终点
  @State moveSumLengthX: number = 0; // X方向移动距离总和
  @State moveSumLengthY: number = 0; // Y方向移动距离总和
  @State moveStartTime: number = 0; // 触摸开始时间
  @State moveEndTime: number = 0; // 触摸结束时间

  aboutToAppear() {
    display.getAllDisplays((err, data) => {
      // 拿到屏幕宽高的一半，作为判断基准值
      this.displayHalfWidth = data[0].width / 2;
      this.displayHalfHeight = data[0].height / 2;
      // 将拿到的px转为vp
      Logger.info(TAG, `aboutToAppear getAllDisplays data 1 width:${this.displayHalfWidth}, height:${this.displayHalfHeight}`);
      this.displayHalfWidth = px2vp(this.displayHalfWidth);
      this.displayHalfHeight = px2vp(this.displayHalfHeight);
      Logger.info(TAG, `aboutToAppear getAllDisplays data 2 width:${this.displayHalfWidth}, height:${this.displayHalfHeight}`);
    })
  }

  build() {
    Row() {
      Column() {
        TitleBar({ title: $r('app.string.Floating_window') })
          .id('target')
        Row() {
          Row() {
            FloatingWindowComponent()
          }
          .id('floatingWindowComponent')
          .width(80)
          .height(80)
          .position({ x: this.positionX, y: this.positionY })
          .onTouch((event: TouchEvent) => {
            if (event.type === TouchType.Down) {
              this.moveStartX = event.touches[0].windowX; // 按下时获取X坐标初始值
              this.moveStartY = event.touches[0].windowY; // 按下时获取Y坐标初始值
              this.moveStartTime = Date.now(); // 按下时开始时间
              this.moveSumLengthX = 0; // 按下时初始化x方向移动距离
              this.moveSumLengthY = 0; // 按下时初始化y方向移动距离
            }
            if (event.type === TouchType.Move) {
              this.moveEndX = event.touches[0].windowX; // X方向移动的当前位置
              this.moveEndY = event.touches[0].windowY; // Y方向移动的当前位置
              this.moveSumLengthX += Math.abs(this.moveEndX - this.moveStartX); // 每一次移动计算相对于上一次X方向位置的距离
              this.moveSumLengthY += Math.abs(this.moveEndY - this.moveStartY); // 每一次移动计算相对于上一次Y方向位置的距离
              this.moveStartX = this.moveEndX;
              this.moveStartY = this.moveEndY;
              Logger.info(TAG, `move ing, moveSumLengthX:${this.moveSumLengthX}, moveSumLengthY:${this.moveSumLengthY}`);

              // 跟手过程，使用responsiveSpringMotion曲线
              animateTo({ curve: curves.responsiveSpringMotion() }, () => {
                // 减去半径，以使球的中心运动到手指位置
                this.positionX = event.touches[0].windowX - this.diameter / 2;
                this.positionY = event.touches[0].windowY - this.diameter / 2 - 120;
                Logger.info(TAG, `move end, animateTo x:${this.positionX}, y:${this.positionY}`);
              })
            } else if (event.type === TouchType.Up) {//手指抬起时自动靠边处理
              this.moveEndTime = Date.now();
              let moveDiffTime = this.moveEndTime - this.moveStartTime; // 最后一秒移动的距离
              // 距离
              let s = Math.sqrt((this.moveSumLengthX * this.moveSumLengthX) + (this.moveSumLengthY * this.moveSumLengthY));
              // 时间
              let t = moveDiffTime;
              // 速度
              let v = s / t;
              Logger.info(TAG, `moveEnd, moveSumLengthX:${this.moveSumLengthX}, moveSumLengthY:${this.moveSumLengthY}, moveDiffTime:${moveDiffTime}`);
              Logger.info(TAG, `moveEnd, s:${s}, t:${t}, v:${v}`);

              // 离手时，使用springMotion曲线，且将移动时速度赋值给离手时速度
              animateTo({ curve: curves.springMotion(), tempo: v }, () => {
                if (this.positionX >= this.displayHalfWidth) {
                  // 如果划到右边，则定位至屏幕右边减去自身宽度80，再减去10留出间隙
                  this.positionX = this.displayHalfWidth * 2 - 90;
                } else {
                  this.positionX = 10;
                }
                if (this.positionY >= this.displayHalfHeight * 2 - 300) {
                  this.positionY = this.displayHalfHeight * 2 - 300;
                } else if (this.positionY <= 0) {
                  this.positionY = 10;
                }
                Logger.info(TAG, `touchUp, animateTo x:${this.displayHalfWidth}, y:100`);
              })
            }
          })
        }
        .width('100%')
        .height('92%')
      }
      .width('100%')
      .height('100%')
      .backgroundColor($r('app.color.background_shallow_grey'))
    }
    .width('100%')
    .height('100%')
  }
}

参考资料

源码传送门：

下载"语言-语言基础类库"，运行后进入：动画>专场动画>悬浮窗。即可看到运行效果。

HarmonyOS鸿蒙学习笔记（5）@State作用说明和简单案例
HarmonyOS鸿蒙学习笔记（17）获取屏幕宽高等属性
触摸事件

相关推荐
m0_644222618 分钟前
HarmonyOS开发探索：自定义键盘-webview
前端·华为·计算机外设·移动开发·harmonyos·鸿蒙开发
MobTech袤博科技27 分钟前
MobPush HarmonyOS NEXT 版本集成指南
华为·harmonyos
软通动力2 小时前
SwanLinkOS首批实现与HarmonyOS NEXT互联互通，软通动力子公司鸿湖万联助力鸿蒙生态统一互联
harmonyos·openharmony
tyrolin3 小时前
鸿蒙OS开发者高级学习第2课：自由流转（含习题答案）
学习·华为·harmonyos
chenhua10086114 小时前
鸿蒙本地签名不匹配问题
harmonyos
ConneyWu5 小时前
【HarmonyOS NEXT】鸿蒙如何动态添加组件（wrapBuilder：封装全局@Builder）官方推荐方式
华为·harmonyos·自定义组件
Android小贾6 小时前
HarmonyOS Next开发学习手册——文本输入 (TextInput/TextArea)
深度学习·学习·移动开发·harmonyos·openharmony·鸿蒙开发·应用开发
Android技术栈7 小时前
鸿蒙开发Ability Kit（程序访问控制）：【向用户申请单次授权】
程序员·移动开发·harmonyos·鸿蒙·openharmony·访问控制·鸿蒙开发
智汇云校乐乐老师8 小时前
讯方技术鸿蒙应用定制开发服务上架华为云商店
华为·华为云·harmonyos
千Q17 小时前
鸿蒙学习（二）
学习·华为·harmonyos
热门推荐
01Coze扣子平台完整体验和实践（附国内和国际版对比）02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）03【经验分享】Ubuntu22.04安装微信(linux官方版)04yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）05【立创EDA-PCB设计基础】6.布线铺铜实战及细节详解06浏览器插件——ModHeader 的分享和学习072025张宇考研数学，百度网盘视频课+36讲PDF讲义+真题08通达信神奇九转指标原理及选股公式，无未来函数，数字不消失09npm使用国内淘宝镜像（最新地址）1051-2 万字长文，深度解读端到端自动驾驶的挑战和前沿