可移动悬浮窗,希望可以做到类似小白点的功能。

应用场景中,希望可以做到类似小白点的功能。

希望窗口可以提供一个悬浮窗,支持拖拽,在不遮挡应用显示的情况下完成对应的操作。

HarmonyOS
2024-05-26 14:14:09
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
xuqing_2000

使用的核心API

PanGesture().onActionUpdate()

核心代码解释

核心代码解释

创建了子窗口之后,需要对子窗口的初始位置进行记录。在拖拽的过程中需要对窗口的位置使用‘+=’将偏移位置进行赋值传递。

//FloatContent.ets 
import window from '@ohos.window'; 
 
interface Position { 
  x: number, 
  y: number 
} 
 
@Entry 
@Component 
struct FloatContent { 
  @State message: string = 'float window' 
  private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.All }); 
  // 创建位置变量,并使用@Watch监听,变量发生变化调用moveWindow方法移动窗口 
  @State @Watch("moveWindow") windowPosition: Position = { x: 0, y: 0 }; 
  floatWindow: window.Window = window.findWindow("floatWindow") 
 
  // 通过悬浮窗名称“floatWindow”获取到创建的悬浮窗 
  aboutToAppear() { 
    this.floatWindow = window.findWindow("floatWindow") 
    this.floatWindow.setPreferredOrientation(window.Orientation.LANDSCAPE) 
  } 
 
  // 将悬浮窗移动到指定位置 
  moveWindow() { 
    this.floatWindow.moveWindowTo(this.windowPosition.x, this.windowPosition.y); 
  } 
 
  build() { 
    Row() { 
      Column() { 
        Text(this.message) 
          .fontSize(30) 
          .fontColor(Color.White) 
          .fontWeight(FontWeight.Bold) 
          .gesture( 
            LongPressGesture() 
              .onAction(() => { 
                let windowStage = AppStorage.get("windowStage") as window.WindowStage; 
                windowStage.createSubWindow("next",(err,win)=>{ 
                  win.setUIContent("pages/Page7"); 
                  win.moveWindowTo(this.windowPosition.x+500,this.windowPosition.y) 
                  win.resize(200,200); 
                  win.showWindow(); 
                }) 
              }) 
              .onActionEnd(()=>{ 
                window.findWindow("next").destroyWindow() 
              }) 
          ) 
 
      } 
      .width('100%') 
    } 
    .borderRadius(500) 
    .height('100%') 
    .gesture( 
      // 绑定PanGesture事件,监听拖拽动作 
      PanGesture(this.panOption) 
        .onActionStart((event: GestureEvent) => { 
          console.info('Pan start'); 
        })// 发生拖拽时,获取到触摸点的位置,并将位置信息传递给windowPosition 
        .onActionUpdate((event: GestureEvent) => { 
          this.windowPosition.x += event.offsetX; 
          this.windowPosition.y += event.offsetY; 
        }) 
        .onActionEnd(() => { 
          console.info('Pan end'); 
        }), 
    ) 
    .border({ 
      style: BorderStyle.Dotted 
    }) 
    .backgroundColor("#E8A49C") 
  } 
}

实现效果

悬浮窗可以自由拖动。

注明适配的版本信息

IDE版本:4.1.3.500

SDK版本:OpenHarmony 4..5.6

分享
微博
QQ
微信
回复
2024-05-27 17:35:37
相关问题
如何实现悬浮桌面穿透
334浏览 • 1回复 待解决
使用悬浮和端内want唤醒APP
438浏览 • 1回复 待解决
横屏应用如何适配华为悬浮?
1000浏览 • 1回复 待解决
基于子窗口实现应用内悬浮
146浏览 • 1回复 待解决
在hsp子模块中如何加载悬浮页面
457浏览 • 1回复 待解决
如何实现 app 内置全局悬浮功能
547浏览 • 1回复 待解决
悬浮球能调用锁屏功能吗?
49浏览 • 1回复 待解决
如何实现类似插槽功能
561浏览 • 1回复 待解决
如何实现类似.9 图功能
448浏览 • 1回复 待解决
如何生成一个可以交互移动子窗口
268浏览 • 1回复 待解决
鸿蒙-如何实现类似于HOME键功能
9373浏览 • 2回复 待解决
JS如开发一个横向拖动表格
4671浏览 • 1回复 待解决
实况文档是否发布?
897浏览 • 1回复 待解决