HarmonyOS 鸿蒙Next中页面悬浮球组件

这是一个悬浮球的组件，支持手势拖动 松手吸附效果

interface ballPositionModel {
  x: number;
  y: number;
}

@Component
export struct FloatingBallView {
  @Prop ballType: number;
  @Prop isDraggable: boolean = true; //是否可拖动
  @Prop bottomTitle: string
  @State ballPosition: ballPositionModel = { x: 0, y: 0 }; // 初始位置
  // 新增回调属性
  onBallClick?: (ballType: number) => void;
  private startLeft: number = 0 //开始移动那一刻悬浮按钮距离窗口左边距离
  private startTop: number = 0 //开始移动那一刻悬浮按钮距离窗口顶部距离
  private startX: number = 0 //开始移动触摸点x坐标，相对窗口左上角
  private startY: number = 0 //开始移动触摸点y坐标，相对窗口左上角
  private winWidth: number = 0 //窗口宽度
  private winHeight: number = 0 //窗口高度
  private radius: number = 25 //悬浮按钮半径，单位vp
  @State statusHeight: number = 0 //状态栏高度
  @State bottomAvoidAreaHeight: number = 0 //手机底部规避区域高度

  aboutToAppear(): void {
    this.getWindowInfo()
  }

  build() {
    Stack({ alignContent: Alignment.BottomEnd }) {
      // 根据类型渲染不同悬浮球
      if (this.ballType === 0) {
        Column() {
          Image($r('app.media.default_avatar')).width('23').height('23')
          Text(this.bottomTitle).fontSize(12).margin({ top: 5 })
        }.width(40).height(40).borderRadius(5)
      } else if (this.ballType === 1) {
        Column() {
          Image($r('app.media.default_avatar')).width(40).height(40).borderRadius(20)
          Image($r('app.media.default_avatar')).width(40).height(40).borderRadius(20)
        }.width(40)
      } else if (this.ballType == 3) {
        Image($r('app.media.default_avatar')).width(40).height(40).borderRadius(20)
      }
    }
    .position(this.ballPosition)
    // .borderRadius(20)
    // .clip(true)
    .onTouch((event: TouchEvent) => {
      this.onPanelTouch(event);
    })
    .onClick(() => this.handleClick())
  }

  private onPanelTouch(event: TouchEvent) {
    if (this.isDraggable) {
      //手指按下记录初始触摸点坐标、悬浮按钮位置
      if (event.type === TouchType.Down) {
        this.startX = event.touches[0].windowX
        this.startY = event.touches[0].windowY
        this.startLeft = this.ballPosition.x
        this.startTop = this.ballPosition.y
      }

      //手指拖动
      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.ballPosition.x = 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.ballPosition.y =
          Math.min(this.winHeight - 2 * this.radius - this.bottomAvoidAreaHeight - this.statusHeight, curTop)
      }
      //松开手指
      else if (event.type == TouchType.Up) {
        if (this.ballType !== 3) {
          animateTo({ duration: 500 }, () => {
            if (this.ballPosition.x > this.winWidth / 2) {
              this.ballPosition.x = this.winWidth - 50

            } else {
              this.ballPosition.x = 0
            }
          })
        }

      }
    }
  }

  private handleClick() {
    // 调用回调方法并传递参数
    if (this.onBallClick) {
      this.onBallClick(this.ballType)
    }
    // switch (this.ballType) {
    //   case 0: // 外卖秒送切换
    //     router.push({ url: 'pages/DeliveryPage' });
    //     break;
    //   case 2: // 拨打电话
    //     import { phone } from '@kit.TelephonyKit';
    //     phone.call('123456789');
    //     break;
    //   case 3: // 跳精灵聊天
    //     router.push({ url: 'pages/ChatPage' });
    //     break;
    // }
  }

  //获取窗口尺寸信息
  private 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)

        //设置初始位置位于屏幕右下角，演示设置可根据实际调整
        if (this.ballType == 1 || this.ballType == 0) {
          this.ballPosition.x = this.winWidth - 50
          this.ballPosition.y = this.winHeight * 0.8
        } else if (this.ballType == 2) {
          this.ballPosition.x = this.winWidth - 50
          this.ballPosition.y = this.winHeight * 0.8
        } else if (this.ballType == 3) {
          // todo 每次进入页面都会重新加载位置
          this.ballPosition.x = this.winWidth - 50
          this.ballPosition.y = this.winHeight * 0.8 - 50
        }
      }
    })
  }
}

组件使用示例

FloatingBallView({
  ballType: UnDraggableFloatingUtil.BallType.STATIC_SERVICE,
  isDraggable: false,
  // 添加点击回调
  onBallClick: (ballType) => {
    console.log('点击类型:', ballType)
  }
})