electron自定义窗口

通过前面的学习,我们可以发现 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下子窗口不会移动

模态窗口

模态窗口是禁用父窗口的子窗口,无法跨过子窗口操作父窗口的内容。创建模态窗口需要设置parentmodal选项:

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


微信 遇到疑问可加微信进行反映