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

在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>

版权声明:本文为Alive_tree原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。