electron自定义标题栏,并监听双击以及右键改变窗口大小。

1、前言

当需要在标题栏添加一些额外的操作时候,比如添加 帮助 菜单,自带的标题栏开发起来比较困难(没了解不知道能不能实现),这时候,自己写一个标题栏就比较方便。

2、实现

首先是禁止掉原先的标题栏,就是创建无边框窗口 (官网描述,点此跳转)
默认情况下, 无边框窗口是不可拖拽的。 应用程序需要在 CSS 中指定 -webkit-app-region: drag 来告诉 Electron 哪些区域是可拖拽的(如操作系统的标准标题栏)设置后点击事件是无效的。
需要在可拖拽区域内部使用 -webkit-app-region: no-drag 则可以将其中部分区域排除。 请注意, 当前只支持矩形形状。(官网描述,点此跳转)

async function createWindow() {
  win = new BrowserWindow({
    title: 'xxxx工具',
    width: 1280,
    height: 720,
    // 不显示顶部栏
    frame: false,
    //实际尺寸不包含边框
    useContentSize: true,
  })
  }

然后使用 ipcMain 进行进程通信
监听 最小化、关闭、最大化事件
将代码写在createWindow当中

 // 监听放大缩小事件
  ipcMain.on('close', () => {
    win?.destroy()
  })

  ipcMain.on('max', () => {
    // true表示窗口已最大化.
    if (win?.isMaximized()) {
      win.restore() // 将窗口恢复为之前的状态
    } else {
      win?.maximize() // 窗口最大化
    }
  })

  ipcMain.on('min', () => {
    win?.minimize()
  })

在页面当中可以通过调用这些事件进行窗口的操作,来实现窗口状态的控制

3、优化

但是还可以通过双击标题栏来进行窗口的最大化还原操作

这时候就需要监听到其余最大化窗口和最小化窗口的事件,来改变图标的变化。、

窗口有很多实例事件,可以监听,
这里我们只对最大化和还原进行监听

然后通过webContents来发送监听到的值到渲染层

  // 对双击等其余操作导致的窗口变化监听
  // 事件: 最大化
  win.on('maximize', () => {
    win?.webContents.send('isMaxWindow', win?.isMaximized())
  })

  // 事件: 还原
  win.on('unmaximize', () => {
    // 在窗口从最大化状态还原时执行操作
    win?.webContents.send('isMaxWindow', win?.isMaximized())
  })

页面中使用ipcRenderer来获取主进程发送过来的值,这样不论是自己点击图标,或者双击、右键改变窗口的状态都可以正确的显示图标。

import {
  LineOutlined,
  BorderOutlined,
  BlockOutlined,
  CloseOutlined,
} from '@ant-design/icons'
import { useState, useMemo, FC, useEffect } from 'react'
import styles from './style.module.scss'

type ipcOperateType = 'close' | 'min' | 'max'
type TopPageProps = {
  date: string
  userCode: string
}

const TopPage: FC<TopPageProps> = () => {
  const [isMax, setIsMax] = useState<boolean>(false)
  useEffect(() => {
        window.ipcRenderer.on('isMaxWindow', (_event, message) => {
            setIsMax(message);
        });
    }, []);
  //   窗口事件
  const operateWindow = (operate: ipcOperateType) => {
    switch (operate) {
      case 'close':
        window.ipcRenderer.send('close')
        break
      case 'min':
        window.ipcRenderer.send('min')
        break
      case 'max':
       // 监听双击事件以及其余事件导致的窗口全屏还原
        window.ipcRenderer.on('isMaxWindow', (_event, message) => {
          setIsMax(message)
        })
        window.ipcRenderer.send('max')
        break
    }
  }


  return (
    <div className={styles.top_page}>
      <div>我是标题xxxxx</div>
      <div className={styles.action_box}>
        <LineOutlined
          onClick={() => {
            operateWindow('min')
          }}
        />
        {!isMax && (
          <BorderOutlined
            onClick={() => {
              operateWindow('max')
            }}
          />
        )}
        {isMax && (
          <BlockOutlined
            onClick={() => {
              operateWindow('max')
            }}
          />
        )}
        <CloseOutlined
          onClick={() => {
            operateWindow('close')
          }}
        />
      </div>
    </div>
  )
}
export default TopPage

此时已经可以实现正常的最小化最大化操作

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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`)。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值