HarmonyOS 鸿蒙Next中PC端如何实现类似QQ微信这样的窗口控制？

HarmonyOS 鸿蒙Next中PC端如何实现类似QQ微信这样的窗口控制？

需求是在登录时，窗口是个窗口类比PC端的QQ窗口大小

在登录成功后会变成华为PC系统默认大小，上方标题栏可支持全屏，在退出登录时不管多大窗口即使全屏都要恢复至登录的小窗口大小页面

问题：在全屏时如果退出登录，此时非全屏状态下没法恢复至设定的登录窗口大小

11 回复

开发者您好，可以尝试在返回登陆界面时，调用Window.getGlobalRect获取此时的窗口宽高并保存，在登录成功进入主窗口时调用Window.resize将窗口改变为保存的窗口宽高实现。

示例代码如下：

// 退出登录时调用getGlobalRect获取窗口宽高，并保存在AppStorage
windowStage.getMainWindow().then((windowClass) => {
  let windowRect = windowClass.getGlobalRect()
  AppStorage.setOrCreate("windowHeight", windowRect.height)
  AppStorage.setOrCreate("windowWidth", windowRect.width)
})

// 登录成功时调用resize改变窗口大小
windowStage.getMainWindow().then((windowClass) => {
  let windowWidth = AppStorage.get("windowWidth")
  let windowHeight = AppStorage.get("windowHeight")
  windowClass.resize(windowWidth, windowHeight)
})

更多关于HarmonyOS 鸿蒙Next中PC端如何实现类似QQ微信这样的窗口控制？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


太厉害了

不错

学习了

还不错

【背景知识】

悬浮窗是影音娱乐类应用的典型场景之一，如用户在浏览应用内不同页面时，需通过悬浮窗查看歌曲信息，控制歌曲的播放、暂停等。

本示例基于子窗口实现应用内悬浮窗，通过Window实现悬浮窗的样式切换与拖动、贴边效果。

【问题分析】

本贴所咨询的这个窗口控制功能可以参考悬浮窗的相关技术进行实现，参考链接如下：

悬浮窗效果

楼主参考一下异形窗口的实现：PC/2in1异形窗口-窗口与屏幕管理-应用框架 - 华为HarmonyOS开发者

自定义一个小窗

试了，好像不太行

要实现类似QQ的窗口控制逻辑，楼主需结合窗口动态调整、全屏切换和状态监听：

在module.json5中定义窗口的最小和最大尺寸：

{
  "abilities": [{
    "minWindowWidth": 400, // 登录窗口最小宽度
    "minWindowHeight": 600, // 登录窗口最小高度
    "maxWindowWidth": 400, // 登录窗口固定宽度
    "maxWindowHeight": 600, // 登录窗口固定高度
    "supportWindowMode": ["fullscreen"] // 支持全屏模式
  }]
}

通过@kit.Window模块的接口控制窗口尺寸和全屏状态，登录成功后调整至默认大小：

import window from '@kit.Window';

// 获取当前窗口实例
const win = window.getLastWindow(this.context);

// 调整至默认尺寸，这里以1280x800为例
win.resize(1280, 800, (err) => {
  if (!err) {
    // 允许全屏操作
    win.setFullScreen(true); // 根据需求开启全屏能力
  }
});

退出登录时恢复小窗口：

// 退出登录事件处理函数
async function handleLogout() {
  const win = window.getLastWindow(this.context);

  // 先退出全屏（如果当前是全屏状态）
  const isFullscreen = await win.isFullScreen();
  if (isFullscreen) {
    win.setFullScreen(false, (err) => {
      if (!err) {
        // 全屏关闭后调整至登录窗口尺寸
        win.resize(400, 600);
      }
    });
  } else {
    // 直接调整尺寸
    win.resize(400, 600);
  }
}

通过窗口状态监听确保全屏切换时的逻辑一致性：

// 监听窗口状态变化
win.on('windowStatusChange', (status) => {
  if (status === window.WindowStatus.WINDOW_STATUS_FULLSCREEN) {
    // 全屏状态下的特殊处理（隐藏标题栏）
  } else if (status === window.WindowStatus.WINDOW_STATUS_NORMAL) {
    // 恢复窗口模式后的处理
  }
});

在HarmonyOS Next中实现PC端窗口控制，需使用ArkUI的窗口管理能力。通过WindowStage和Window模块创建多窗口应用，设置窗口属性如大小、位置。使用Window的moveTo/resizeTo方法调整窗口，show/hide控制显隐。监听窗口事件用on(‘windowStageEvent’)。窗口层级管理通过setWindowLayoutFullScreen等API实现。模态窗口用Window的showDialog方法。

在HarmonyOS Next中实现窗口大小控制可以通过WindowStage和Window模块实现。以下是关键代码示例：

  1. 登录窗口设置小尺寸：
import window from '@ohos.window';

// 设置登录窗口大小
async function setLoginWindowSize(windowStage: window.WindowStage) {
  const windowClass = await windowStage.getMainWindow();
  await windowClass.resetSize(800, 600); // 类似QQ的窗口尺寸
  await windowClass.setWindowLayoutFullScreen(false); // 禁用全屏
}
  1. 登录成功后恢复默认尺寸：
async function setDefaultWindowSize(windowStage: window.WindowStage) {
  const windowClass = await windowStage.getMainWindow();
  await windowClass.resetSize(); // 恢复系统默认尺寸
  await windowClass.setWindowLayoutFullScreen(true); // 允许全屏
}
  1. 退出登录时强制恢复小窗口：
async function onLogout(windowStage: window.WindowStage) {
  const windowClass = await windowStage.getMainWindow();
  await windowClass.setWindowLayoutFullScreen(false); // 先退出全屏
  await windowClass.resetSize(800, 600); // 强制恢复登录窗口尺寸
}

关键点：

  • 使用resetSize()方法控制窗口尺寸
  • 全屏状态改变前需要先调用setWindowLayoutFullScreen(false)
  • 建议在Ability的onWindowStageCreate生命周期中初始化窗口设置

注意处理窗口状态变化时的回调，确保窗口尺寸变更能正确执行。

回到顶部