鸿蒙开发5.0【制作一个悬浮球】

鸿蒙系统小能手Mr.Li

于 2024-08-07 16:01:13 发布

阅读量860

点赞数 13

分类专栏：鸿蒙开发文章标签： harmonyos openharmony 鸿蒙鸿蒙系统程序员移动开发鸿蒙开发

本文链接：https://blog.csdn.net/2401_82772199/article/details/140990742

版权

鸿蒙开发专栏收录该内容

264 篇文章 3 订阅

订阅专栏

前言

程序需要在首页添加一个子功能的入口，这里采用的是在页面上添加一个悬浮球，点击悬浮球即可直接进入功能页面。

话不多说，直接开整…

思路

开发工具：DevEco Studio NEXT Developer Preview2
SdkV：4.1.0(11)

使用给一个视图添加onTouch事件，监听到触摸坐标进行记录，移动坐标时改变视图位置，在松手是判断当前视图是否超出了限制范围，如果超出了自动吸边

效果

开始

这里采用Image做为视图，对它的onTouch事件做对应的处理

build() {
  Column() {
    Image($r("app.media.moments_float_icon"))
      .size({ width: this.viewW, height: this.viewW })
      .onTouch((event: TouchEvent) => {

        switch (event.type) {
          // 按下是记录当前位置坐标
          case TouchType.Down: {
            this.px = event.touches[0].x
            this.py = event.touches[0].y
            break
          }

          // 移动时改变position
          case TouchType.Move: {
            this.gx = event.touches[0].windowX - this.px
            this.gy = event.touches[0].windowY - this.py
            break
          }

          // 松手时如果超出了屏幕，调整为吸附边框
          case TouchType.Up: {
            if (this.gx > this.screenW / 2) {
              this.gx = this.screenW - this.viewW
            } else {
              this.gx = 0
            }

            if (this.gy > this.screenH - this.viewW - 50) {
              this.gy = this.screenH - this.viewW - 50
            } else if (this.gy < 20) {
              this.gy = 20
            }
            break
          }
        }
      })
      .onClick(() => {
        this.floatOnClick ? this.floatOnClick() : null
      })
  }
  .position({ x: this.gx, y: this.gy })
  .borderRadius(this.viewW / 2)
}

调用

最后是调用关键在于position和zIndex
position：因为呈现悬浮态，所以要设置初始绝对坐标需要设置该视图的坐标
zIndex ：将悬浮视图置于最上层

XPFloatView({
  gx: "85%", gy: "90%", // 起始坐标位置
  floatOnClick: () => {
    ToastUtils.show("点击了按钮")
  }
})
 .position({ x: 0, y: 0 })// 这里要设置初始坐标，才能最好的保证呈现悬浮状态
 .zIndex(1) // 置于窗口最上层

最后呢，很多开发朋友不知道需要学习那些鸿蒙技术？鸿蒙开发岗位需要掌握那些核心技术点？为此鸿蒙的开发学习必须要系统性的进行。

而网上有关鸿蒙的开发资料非常的少，假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料，少走很多弯路，节省没必要的麻烦。由两位前阿里高级研发工程师联合打造的《鸿蒙NEXT星河版OpenHarmony开发文档》里面内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点

如果你是一名Android、Java、前端等等开发人员，想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。下面是鸿蒙开发的学习路线图。