Electron调整无边框窗口大小

Question

Electron调整无边框窗口大小

javascriptwindowelectronresizable

11

我正在开发一款应用程序，它具有无边框窗口，并具有一个HTML5视频元素，该元素以100％填充文档。

我已将mainWindow设置为可调整大小mainWindow.isResizable（true），但我无法调整窗口大小。

当我使用Chrome开发工具进行调试时，我只能调整位于侧面的Chrome开发工具的窗口大小。（不确定是否有帮助，但我是在名为Elementary OS Freya的基于Ubuntu 14.04的Linux发行版上开发的）

有人可以解释一下为什么尽管我已将主窗口设置为可调整大小，但我仍无法调整其大小吗？

此外，我该怎么做来解决这个问题？

var app = require("app");
var BrowserWindow = require("browser-window");

var mainWindow = null;

// Quit when all windows are closed.
app.on("window-all-closed", function() {
  app.quit();
});

app.on("ready", function() {
  mainWindow = new BrowserWindow({
    width: 640,
    height: 480,
    frame: false
  });
  mainWindow.loadUrl("file://" + __dirname + "/index.html");

  // Set Window Resizable
  mainWindow.isResizable(true);

  mainWindow.focus();
});

- Michael Schwartz

3个回答

6

提到在https://dev59.com/41wY5IYBdhLWcg3wM1XK#32897808的回答是可以的，但还有另一种方法，它不会影响您的任何其他样式，并且可以放置在您拥有的任何无框窗口中。使用 electron 创建的VS Code 也使用类似的方法允许从标题栏调整大小。

因此，您通常会像以下结构一样具有带有-webkit-app-region: drag;的标题栏：

.title-bar {
  display: flex;
  height: 30px;
  border: 1px solid gray;
  align-items: center;
  -webkit-app-region: drag;
}

.title {
  margin-left: 10px;
}

.title-bar-btns {
  margin-left: auto;
  -webkit-app-region: no-drag;
}

<div class="title-bar">
  <div class="title">Window Header</div>
  <div class="title-bar-btns">
    <button id="min-btn">-</button>
    <button id="max-btn">+</button>
    <button id="close-btn">x</button>
  </div>
</div>

现在，您可以在标题栏中添加一个带有titlebar-drag-region类的div，将position:relative;设置为标题栏，并从中删除-webkit-app-region: drag;。 .titlebar-drag-region的作用是创建一个可拖动区域，其尺寸略小于标题栏。我们在边框处留下的6px间隙被用于调整大小。这样一来，您就有了一个可由所有边缘拖动和调整大小的标题栏。

因此，只需创建一次.titlebar-drag-region，然后将<div class="titlebar-drag-region">放在所有窗口的标题栏中即可。

.titlebar-drag-region {  /*added*/
  top: 6px;
  left: 6px;
  display: block;
  position: absolute;
  width: calc(100% - 12px);
  height: calc(100% - 6px);
  z-index: -1;
  -webkit-app-region: drag;
}

.title-bar {
  display: flex;
  height: 30px;
  border: 1px solid gray;
  align-items: center;
  position: relative;  /*added*/
  /*-webkit-app-region: drag;*/  /*removed*/
}

.title {
  margin-left: 10px;
}

.title-bar-btns {
  margin-left: auto;
  -webkit-app-region: no-drag;
}

<div class="title-bar">
  <div class="titlebar-drag-region"></div>  <! –– added ––>
  <div class="title">Window Header</div>
  <div class="title-bar-btns">
    <button id="min-btn">-</button>
    <button id="max-btn">+</button>
    <button id="close-btn">x</button>
  </div>
</div>

- Omkar Rajam

5

你使用了错误的方法：

mainWindow.setResizable(false) 设置窗口是否可以被用户手动调整大小。

mainWindow.isResizable() 返回一个布尔值，表示窗口是否可以被用户手动调整大小。

- Sergio

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Schwartz · Accepted Answer

我成功找到了问题，结果发现这不是一个javascript问题，我所要做的就是修改CSS以使它可以拖动和不可拖动。因为我的HTML和BODY也被设置为可拖动，所以我无法调整大小。下面是我的解决方案：

我必须创建一个新元素（div.dialog）并将我的内容封装在其中。同时需要使用以下CSS代码。

.dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  background: rgba(0, 0, 0, 0.5);
  -webkit-app-region: no-drag;
}
.tips {
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  -webkit-app-region: drag;
}

HTML:

<div class="dialog" data-action="toggle">
  <header class="tips" data-action="toggle">
    <div>
      <nav>
        [Space] for Snapshot<br>
        [Esc] to Close
        <p data-action="toggle-tips">[Tab] to Toggle Dialog</p>
      </nav>
    </div>
  </header>
</div>