HarmonyOS 鸿蒙Next中如何实现悬浮球

如果想跨页面则建议用overlayManager去实现该功能

悬浮窗触摸核心代码：

import { curves } from '@kit.ArkUI';
import display from '@ohos.display';

export class Constants {
  static readonly PAGE_PADDING: number = 12; // 页面内容内边距，用于悬浮窗位置计算
  static readonly FLOAT_WINDOW_WIDTH: number = 50; // 悬浮窗宽度
  static readonly FLOAT_WINDOW_HEIGHT: number = 50; // 悬浮窗高度
  static readonly INIT_POSITION_Y: number = 300; // 悬浮窗相对父容器左上角的Y坐标初始值
}

/**
 * 使用悬浮窗组件样例
 *
 * 核心组件:
 * 1. FloatWindowView
 *
 * 实现步骤：
 *  1. 悬浮窗组件使用Stack嵌套其他布局实现，使用属性position绝对定位使组件悬浮位置
 *  2. 初始化时悬浮窗的position属性设置x和y，让悬浮窗靠右
 *  3. 在渲染前获取屏幕的宽高（使用overlayManager承载时，悬浮窗的坐标是从屏幕最中间开始）
 *  4. 悬浮窗组件添加onTouchEvent回调，在手指按下时保存触摸点在窗口中的坐标，用于移动时悬浮窗位置的计算
 *  5. 手指移动时，获取触摸点相对于应用窗口左上角的X和Y坐标，通过计算设置悬浮窗的position坐标实现拖拽，使用默认参数的弹性跟手动画曲线curves.responsiveSpringMotion结合animateTo实现跟手动画效果
 *  6. 手指抬起时，通过判断悬浮窗中心在水平方向位于父组件中心的左侧或右侧设置悬浮窗靠左或靠右，如果悬浮窗超出内容区上下边界，则将悬浮窗设置在边界位置，使用curves.springMotion弹性动画曲线实现吸附边界时的弹性动画效果
 */
@Component
export struct FloatWindowMainPage {
  @State screenWidth: number = 0;
  @State screenHeight: number = 0;

  build() {
    Stack({ alignContent: Alignment.TopEnd }) {
      // 悬浮窗视图必须是顶层显示
      FloatWindowView({ containerWidth: this.screenWidth, containerHeight: this.screenHeight })
    }
    .width(Constants.FLOAT_WINDOW_WIDTH)
    .height(Constants.FLOAT_WINDOW_HEIGHT)
  }

  aboutToAppear(): void {
    let data = display.getDefaultDisplaySync();
    this.screenWidth = px2vp(data.width);
    this.screenHeight = px2vp(data.height);
  }
}

@Component
struct FloatWindowView {
  // 悬浮窗相对于父组件位置信息
  @State pos: Position = { y: Constants.INIT_POSITION_Y, x: Constants.PAGE_PADDING };
  @Link containerWidth: number;
  @Link containerHeight: number;
  // 拖拽移动开始时悬浮窗在窗口中的坐标，每次移动回调触发时更新
  private windowStartX: number = 0;
  private windowStartY: number = 0;

  aboutToAppear(): void {
    this.pos.y = Constants.INIT_POSITION_Y - this.containerHeight / 2
    this.pos.x = Constants.PAGE_PADDING + Constants.FLOAT_WINDOW_WIDTH / 2 - this.containerWidth / 2
  }

