电子调整无框窗口的大小答案

【问题标题】：Electron Resizing a Frameless Window电子调整无框窗口的大小
【发布时间】：2015-10-01 19:00:57
【问题描述】：

我正在开发一个应用程序，它有一个无框窗口，并且有一个 html5 视频元素，显示网络摄像头以 100% 填充 document.body。

我将mainWindow 设置为可调整大小的mainWindow.isResizable(true)，但我无法调整窗口大小。

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

有人可以解释为什么即使我将 mainWindow 设置为可调整大小，我也无法调整可调整大小窗口的大小？

另外我可以做些什么来解决这个问题？

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();
});

【问题讨论】：

标签： javascript window electron resizable

【解决方案1】：

我设法找出了问题所在，并发现它甚至不是 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>

【讨论】：

谢谢。这基本上回答了我的问题，当您将窗口标记为“frame：false”然后启用“-webkit-app-region：drag”时，拖动标志会禁用窗口调整大小句柄。我希望有另一种解决方案，因为我已经设计了 UI，但这只是证实了我的怀疑，即您需要制作“无拖动”边框才能恢复窗口调整大小句柄。

【解决方案2】：

https://stackoverflow.com/a/32897808/11167389 中提到的答案是可以的，但还有另一种方法不会影响您的任何其他样式，并且可以放在您拥有的任何无框窗口中。使用电子创建的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>

【讨论】：

【解决方案3】：

你使用了错误的方法：

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

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

【讨论】：