网站建设小组的运营模式,哪里有平面设计,自己做网站需要哪些软件,昆明网站建设费用1、前言
当需要在标题栏添加一些额外的操作时候#xff0c;比如添加 帮助 菜单#xff0c;自带的标题栏开发起来比较困难#xff08;没了解不知道能不能实现#xff09;#xff0c;这时候#xff0c;自己写一个标题栏就比较方便。
2、实现
首先是禁止掉原先的标题栏比如添加 帮助 菜单自带的标题栏开发起来比较困难没了解不知道能不能实现这时候自己写一个标题栏就比较方便。
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.scsstype ipcOperateType close | min | max
type TopPageProps {date: stringuserCode: string
}const TopPage: FCTopPageProps () {const [isMax, setIsMax] useStateboolean(false)useEffect(() {window.ipcRenderer.on(isMaxWindow, (_event, message) {setIsMax(message);});}, []);// 窗口事件const operateWindow (operate: ipcOperateType) {switch (operate) {case close:window.ipcRenderer.send(close)breakcase min:window.ipcRenderer.send(min)breakcase max:// 监听双击事件以及其余事件导致的窗口全屏还原window.ipcRenderer.on(isMaxWindow, (_event, message) {setIsMax(message)})window.ipcRenderer.send(max)break}}return (div className{styles.top_page}div我是标题xxxxx/divdiv className{styles.action_box}LineOutlinedonClick{() {operateWindow(min)}}/{!isMax (BorderOutlinedonClick{() {operateWindow(max)}}/)}{isMax (BlockOutlinedonClick{() {operateWindow(max)}}/)}CloseOutlinedonClick{() {operateWindow(close)}}//div/div)
}
export default TopPage
此时已经可以实现正常的最小化最大化操作
