HarmonyOS鸿蒙Next中实现机器人图片悬浮在app上面并且可随意拖动

HarmonyOS鸿蒙Next中实现机器人图片悬浮在app上面并且可随意拖动 需求是实现机器人图片悬浮在app上面，并且可随意拖动

3 回复

实现悬浮窗功能

悬浮窗拖动 Demo

import window from '@ohos.window';

// 悬浮窗加载页面代码
interface Position {
  x: number,
  y: number
}

@Entry
@Component
struct FloatContent {
  @State message: string = '悬浮窗';
  private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.All });
  @State @Watch("moveWindow") windowPosition: Position = { x: 0, y: 0 };
  floatWindow: window.Window = window.findWindow("floatWindow");

  build() {
    Row() {
      Text(this.message)
    }
    .width('100%')
    .height('100%')
    .gesture(PanGesture(this.panOption)
      .onActionStart((event: GestureEvent) => {
        console.info('Pan start');
      })
      .onActionUpdate((event: GestureEvent) => {
        this.windowPosition.x += event.offsetX;
        this.windowPosition.y += event.offsetY;
      })
      .onActionEnd(() => {
        console.info('Pan end');
      })
    )
    .border({ style: BorderStyle.Dotted })
    .backgroundColor(Color.Yellow);
  }

  moveWindow() {
    this.floatWindow.moveWindowTo(this.windowPosition.x, this.windowPosition.y);
  }

  aboutToAppear() {
    this.floatWindow = window.findWindow("floatWindow");
  }
}

参考链接

更多关于HarmonyOS鸿蒙Next中实现机器人图片悬浮在app上面并且可随意拖动的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中实现机器人图片悬浮在App上并且可随意拖动，可以通过使用WindowManager和Component来实现。首先，创建一个Image组件用于显示机器人图片。然后，使用WindowManager将该图片添加到系统窗口中，使其能够悬浮在其他App之上。通过监听触摸事件，更新图片的位置以实现拖动效果。

具体步骤如下：

  1. 创建Image组件：在布局文件中定义一个Image组件，设置机器人图片资源。

  2. 使用WindowManager：通过WindowManager的addWindow方法，将Image组件添加到系统窗口中。需要设置窗口的LayoutParams，包括窗口类型为TYPE_APPLICATION_OVERLAY，使其能够悬浮在其他App之上。

  3. 处理触摸事件：为Image组件设置OnTouchListener，监听触摸事件。在onTouch方法中，根据触摸点的位置更新Image组件的坐标，实现拖动效果。

  4. 更新窗口位置：在拖动过程中，通过WindowManager的updateViewLayout方法，实时更新Image组件的位置。

示例代码片段如下：

import window from '@ohos.window';
import image from '@ohos.image';

let windowManager = window.getWindowManager();
let imageComponent = image.createImageComponent();
let layoutParams = new window.WindowManager.LayoutParams();
layoutParams.type = window.WindowType.TYPE_APPLICATION_OVERLAY;

windowManager.addWindow(imageComponent, layoutParams);

imageComponent.setOnTouchListener((event) => {
    let x = event.getX();
    let y = event.getY();
    layoutParams.x = x;
    layoutParams.y = y;
    windowManager.updateViewLayout(imageComponent, layoutParams);
    return true;
});

通过以上步骤，可以在HarmonyOS鸿蒙Next中实现机器人图片悬浮在App上并且可随意拖动。

在HarmonyOS鸿蒙Next中，可以通过以下步骤实现机器人图片悬浮在App上并随意拖动：

  1. 创建悬浮窗：使用WindowManager创建悬浮窗，并设置TYPE_APPLICATION_OVERLAY类型，使其悬浮在其他应用之上。
  2. 添加图片：在悬浮窗中加载机器人图片，使用ImageView控件显示图片。
  3. 实现拖动：通过监听触摸事件（OnTouchListener），计算手指移动的偏移量，动态更新悬浮窗的位置，实现拖动效果。
  4. 权限配置：在AndroidManifest.xml中声明SYSTEM_ALERT_WINDOW权限，并在运行时动态请求该权限。

通过这些步骤，即可实现机器人图片悬浮且可随意拖动的功能。

回到顶部