Electron 中如何实现 BrowserWindow 的全屏和退出全屏？

推荐答案

在 Electron 中，可以通过 BrowserWindow 的 setFullScreen 方法来实现全屏和退出全屏。以下是一个简单的示例代码：

// www.javascriptcn.com code example
const { app, BrowserWindow } = require('electron');

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  mainWindow.loadFile('index.html');

  // 进入全屏
  mainWindow.setFullScreen(true);

  // 退出全屏
  mainWindow.setFullScreen(false);
});

本题详细解读

1. setFullScreen 方法

setFullScreen 是 BrowserWindow 类的一个方法，用于控制窗口是否进入全屏模式。该方法接受一个布尔值参数：

• true：将窗口设置为全屏模式。
• false：退出全屏模式。

2. 示例代码解析

• 创建窗口：首先，我们创建了一个 BrowserWindow 实例，并设置了窗口的初始宽度和高度。
• 加载页面：通过 loadFile 方法加载了一个 HTML 文件。
• 进入全屏：调用 setFullScreen(true) 方法，将窗口设置为全屏模式。
• 退出全屏：调用 setFullScreen(false) 方法，退出全屏模式。

3. 注意事项

• 全屏模式的行为：在全屏模式下，窗口将占据整个屏幕，并且通常会隐藏操作系统的任务栏或 Dock。
• 用户交互：在某些操作系统中，用户可以通过按下 Esc 键来退出全屏模式。
• 多显示器支持：如果系统有多个显示器，setFullScreen 方法会将窗口全屏显示在当前活动的显示器上。

4. 其他相关方法

• isFullScreen：用于检查窗口当前是否处于全屏模式。
• setSimpleFullScreen（macOS 专用）：在 macOS 上，可以使用 setSimpleFullScreen 方法来实现简单的全屏模式，这种方式不会隐藏 Dock 和菜单栏。

通过这些方法，开发者可以灵活地控制 Electron 应用的全屏行为，提升用户体验。