鸿蒙-应用内悬浮窗

//悬浮窗工具类

import { window } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';
import { Logger } from '@mbbase/common-ui';
import * as FloatedWindowPage from './FloatedWindowPage'; // 导入命名路由页面

const TAG = '[FloatedWindowUtils]';

export interface FloatedWindowParams {
  width: number;
  height: number;
  x: number;
  y: number;
  backgroundColor?: string;
}

export class FloatedWindowUtils {
  public static showSubWindow(windowStage: window.WindowStage | undefined,
    subWindowParams: FloatedWindowParams) {
    if (!windowStage) {
      Logger.error(TAG, `windowStage is undefined.`);
      return;
    }

    windowStage.createSubWindow(FloatedWindowPage.subWindowName, (err, subWindow) => {
      try {
        subWindow.loadContentByName(FloatedWindowPage.entryName, (err: BusinessError) => {
          if (err.code) {
            Logger.error(TAG, `Failed to load the content. Cause: ${err.message}.`);
            return;
          }
          Logger.info('Succeeded in loading the content.');
          subWindow.setWindowBackgroundColor(subWindowParams.backgroundColor ?? '#00ffffff');
          subWindow.moveWindowTo(subWindowParams.x, subWindowParams.y);
          subWindow.resize(subWindowParams.width, subWindowParams.height)
          subWindow.setWindowTouchable(true);
          subWindow.showWindow();
          // subWindow.setWindowBackgroundColor(Color.Transparent.toString());
          subWindow.setWindowLayoutFullScreen(true);
        })
      } catch (err) {
        Logger.error('failed to create subWindow Cause:' + err);
      }
    })
  }

  public static async getFloatedWindow(): Promise<window.Window | undefined> {
    let windowStage = await AppStorage.get<window.WindowStage>('windowStage');
    if (!windowStage) {
      return undefined;
    }

    let subList = await windowStage.getSubWindow()


    for (let i = 0; i < subList.length; i++) {
      let aa: window.WindowProperties = subList[i].getWindowProperties()
      // if (aa.name == 'FloatedWindow') {
      return subList[i];
      // }
    }
    return undefined;
  }


  public static async destroySubWindow() {
    try {
      let subWindow: window.Window = await window.findWindow(FloatedWindowPage.subWindowName)
      if (!subWindow) {
        Logger.info('subWindow is undefined.');
        return;
      }
      subWindow.destroyWindow((err: BusinessError) => {
        if (err.code) {
          Logger.error(TAG, `Failed to destroy the window. Cause: ${err.message}.`);
          return;
        }
        AppStorage.set<window.Window>('subWindow', undefined);
        Logger.info('Succeeded in destroying the window.');
      });
    } catch (err) {
      Logger.error('Find subWindow failed. Cause:' + err);
    }
  }

  public static async moveSubWindow(x: number, y: number) {
    try {
      let subWindow: window.Window = window.findWindow(FloatedWindowPage.subWindowName)
      if (!subWindow) {
        Logger.info('subWindow is undefined.');
        return;
      }

      subWindow.moveWindowTo(x, y, (err: BusinessError) => {
        if (err.code) {
          Logger.error(TAG, `Failed to move the window. Cause: ${err.message}.`);
          return;
        }
        Logger.info('Succeeded in moving the window.', x, y);
      });
    } catch (err) {
      Logger.error('Find subWindow failed. Cause:' + err);
    }
  }

  public static async resizeSubWindow(width: number, height: number) {
    try {
      let subWindow: window.Window = window.findWindow(FloatedWindowPage.subWindowName)
      if (!subWindow) {
        Logger.info('subWindow is undefined.');
        return;
      }
      subWindow.resize(vp2px(width), vp2px(height), (err: BusinessError) => {
        if (err.code) {
          Logger.error(TAG, `Failed to change the window size. Cause: ${err.message}.`);
          return;
        }
        Logger.info('Succeeded in changing the window size.');
      })
    } catch (err) {
      Logger.error('Find subWindow failed. Cause:' + err);
    }
  }
}

 

//悬浮窗页面

import { display, window } from '@kit.ArkUI'
import { MBRouter } from '@mbbase/router'

export const entryName: string = 'FloatedWindowName';

export const subWindowName: string = 'FloatedWindow';

@Entry({ routeName: entryName })
@Component
export struct FloatedWindowPage {
  @State subWindow: window.Window = window.findWindow(subWindowName)
  @State @Watch('moveWindow') windowPosition: WindowPosition = {
    x: 40,
    y: 800
  }

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

