通过前面的学习,我们可以发现 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
Comment here is closed