Electron 11 Win10 中解决全屏透明窗口不透明问题

2024-02-05 19:23:04

在 Electron 11 的 Windows 10 系统中，您可能会遇到这样的问题：设置了透明窗口后，小窗口下的内容确实是透明的，但是当您将窗口的高度和宽度设置为等于或大于显示屏尺寸时，窗口就会变得不透明。这可能会给您带来困扰，因为它违背了使用透明窗口的初衷。

幸运的是，有一个简单的解决方法可以解决这个问题：设置 fullscreen: true。通过这样做，您将强制 Electron 将窗口渲染为真正的全屏窗口，从而绕过导致不透明问题的限制。

下面是如何操作：

步骤 1：打开 Electron 主进程文件

首先，找到您的 Electron 主进程文件，通常名为 main.js 或 index.js。

步骤 2：设置 fullscreen: true

在主进程文件中，找到创建浏览器窗口的代码段。它通常如下所示：

const { app, BrowserWindow } = require('electron');

app.whenReady().then(() => {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  });

  mainWindow.loadFile('index.html');
});

在创建浏览器窗口的对象中，添加 fullscreen: true 属性：

const { app, BrowserWindow } = require('electron');

app.whenReady().then(() => {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
    fullscreen: true, // <-- 添加此行
  });

  mainWindow.loadFile('index.html');
});