第14章 自定义窗口样式

自定义窗口样式 无边框窗口 无边框窗口会去掉操作系统提供的所有窗口装饰，包括窗口控制按钮。 要创建无边框窗口，只需在 BrowserWindow 构造函数中把 BaseWindowContructorOptions 的 frame 参数设为 false。 docs/fiddles/features/window-customization/custom-window-styles/frameless-windows (44.6.0) 在 Fiddle 中打开 main.js const { app, BrowserWindow } = require('electron')

function createWindow () {
const win = new BrowserWindow({
width: 300,
height: 200,
frame: false
})
win.loadURL('https://example.com')
}

app.whenReady().then(() => {
createWindow()
})
在 Wayland（Linux）上，无边框窗口默认带有 GTK 投影和扩展的调整大小边界。如果想创建完全没有装饰的窗口，可以在窗口构造选项中设置 hasShadow: false。 透明窗口 要创建完全透明的窗口，只需在 BrowserWindow 构造函数中把 BaseWindowContructorOptions 的 transparent 参数设为 true。 下面这个 Fiddle 利用透明窗口加 CSS 样式，做出了一个圆形窗口的效果。 docs/fiddles/features/window-customization/custom-window-styles/transparent-windows (44.6.0) 在 Fiddle 中打开 main.js index.html styles.css const { app, BrowserWindow } = require('electron')

function createWindow () {
const win = new BrowserWindow({
width: 100,
height: 100,
resizable: false,
frame: false,
transparent: true
})
win.loadFile('index.html')
}

app.whenReady().then(() => {
createWindow()
})













body {
margin: 0;
padding: 0;
background-color: rgba(0, 0, 0, 0); /* Transparent background */
}
.white-circle {
width: 100px;
height: 100px;
background-color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
app-region: drag;
user-select: none;
}
局限性​ 无法点击穿过透明区域。详情见 #1335。 透明窗口无法调整大小。将 resizable 设为 true 可能导致某些平台上的透明窗口失效。 CSS blur() 滤镜仅应用于窗口内的 Web 内容，因此无法对窗口下方的内容（即用户系统上打开的其他应用程序）应用模糊效果。 打开 DevTools 时，窗口将不再保持透明。 在 Windows 上： 无法通过 Windows 系统菜单或双击标题栏来最大化透明窗口。此限制的原因详见 PR #28207。 在 macOS 上： 透明窗口不会显示原生窗口阴影。