harmonyos Next 端的悬浮球实现,使用原生鸿蒙arkts

Zhang.jialei

已于 2024-12-02 11:01:10 修改

阅读量1.3k

点赞数 5

文章标签： harmonyos 华为

于 2024-11-21 19:57:22 首次发布

本文链接：https://blog.youkuaiyun.com/m0_37909265/article/details/143952854

版权

文章目录

原生鸿蒙实现的悬浮球，简单好用，像使用一个ImageView一样去使用他.
使用harmonyos Next 5.0，纯血鸿蒙

🌞功能

功能	支持
自定义图片	√
自定义悬浮球尺寸（圆角）	√
自动贴边（自动左右贴边）	√
支自动半隐藏（先贴边再隐藏）	√
隐藏/显示动画	√
自定义点击响应	√

🌞效果图

不上效果图的都是流氓

在这里插入图片描述

🌞完整demo

gitee地址： https://gitee.com/zhangjialei2/floatball4-harmony-os
github地址： https://github.com/ZhangJiaLei123/floatball4HarmonyOS

🌞安装方式

ohpm i @blxt/floatball

🌞属性详解

参数	必须参数	介绍	默认值
image: Resource	√	图片资源	–
radius: number	×	悬浮按钮半径	25
opacityHide: number	×	半隐藏后的透明度	1.0
opacityDefault: number	×	默认透明度	1.0
marginSart : number	×	从隐藏恢复到显示状态的默认边距	25
aotoHide ：boolean	×	开启自动隐藏	true
aotoHideTime: number	×	自动隐藏的超时时间	3000
aotoEdging : boolean	×	自动贴边	true
enableOutEdging: boolean	×	拖拽时允许超过边界	true
enableDragWhenHidden: boolean	×	允许隐藏时直接拖动，如果false，则需要先点击一下，从隐藏状态显示后，才能继续拖动	true
aotoEdgingTime: number	×	自动贴边的超时时间	3000
onClickEvent?: () => boolean;	×	点击事件传递, 如果返回false，则阻止后续事件	–
onEdgingEvent?: () => boolean;	×	贴边事件传递, 如果返回false，则阻止后续事件	–
onHideEvent?: () => boolean;	×	半隐藏事件传递, 如果返回false，则阻止后续事件	–
onShowEvent?: () => boolean;	×	显示事件传递, 如果返回false，则阻止后续事件	–

🌞示例代码

 import { FloatBall } from '@blxt/floatball';
import { promptAction } from '@kit.ArkUI';
import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct Index {
  controller: WebviewController = new webview.WebviewController();

  build() {
    Stack() {
      // 一个webview，充当用户业务视图
      Web({ src: "www.baidu.com", controller: this.controller })
        .domStorageAccess(true)
        .onlineImageAccess(true)
        .imageAccess(true)
        .zoomAccess(false)                             // 禁止缩放
        .javaScriptAccess(true)                        // 启用js交互
        .backgroundColor(Color.White)                  // 背景
        .width('100%')

      // 悬浮按钮
      FloatBall({
        image: $r('app.media.startIcon'),             // 图片资源
        radius: 25,                                   // 悬浮按钮半径
        marginSart: 25,                               // 从隐藏恢复到显示状态的默认边距
        aotoEdging: true,                             // 开启自动贴边
        aotoHide: true,                               // 开启自动隐藏
        opacityHide: 0.5,                             // 半隐藏后的透明度
        onClickEvent: (): boolean => {                // 点击事件
          promptAction.showToast({ message: '点击了悬浮球' });
          if(this.controller.accessStep(-1)){
            this.controller.backward(); // 返回上一个web页
          }
          return true
        },
        onEdgingEvent: (): boolean => {
          promptAction.showToast({ message: '我贴边了' });
          return true
        },
        onHideEvent: (): boolean => {
          promptAction.showToast({ message: '我隐藏了' });
          return true
        },
        onShowEvent: (): boolean => {
          promptAction.showToast({ message: '我显示了' });
          return true
        }
      })
        // .touchable(false)                         // 这个过期了，.hitTestBehavior(HitTestMode.None)代替
        .hitTestBehavior(HitTestMode.None)           // 重要用于点击事件穿透，不然无法点击Web内容
        .width("100%")
        .height("100%")
    }
    .height('100%')
    .width('100%')
  }
}