  /**
   * 触摸回调，悬浮窗跟手和贴边动画
   */
  onTouchEvent(event: TouchEvent): void {
    switch (event.type) {
      case TouchType.Down: {
        // 获取拖拽开始时悬浮窗在窗口中的坐标
        this.windowStartX = event.touches[0].screenX;
        this.windowStartY = event.touches[0].screenY;
        break;
      }
      case TouchType.Move: {
        const windowX: number = event.touches[0].screenX;
        const windowY: number = event.touches[0].screenY;
        // TODO：知识点：跟手动画，推荐使用默认参数的弹性跟手动画曲线curves.responsiveSpringMotion。
        animateTo({ curve: curves.responsiveSpringMotion() }, () => {
          // 控制悬浮窗坐标的位置
          this.pos.x = this.pos.x as number + (windowX - this.windowStartX);
          this.pos.y = this.pos.y as number + (windowY - this.windowStartY);
          this.windowStartX = windowX;
          this.windowStartY = windowY;
        })
        break;
      }
      case TouchType.Up: {
        // TODO：知识点：通过判断悬浮窗在父组件中的位置，设置悬浮窗贴边，使用curves.springMotion()弹性动画曲线，可以实现阻尼动画效果
        animateTo({ curve: curves.springMotion() }, () => {
          // // 判断悬浮窗中心在水平方向是距离中心点位置，根据结果设置靠左或靠右
          if (this.pos.x as number > 0) {
            this.pos.x = this.containerWidth / 2 - Constants.PAGE_PADDING - Constants.FLOAT_WINDOW_WIDTH / 2;
          } else {
            this.pos.x =  Constants.PAGE_PADDING + Constants.FLOAT_WINDOW_WIDTH / 2 - this.containerWidth / 2 ;
          }
          // 判断悬浮窗是否超出内容区上下边界，根据结果将悬浮窗设置在边界位置
          if (this.pos.y as number < Constants.PAGE_PADDING - this.containerHeight / 2 + Constants.FLOAT_WINDOW_HEIGHT / 2) {
            this.pos.y = Constants.PAGE_PADDING - this.containerHeight / 2 + Constants.FLOAT_WINDOW_HEIGHT / 2;
          } else if (this.pos.y as number >
            this.containerHeight / 2 - Constants.FLOAT_WINDOW_HEIGHT / 2 - Constants.PAGE_PADDING) {
            this.pos.y = this.containerHeight / 2 - Constants.FLOAT_WINDOW_HEIGHT - Constants.PAGE_PADDING -
              Constants.FLOAT_WINDOW_HEIGHT / 2;
          }
        })
        break;
      }
      default: {
        break;
      }
    }
  }

  build() {
    Image($r('app.media.startIcon'))
      .clip(true)
      .borderRadius(25)
      .width(Constants.FLOAT_WINDOW_WIDTH)
      .height(Constants.FLOAT_WINDOW_HEIGHT)
      .position(this.pos)
      .onClick(() => {
      })
      .onTouch((event: TouchEvent) => {
        this.onTouchEvent(event);
      })
  }
}

主界面使用代码：

import { ComponentContent, OverlayManager } from '@kit.ArkUI';
import { FloatWindowMainPage } from '../FloatWindowMainPage';

class Params {
  text: string = "";
  offset: Position;

  constructor(text: string, offset: Position) {
    this.text = text;
    this.offset = offset;
  }
}

@Builder
function builderText(params: Params) {
  FloatWindowMainPage()
    .height(50)
    .width(50)
}

@Entry
@Component
struct OverlayExample {
  @State message: string = 'ComponentContent';
  private uiContext: UIContext = this.getUIContext();
  private overlayNode: OverlayManager = this.uiContext.getOverlayManager();
  componentContent = new ComponentContent(
    this.uiContext, wrapBuilder<[Params]>(builderText),
    new Params(this.message, { x: 0, y: 0 })
  );
  build() {
    Column() {
      Button("添加悬浮球").onClick(() => {
        this.overlayNode.addComponentContent(this.componentContent,0);
      })
      Button("删除悬浮球" ).onClick(() => {
        this.overlayNode.removeComponentContent(this.componentContent);
      })
      Button("显示悬浮球" ).onClick(() => {
        this.overlayNode.showComponentContent(this.componentContent);
      })
      Button("隐藏悬浮球").onClick(() => {
        this.overlayNode.hideComponentContent(this.componentContent);
      })
    }
    .width('100%')
    .height('100%')
  }
}

该实现好处是跨页面展示也可以展示之前的悬浮窗