Electron怎么让菜单和 logo/放大缩小 功能在一样呢？

Question

我想实现 github Desktop 的效果，如下图：

而默认的效果如下图，logo和放大缩小功能和菜单栏在两行了：

除了自定义外，有其他办法实现吗，没找到相关的配置。谢谢!

Answer 1

这个需要自定义 title. 我就是这样做的

给你参考一下三个小按钮的实现:

class Controls extends React.Component {
  closeWindow = _ => {
    remote.getCurrentWindow().close();
  };

  minimize = _ => {
    remote.getCurrentWindow().minimize();
  };

  maximize = _ => {
    let window = remote.getCurrentWindow();

    if (window.isMaximized()) window.unmaximize();
    else window.maximize();
    this.forceUpdate();
  };

  render() {
    let window = remote.getCurrentWindow();
    const isMaximized = window.isMaximized();

    return (
      <ul className={style.controls}>
        <li onClick={this.closeWindow} className={style.closeButton}>
          <svg
            className={style.label}
            fill="#000000"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
            <path d="M0 0h24v24H0z" fill="none" />
          </svg>
        </li>
        <li onClick={this.minimize} className={style.minButton}>
          <svg
            className={style.label}
            fill="#000000"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path d="M19 13H5v-2h14v2z" />
            <path d="M0 0h24v24H0z" fill="none" />
          </svg>
        </li>
        <li onClick={this.maximize} className={style.maxButton}>
          {isMaximized
            ? <svg
                className={style.label}
                fill="#000000"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path d="M0 0h24v24H0z" fill="none" />
                <path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" />
              </svg>
            : <svg
                className={style.label}
                fill="#000000"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path d="M0 0h24v24H0z" fill="none" />
                <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
              </svg>}
        </li>
      </ul>
    );
  }
}

Answer 2

我记得你点击头部状态栏其实也是变大变小。这个地方如果用配置的话，应该和普通应用一样的，如果自定义的想想空间就比较多了