在
Electron 中，可以使用
自定义 HTML/CSS/JavaScript 来创建应用程序的操作栏，并使用
Electron 的 API 来使其可拖拽。以下是一个简单的示例：
1. 创建一个 HTML 文件，用于定义操作栏的外观和布局。
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Custom Toolbar</title>
<style>
/* 操作栏样式 */
.toolbar {
background-color: #333;
color: white;
height: 30px;
padding: 5px;
-
webkit-
app-
region: drag;
}
/* 操作栏中
按钮的样式 */
.toolbar button {
background-color: transparent;
border: none;
color: white;
cursor: pointer;
font-size: 16px;
margin-right: 10px;
outline: none;
}
</style>
</head>
<body>
<div class="toolbar">
<button id="close">X</button>
<button id="minimize">-</button>
<button id="maximize">+</button>
</div>
</body>
</html>
```
2. 在
Electron 的主进程中创建窗口，并将该 HTML 文件
加载到该窗口中。
```
const {
app, BrowserWindow } = require('
electron')
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
frame: false, // 隐藏默认操作栏
webPreferences: {
nodeIntegration: true
}
})
win.loadFile('toolbar.html') //
加载操作栏 HTML 文件
// 允许拖拽窗口
win.on('maximize', () => {
win.webContents.send('maximized')
})
win.on('unmaximize', () => {
win.webContents.send('unmaximized')
})
}
app.whenReady().then(createWindow)
```
3. 在 HTML 文件中添
加 JavaScript
代码，以便在用户点击操作栏
按钮时执行相应的窗口操作。
```
const { ipcRenderer, remote } = require('
electron')
// 通过 IPC 通信接收窗口最大化/还原事件
ipcRenderer.on('maximized', () => {
document.getElementById('maximize').innerHTML = '-'
})
ipcRenderer.on('unmaximized', () => {
document.getElementById('maximize').innerHTML = '+'
})
// 获取当前窗口
const win = remote.getCurrentWindow()
// 关闭窗口
document.getElementById('close').addEventListener('click', () => {
win.close()
})
//
最小化窗口
document.getElementById('minimize').addEventListener('click', () => {
win.minimize()
})
// 最大化/还原窗口
document.getElementById('maximize').addEventListener('click', () => {
if (win.isMaximized()) {
win.unmaximize()
} else {
win.maximize()
}
})
```
4. 使用 CSS 的 `drag` 属性，使操作栏可拖拽。
```
.toolbar {
-
webkit-
app-
region: drag;
}
```
以上是一个简单的示例，您可以根据自己的需求进行扩展。注意，在使用
自定义操作栏时，需要禁用
Electron 默认的操作栏（通过设置 `frame: false`）。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
1489
