ウィンドウのリサイズ可否【Electron】

Electron

リサイズの可否をウィンドウ生成時に設定

ウィンドウ生成時にオプションとしてresizableがありますので、そちらを設定します。

const createWindow = () => {
  mainWindow = new BrowserWindow({
    width: 600,
    height: 400,
    resizable: true,
    webPreferences: {
      preload: path.join(__dirname, "preload.js")
    }
  });
BrowserWindow | Electron
ブラウザウィンドウを作成したり、制御したりします。
electronjs.org

リサイズの可否を動的に設定

インスタンスプロパティである resizable か
インスタンスメソッドである setResizable(resizable) を使います。

window.resizable = true
window.setResizable(false) //引数はboolean
BrowserWindow | Electron
ブラウザウィンドウを作成したり、制御したりします。
electronjs.org

リサイズの可否を取得

インスタンスプロパティである resizable か
インスタンスメソッドである isResizable() を使います。

window.resizable //boolean
window.isResizable() //戻り値はboolean
BrowserWindow | Electron
ブラウザウィンドウを作成したり、制御したりします。
electronjs.org

簡単なelectronアプリでresizableのデモ

electronの練習がてら、視覚的にわかりやすいようにresizableを試せるデモを作ってみました👍

デモ

まとめコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>electron app</title>
  </head>
  <body>
    <h1 style="text-align:center;">electron app🌟💡</h1>
    <div style="text-align:center;"><button id="reverse-button">reverse resizable</button></div>
    <div style="text-align:center;"><button id="get-button">get resizable</button></div>
    <div style="text-align:center;" id="display-resizable"></div>
  </body>
  <script>
    const reverseButton = document.getElementById("reverse-button");
    const getButton = document.getElementById("get-button");
    const displayResizable = document.getElementById("display-resizable");

    reverseButton.addEventListener('click', ()=>{window.API.reverseResizable();})
    getButton.addEventListener('click', ()=>{
      window.API.displayResizable(displayResizable);
    })
  </script>
</html>

const { app, ipcMain, BrowserWindow } = require('electron');
const path = require('path');

if (require('electron-squirrel-startup')) {
  app.quit();
}

let mainWindow
const createWindow = () => {
  mainWindow = new BrowserWindow({
    width: 600,
    height: 400,
    resizable: false,
    webPreferences: {
      preload: path.join(__dirname, "preload.js")
    }
  });

  mainWindow.loadFile(path.join(__dirname, 'index.html'));
};

app.on('ready', createWindow);
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

ipcMain.on('reverse-resizable', (event, arg)=>{
  mainWindow.setResizable(!mainWindow.resizable);
})

ipcMain.on('request-resizable', (event, arg)=>{
  event.sender.send('reply-resizable', mainWindow.isResizable());
})
const {ipcRenderer, contextBridge} = require('electron');

contextBridge.exposeInMainWorld('API', {
    reverseResizable: ()=>{
        ipcRenderer.send('reverse-resizable');
    },
    displayResizable: (element)=>{
        ipcRenderer.on('reply-resizable', (event, arg)=>{
            element.innerText = "resizable is " + arg;
        })
        ipcRenderer.send('request-resizable');
    }
})

コメント