electron的(maximize)最大化方法会导致头部白色横条以及四周大黑边

最新推荐文章于 2024-08-18 21:33:01 发布

AzeShinja

最新推荐文章于 2024-08-18 21:33:01 发布

阅读量1.2k

点赞数 2

分类专栏：踩坑文章标签： electron javascript 前端

本文链接：https://blog.youkuaiyun.com/AzeShinja/article/details/131642523

版权

踩坑专栏收录该内容

30 篇文章

订阅专栏

文章讲述了在使用Electron开发的应用中，遇到窗口最大化后四周出现黑边白边的异常情况。作者发现该问题是由于窗口拖拽后再最大化导致的，并提供了一个修复方案：监听窗口最大化事件，然后通过设置最大尺寸和窗口大小来模拟无边框最大化效果。修复代码包括设置最大尺寸、窗口大小以及居中位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考文章：https://www.w3cways.com/2505.html 感谢这位博主

我在使用win.maximize()后发现应用程序虽然最大化了，但是四周和顶部有一定宽度的黑边白边，在百度一段时间后没有发现其他人有这个问题 😔唉

必现步骤：只要拖拽应用程序窗口后再最大化就会一直出现，拖拽之前的最大化是无问题的
问题截图：
上边是5px左右的白边，左右为5px左右的黑边，目测是electron窗口的留白，因为我在这个黑边上可以进行窗口的拖拽和放大缩小。
在这里插入图片描述

修复逻辑：监听应用窗口最大化事件，在最大化事件中使用setSize等操作进行模拟最大化实现目标效果
修复代码：

  // 监听最大化后重新执行最大化逻辑，修复最大化后黑边的问题
  win.on('maximize', (e: any) => {
    e.preventDefault();
    setTimeout(() => {
      // 处理用户有多个屏幕的情况
      const currentCursor = screen.getCursorScreenPoint();
      const activeScreen = screen.getDisplayNearestPoint(currentCursor);
      const { width: screenWidth, height: screenHeight } = activeScreen.workAreaSize;
      win.setMaximumSize(screenWidth, screenHeight);
      win.getMaximumSize();
      win.setSize(screenWidth, screenHeight);
      win.center();
    }, 50);
  });