监听electron 双击屏幕最大化时设置右上角图片变化

最新推荐文章于 2024-10-26 00:20:21 发布

原创最新推荐文章于 2024-10-26 00:20:21 发布 · 2.5k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#electron #javascript

electron 专栏收录该内容

4 篇文章

订阅专栏

本文介绍在Electron中实现窗口最大化与最小化的具体方法，并探讨如何解决最大化与最小化功能中存在的问题，例如设置不可最大化属性无效及窗口状态同步等问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在electron实现窗口最大化和最小化的时候，是很简单的，只要设置主线程最大化和最小化就行了

最大化与最小化设定

// 主线程最大化
mainWin.maximize()
//主线程非最大化
 mainWin.unmaximize()
// 主线程最小化
mainWin.hide()

坑

但是在实际执行的时候，却有很多坑比如
1、你设置了不可以双击最大化，但是只要你拖动窗口，你设置的不可以双击最大/小化就失效了
2、如果不监听屏幕变化，右上角的图标就不会变化，最大化后仍显示最大化图标

//设置不可最大化属性，其实没什么用 随便拖动一下窗口，就可以双击最大化
win = new BrowserWindow({
    width: 1000,
    height: 580,
    frame: false, ///无边框
    maximizable: false, // 默认不能最大化
    resizable: false,
    minWidth: 1000,
    minHeight: 580,
  })

判断窗口是否最大化

首先想到的是判断一下是否最大化，通过文档找到查看是否最大化的函数

//判断窗口最大化的函数
win.isMaximized()

但是，当我们最大化、全屏之后，这个函数都会返回true,这样处理显然是不正确的

监听窗口最大化与非最大化变化

这时候能做的就是在主线程里监听最大化状态，然后做出相应的处理
1、主线程监听

//监听窗口最大化、最小化事件 --- 主进程
  win.on('maximize', () => {
    win.webContents.send('mainWin-max', true)
  })
  win.on('unmaximize', () => {
    win.webContents.send('mainWin-max', false)
  })

2、渲染进程接收函数
渲染进程收到事件通知执行改变窗口显示状态值的函数

//渲染进程接收函数
ipcRenderer.on('mainWin-max', (_, status) => {
    store.commit('changeSize', status)
})

3、子页面获取窗口状态值，从而改变最大化与非最大化图标

computed:{
        ...mapGetters({
            isMax: "sizeVal"
        }),
    },

页面控制图标显隐

<div class="win" @click.stop="clickMax">
          <img v-if="!isMax" src="../images/sizeMin.png" alt="">
          <img v-else src="../images/sizeMax.png" alt="">
      </div>