ElectronJS 中的无框窗口(1)

📌 相关文章

📜 ElectronJS 中的无框窗口(1)

📅 最后修改于: 2023-12-03 15:14:51.491000 🧑 作者: Mango

ElectronJS 中的无框窗口

在 ElectronJS 中，无框窗口可以用来创建更加自定义化的窗口。不同于有框窗口，无框窗口不具有标题栏和边框等元素，让你的窗口更加自由。

创建无框窗口

要创建一个无框窗口，你需要在 BrowserWindow 类中设置 frame 属性为 false。以下是创建无框窗口的示例代码：

const { app, BrowserWindow } = require('electron')

let mainWindow

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false, // 设置为无框窗口
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 加载应用的首页
  mainWindow.loadFile('index.html')
}

// 当 Electron 完成初始化并准备创建浏览器窗口时，调用 createWindow 函数
app.whenReady().then(() => {
  createWindow()

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// 当所有窗口都关闭时退出应用
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

自定义窗口样式

无框窗口可以让你自定义窗口的样式和行为。以下示例演示如何通过 CSS 样式来自定义无框窗口：

/* 设置无框窗口的最小宽度和高度 */
body {
  min-width: 400px;
  min-height: 300px;
}

/* 完全覆盖窗口 */
#container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #333;
}

/* 添加自定义关闭按钮 */
.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  background-color: red;
  border-radius: 50%;
}

然后在 HTML 中添加以下内容：

<body>
  <div id="container">
    <div class="close-button"></div>
    <!-- 窗口内容 -->
  </div>
</body>

接受窗口拖拽事件

无框窗口还可以通过设置 draggable 属性为 true 来让窗口接受拖拽事件。

// 让窗口可拖拽
const { BrowserWindow } = require('electron')

const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  frame: false,
  webPreferences: {
    nodeIntegration: true
  }
})

mainWindow.setMovable(true)

小结

在 ElectronJS 中，无框窗口可以让你更加自由地创建自定义窗口。通过设置 frame 属性为 false，你可以创建无框窗口。接着，你可以通过 CSS 样式来自定义窗口的样式，或者设置 draggable 属性为 true 来让窗口接受拖拽事件。