electron 自定义窗口

友儿

发布于 2024-03-27 08:22:04

860

发布于 2024-03-27 08:22:04

文章被收录于专栏：友儿友儿

通过前面的学习，我们可以发现 BrowserWindow 模块是我们开发 Electron 应用程序的基础。除了咱们之前说的那些常见功能外，它还暴露了许多可以改变您浏览器窗口的外观和行为的API。

无边框窗口

要创建无边框窗口，需在 BrowserWindow 的构造中将 frame 参数设置为 false：

const win = new BrowserWindow({
  width: 800,
  height: 600,
  // 设置无边框的窗口（不同系统下效果会有差别）
  frame: false
})

隐藏标题栏色彩

设置 titleBarStyle 配置项为 hidden即可。

const win = new BrowserWindow({ titleBarStyle: 'hidden' })

当然，很多的外观操作是可以通过 BrowserWindow 模块自带的方法完成的，具体可以参考：https://www.electronjs.org/zh/docs/latest/api/browser-window#%E5%AE%9E%E4%BE%8B%E6%96%B9%E6%B3%95

父子窗口

通过使用 parent 选项，你可以创建子窗口：

const parent = new BrowserWindow({ width: 800, height: 600 })
const child = new BrowserWindow({ 
  width: 400, 
  height: 300, 
  // 创建父子窗口
  parent: parent 
})

parent.loadFile('parent.html')
child.loadFile('child.html')

子窗口将总是显示在父窗口的顶部，如果父窗口关闭，子窗口自动关闭。可以跨过子窗口操作父窗口的内容。

在Mac OS X下，移动父窗口，子窗口会随着父窗口移动，但在Windows下子窗口不会移动

模态窗口

模态窗口是禁用父窗口的子窗口，无法跨过子窗口操作父窗口的内容。创建模态窗口需要设置parent和modal选项：

const parent = new BrowserWindow({ width: 800, height: 600 })
const child = new BrowserWindow({
  width: 400,
  height: 300,
  // 创建模态窗口
  parent: parent,
  modal: true
})
parent.loadFile('parent.html')
child.loadFile('child.html')

模态窗口在Mac OS X下子窗口自动顶部居中对齐，并且没有标题栏，只能通过调用子窗口的close()方法关闭模态子窗口；在Windows下，模态子窗口仍然会显示菜单和标题栏。 child.close() 在Mac OS X下，模态子窗口显示后，父窗口仍然可以拖动，但无法关闭；在Windows下，模态子窗口显示后父窗口无法拖动。

参考文档：https://www.electronjs.org/zh/docs/latest/tutorial/window-customization

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

浏览器