Electron setSize 方法和 ReactJS答案

【问题标题】：Electron setSize method and ReactJSElectron setSize 方法和 ReactJS
【发布时间】：2020-03-06 07:41:35
【问题描述】：

我从电子中删除了框架并添加了用于折叠、关闭和最大化/最小化的自定义按钮。

折叠和关闭效果很好，但最小化/最大化会闪烁并返回全屏

const [bounds, setBounds] = useState({width: 600, height: 600, x: 50, y: 50}) 是默认边界

useEffect(() => {
        if (maximized) {
          remote.BrowserWindow.getFocusedWindow().maximize()
        } else {
          //here is a problem
          remote.BrowserWindow.getFocusedWindow().setBounds(bounds)
        }
      }, [bounds, bounds.height, bounds.width, maximized])

如何正确调整窗口大小？我也试过remote.BrowserWindow.getFocusedWindow().setSize()

【问题讨论】：

您的问题并不完全清楚。你想调整大小吗？或者你想最大化/取消最大化？你知道有像remote.BrowserWindow.getFocusedWindow().unmaximize() 这样的东西，对吧？如果窗口是全屏的，你可能应该先取消全屏。 remote.BrowserWindow.getFocusedWindow().setFullScreen(false).

标签： reactjs electron

【解决方案1】：

像这样使用 put a fullscreenable = false 创建一个透明窗口

const mainWindow = new BrowserWindow({
      width: customWidth,
      height: CustomHeight,
      x: positionMarginX,
      y: positionMarginY,
      skipTaskbar: process.platform !== 'darwin',
      fullscreenable: false,
      frame: false,
      resizable: false,
      hasShadow: false,
      transparent: true,
      minimizable: false,
      maximizable: false,
      darkTheme: true,
      closable: false,
      titleBarStyle: 'customButtonsOnHover',
      webPreferences: {
        webSecurity: false,
        nodeIntegration: true,
      },
    })

并像这样在反应端使用 IPC 渲染

 ipcRenderer.send(
          'window-resize',
          300, // height
          300  // width
        )

然后使用 IPC main 像这样处理那个事件

ipcMain.on('window-resize', (e,height, width) => {
windowSize = {
        width: width,
        height: height,
        x: customX,
        y: customY,
      }
      mainWindow.setBounds(windowSize)
})

如果您使用自定义控件，请遵循此 URL Frameless window with controls in electron (Windows)

【讨论】：