  build() {
    Row() {
      Text('悬浮窗')
        .fontColor(Color.Red)
        .fontWeight(800)
        .onClick(() => {
          // MBRouter.push({ url: "ymm://test/debug" })
        })
    }.width('100%').height('100%')
    .gesture(
      PanGesture()
        .onActionStart(() => {
        })
        .onActionUpdate((event: GestureEvent) => {
          this.windowPosition.x += event.offsetX;
          this.windowPosition.y += event.offsetY;
          let top = 80;
          let bottom =
            display.getDefaultDisplaySync().height - this.subWindow.getWindowProperties().windowRect.height
              - top;
          if (this.windowPosition.y < top) {
            this.windowPosition.y = top;
          } else if (this.windowPosition.y > bottom) {
            this.windowPosition.y = bottom;
          }
          this.subWindow.moveWindowTo(this.windowPosition.x, this.windowPosition.y);
        })
        .onActionEnd((event: GestureEvent) => {
          let rect = this.subWindow.getWindowProperties().windowRect;

          if (this.windowPosition.x + rect.width / 2 >= display.getDefaultDisplaySync().width / 2) {
            this.windowPosition.x = display.getDefaultDisplaySync().width - rect.width;
          } else if (event.offsetX < display.getDefaultDisplaySync().width / 2) {
            this.windowPosition.x = 0;
          }
          let top = 80;
          let bottom =
            display.getDefaultDisplaySync().height - rect.height
              - top;
          if (this.windowPosition.y < top) {
            this.windowPosition.y = top;
          } else if (this.windowPosition.y > bottom) {
            this.windowPosition.y = bottom;
          }
          this.subWindow.moveWindowTo(this.windowPosition.x, this.windowPosition.y);
        })
    )
  }
}

