Блог

Я создаю приложение Electron, в котором мы хотим, чтобы панель инструментов навигации была закреплена в правой части экрана. Оно должно быть с правой стороны, потому что большинство наших пользователей работают в Windows, и закрепление его слева будет означать, что оно перекрывает множество значков и будет закрыто меню «Пуск».

Когда пользователь нажимает на значок, мне нужно, чтобы окно открывалось / изменялось влево.

При запуске приложения я создаю новое окно

 mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    center: true,
    backgroundColor: '#18A4FC'
  })
  

Затем, после аутентификации пользователя, я использую ipcRender для отправки сообщения об успешном завершении на main.js досье. В настоящее время это «закрепляет» окно в правой части экрана, используя метод setBounds и размеры экрана.

 ipcMain.on('login-success', () => {
  let display = electron.screen.getPrimaryDisplay()
  const { width, height } = display.bounds
  mainWindow.setBounds({
    x: width - 40,
    y: 0,
    width: 40,
    height: height
  })
})
  

Затем, когда пользователь нажимает на значок, я использую setSize, чтобы «открыть» док-станцию. Это означает, что я изменяю ширину окна с 40 пикселей на 480 пикселей. Но оно открывается вправо, за пределами экрана. Мне нужно, чтобы оно открывалось влево.

 ipcMain.on('resize-open', () => {
  let display = electron.screen.getPrimaryDisplay()
  const { height } = display.bounds
  mainWindow.setSize(480, height)
})
  

Есть идеи, как это сделать? Я понимаю, что ширина, высота устанавливаются из верхнего левого угла равными 0,0. Есть ли способ сбросить это?

В итоге я использовал setBounds, но вместо этого переместил его влево на ту величину, которая мне нужна для его открытия.

   let display = electron.screen.getPrimaryDisplay()
  const { width, height } = display.bounds
  mainWindow.setBounds({
    x: width - 320 ,
    y: height,
    width: 320,
    height: height
  })
})```
  

Может быть, вы могли бы попробовать что-то вроде:

 mainWindow.setBounds({
  x: 0,
  y: 0,
  width: 480,
  height: height
})
  

Вместо:

 mainWindow.setSize(480, height)
  

Потому setBounds что функция сбрасывает положение окна (в данном случае на 0,0), а также устанавливает ширину и высоту.