前端 - electron 窗口如何实现置底？

Question

如题目，electron 应用如何实现置底呢，有置顶的 API，但没找到置底的 o(╥﹏╥)o 有哪位朋友知道如何实现吗？

Answer 1

在 Electron 中，没有直接的 API 来实现窗口置底的功能，但你可以通过一些间接的方式来实现这个效果。

一种常见的方法是，将窗口的 type 设置为 desktop，然后将窗口移动到屏幕的某个位置。这样，窗口会表现得像一个桌面图标或者小部件，不会被常规的应用程序窗口所覆盖。

下面是一个简单的示例代码，展示了如何创建一个置底的 Electron 窗口：

const { BrowserWindow, nativeImage, app } = require('electron');let mainWindow;function createWindow() {  mainWindow = new BrowserWindow({    width: 200,    height: 200,    type: 'desktop', // 设置窗口类型为 desktop    frame: false, // 去除窗口边框    transparent: true, // 设置窗口透明    alwaysOnTop: false, // 确保窗口不置顶    webPreferences: {      nodeIntegration: true,      contextIsolation: false    }  });  // 加载你的 HTML 文件或者其他内容  mainWindow.loadFile('index.html');  // 将窗口移动到屏幕的某个位置，这里假设是屏幕的右下角  const screen = require('electron').screen;  const { width, height } = screen.getPrimaryDisplay().workAreaSize;  mainWindow.setPosition(width - mainWindow.getBounds().width, height - mainWindow.getBounds().height);}app.whenReady().then(createWindow);

在这个示例中，我们创建了一个 BrowserWindow 实例，并将 type 属性设置为 'desktop'。然后，我们使用 setPosition 方法将窗口移动到屏幕的右下角。由于 alwaysOnTop 属性被设置为 false，所以窗口不会置顶。

请注意，这个方法的效果可能因操作系统和 Electron 的版本而有所不同。在某些情况下，你可能需要调整窗口的位置或大小，或者尝试其他方法来达到你想要的效果。此外，由于窗口被设置为透明且无边框，你可能还需要处理窗口的拖拽和关闭等操作。