export interface WindowPosition {
  x: number,
  y: number
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/938313.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

2024 年贵州技能大赛暨全省第二届数字技术应用职业技能竞赛“信息通信网络运行管理员”赛项--linux安全题

Linux操作系统渗透测试 Nmap -sS -p- ip 扫描 这题有俩种做法&#xff0c;一种用3306端口&#xff0c;另一种用48119端口 用48119端口是最简单的做法 nc 连接这个端口如何修改root密码 ssh连接 这样我们就成功的拿到root权限 1.通过本地PC中渗透测试平台Kali对服务器场景进…

网格剖分算法 铺装填充算法效果

1.原图 图&#xff1a;原图 2.OpenCV提取轮廓 图&#xff1a;提取轮廓线 3.计算凸包和最小外围轮廓 图&#xff1a;计算凸包和最小包围轮廓 4.网格剖分效果 图&#xff1a;网格剖分效果 5.铺装填充效果 图&#xff1a;铺装算法效果 原图--》提取轮廓线--》计算最小外包轮廓--》…

JMeter配置原件-计数器

一、面临的问题&#xff1a; 由于本人的【函数助手对话框】中counter计数器每次加2&#xff0c;且只显示偶数(如下图所示)&#xff0c;因此借助【配置原件-计数器】来实现计数功能。 如果有大佬知道解决方式&#xff0c;麻烦评论区解答一下&#xff0c;谢谢。 二、配置原件-c…

旋转花键VS传统花键:传动效率的革新

旋转花键与传统花键都是一种传动装置&#xff0c;用于将转动力传递给另一个轴。主要区别在于其结合了花键轴和滚珠丝杆的功能特点&#xff0c;通过滚珠在花键轴和花键套之间的滚动来实现旋转运动和直线运动的传递&#xff0c;以下是几个关键的差异点&#xff1a; 1、结构设计&a…

C++类模板的应用

template <class T> class mylist{ public: // 这是一个链表的节点 struct Link{ T val; Link* next; } 增 &#xff1a;insert(T val) 在链表中创建新节点&#xff0c;节点上保存的数据为 val 删&#xff1a;remove(T val) 移除链表中数据为 val 的节点 改: operator[](…

python学opencv|读取图像(十二)BGR图像转HSV图像

【1】引言 前述已经学习了opencv中图像BGR相关知识&#xff0c;文章链接包括且不限于下述&#xff1a; python学opencv|读取图像&#xff08;六&#xff09;读取图像像素RGB值_opencv读取灰度图-CSDN博客 python学opencv|读取图像&#xff08;七&#xff09;抓取像素数据顺利…

基于 mzt-biz-log 实现接口调用日志记录

&#x1f3af;导读&#xff1a;mzt-biz-log 是一个用于记录操作日志的通用组件&#xff0c;旨在追踪系统中“谁”在“何时”对“何事”执行了“何种操作”。该组件通过简单的注解配置&#xff0c;如 LogRecord&#xff0c;即可实现接口调用的日志记录&#xff0c;支持成功与失败…

如何在繁忙的生活中找到自己的节奏?

目录 一、理解生活节奏的重要性 二、分析当前生活节奏 1. 时间分配 2. 心理状态 3. 身体状况 4. 生活习惯 1. 快慢适中 2. 张弛结合 3. 与目标相符 三、掌握调整生活节奏的策略 1. 设定优先级 2. 合理规划时间 3. 学会拒绝与取舍 4. 保持健康的生活方式 5. 留出…

Docker:目录挂载、数据卷(补充二)

Docker&#xff1a;目录挂载、数据卷 1. 挂载2. 卷映射 1. 挂载 -v /app/nghtml:/usr/share/nginx/html /app/nghtml 是外部主机的地址 /usr/share/nginx/html 是内部容器的地址这里启动一个nginx&#xff0c;然后在后台运行时其命令为 (base) ➜ ~ docker run -d -p 80:80 …

新能源汽车大屏可视化第三次数据存储

任务&#xff1a; 将数据存放到temp.csv 链接&#xff1a; 1.排行页面 https://www.dongchedi.com/sales 2.参数页面 https://www.dongchedi.com/auto/params-carIds-x-9824 完善打印&#xff1a; 1. [{‘series_id’: 5952, ‘series_name’: ‘海鸥’, ‘image’: ‘https://…

Three.js资源-模型下载网站

在使用 Three.js 进行 3D 开发时&#xff0c;拥有丰富的模型资源库可以大大提升开发效率和作品质量。以下是一些推荐的 Three.js 模型下载网站&#xff0c;它们提供了各种类型的 3D 模型&#xff0c;适合不同项目需求。无论你是需要逼真的建筑模型&#xff0c;还是简单的几何体…

无人机故障安全模式设计逻辑与技术!

一、设计逻辑 故障检测与识别&#xff1a; 无人机系统需具备实时监测各项关键参数的能力&#xff0c;如电池电量、电机状态、传感器数据等。 当检测到参数异常或超出预设阈值时&#xff0c;系统应能迅速识别故障类型及其严重程度。 故障处理策略&#xff1a; 根据故障类型…

洞察:OpenAI 全球宕机,企业应该如何应对 LLM 的不稳定性?

北京时间12月12日上午&#xff0c;OpenAI证实其聊天机器人ChatGPT正经历全球范围的宕机&#xff0c;ChatGPT、Sora及API受到影响。 OpenAI 更新事故报告称&#xff0c;已查明宕机原因&#xff0c;正努力以最快速度恢复正常服务&#xff0c;并对宕机表示歉意。 此次 OpenAI 故障…

STM32F407ZGT6-UCOSIII笔记2:UCOSIII任务创建实验-Printf 函数卡住 UCOSIII 系统问题解决

今日简单编写熟悉一下UCOSIII系统的任务创建代码&#xff0c;理解一下OS系统&#xff1a; 并发现以及解决了 Printf 函数卡住 UCOSIII 系统问题解决 文章提供测试代码讲解、完整工程下载、测试效果图 目录 文件结构解释&#xff1a; 任务函数文件&#xff1a; 目前各个文件任…

CUDA从入门到精通(三)——CUDA编程示例

CUDA 编程简介 CUDA&#xff08;Compute Unified Device Architecture&#xff09;是由 NVIDIA 提供的一种并行计算平台和编程模型。它允许开发者利用 NVIDIA GPU 的并行计算能力&#xff0c;编写可以在 GPU 上高效运行的代码&#xff0c;从而加速计算密集型任务。 CUDA 通过…

【十进制整数转换为其他进制数——短除形式的贪心算法】

之前写过一篇用贪心算法计算十进制转换二进制的方法&#xff0c;详见&#xff1a;用贪心算法计算十进制数转二进制数&#xff08;整数部分&#xff09;_短除法求二进制-CSDN博客 经过一段时间的研究&#xff0c;本人又发现两个规律&#xff1a; 1、不仅仅十进制整数转二进制可…

舵机SG90详解

舵机&#xff0c;也叫伺服电机&#xff0c;在嵌入式开发中&#xff0c;舵机作为一种常见的运动控制组件&#xff0c;具有广泛的应用。其中&#xff0c;SG90 舵机以其高效、稳定的性能特点&#xff0c;成为了许多工程师和爱好者的首选&#xff0c;无论是航模、云台、机器人、智能…

如何为IntelliJ IDEA配置JVM参数

在使用IntelliJ IDEA进行Java开发时&#xff0c;合理配置JVM参数对于优化项目性能和资源管理至关重要。IntelliJ IDEA提供了两种方便的方式来设置JVM参数&#xff0c;以确保你的应用程序能够在最佳状态下运行。本文将详细介绍这两种方法&#xff1a;通过工具栏编辑配置和通过服…

跌倒数据集,5345张图片, 使用yolo,coco json,voc xml格式进行标注,平均识别率99.5%以上

跌倒数据集&#xff0c;5345张图片&#xff0c; 使用yolo&#xff0c;coco json&#xff0c;voc xml格式进行标注&#xff0c;平均识别率99.5%以上 &#xff0c;可用于某些场景下识别人是否跌倒或摔倒并进行告警。 数据集分割 训练组99&#xff05; 5313图片 有效集0&am…

nods.js之nrm安装及使用

nods.js之nrm安装及使用 一、简介二、安装 nrm与使用三、报错解决 一、简介 nrm 是 Node.js 的一个工具&#xff0c;用于管理和切换 npm 源&#xff08;Registry&#xff09;。它使得在不同的 npm 镜像源之间切换变得非常容易&#xff0c;尤其对于那些经常因为网络问题或速度原…