如何自定义Electron应用程序的窗口标题栏？

Question

我开始使用Electron来构建桌面应用。如何自定义窗口标题栏（包含关闭，最小化和全屏按钮）以添加自定义视图？ Safari就是我想到的一个例子：

Answer 1

您在Electron中唯一的选择是创建一个frameless（也称为无边框）窗口，然后创建一个＆＃34;假的＆＃34;带有CSS的标题栏，包括您需要的任何UI元素。

Electron / webkit提供了CSS属性，允许您使任何元素可拖动，如标题栏：

#include <fstream>
#include <iostream>

#include <boost/serialization/serialization.hpp>
#include <boost/archive/text_iarchive.hpp>
#include <boost/archive/text_oarchive.hpp>

unsigned int foo(){
   return 4;
}

int main()
{
    {
    std::ofstream outputStream("someFile.txt");
    boost::archive::text_oarchive outputArchive(outputStream);
    outputArchive << static_cast<const int&>(foo());
    }

    std::ifstream inputStream("someFile.txt");
    boost::archive::text_iarchive inputArchive(inputStream);

    int readBack;
    inputArchive >> readBack;

    std::cout << "Read back: " << readBack << std::endl;
    return 0;
}

Answer 2

第一个跨平台选项是创建frameless window。第二个是macOS，允许你隐藏标题栏，但保留窗口控件，允许添加自定义按钮。 例如：

const { BrowserWindow } = require('electron')

// This will create a window without titlebar, allowing for customization
let win = new BrowserWindow({ titleBarStyle: 'hidden' })
win.show()

然后您可以使用css属性-webkit-user-select和-webkit-app-region来指定拖动区。