问题

I'm very new to Electron and Node.js so forgive any misuse of the terminology.

我对Electron和Node.js非常陌生，所以请原谅我可能对术语的不当使用。

I'm working on a Windows 10 application. I'm trying to gain the ability to customize the title bar area of my app (along the lines of other Electron apps like Github Desktop or Discord).

我正在开发一个运行在Windows 10上的应用程序。我想要自定义我的应用程序的标题栏区域（类似于其他Electron应用程序，如Github Desktop或Discord）。

From what I found by searching and reading, there are two ways to do this: Do a frameless window and create all the elements yourself including the window control buttons OR do a frameless window and use the Window Controls Overlay (titleBarOverlay). I would prefer to do the latter just because it's less code and the few parameters titleBarOverlay has is enough to get the buttons to look the way I want.

根据我通过搜索和阅读找到的信息，有两种方法可以实现这一目标：要么创建一个无框窗口并自己创建所有元素，包括窗口控制按钮，要么创建一个无框窗口并使用窗口控制覆盖（titleBarOverlay）。我更倾向于后者，因为它的代码更少，titleBarOverlay具有的少量参数足以让按钮看起来符合我的要求。

The problem is that the overlay leaves a 1px gap around the buttons and I can't find a way to adjust the position of the overlay. This is what the window buttons look like (red title bar for contrast:

问题是覆盖效果在按钮周围留下了1像素的间隙，我找不到调整覆盖位置的方法。这是窗口按钮的外观（红色标题栏用于对比）：

This is the window creation code in main.js:

这是在main.js中创建窗口的代码：

const createWindow = () => {
    const win = new BrowserWindow({
        width: 1100,
        height: 900,
        webPreferences: {
            preload: path.join(__dirname, "preload.js")
        },
        backgroundColor: "#0a0a0a",
        frame: false,
        titleBarStyle: 'hidden',
        titleBarOverlay: {
            color: '#323232',
            symbolColor: '#ffffff',
            height: 30
        }
    })

    win.loadFile("index.html");
}

The style in index.html includes this (title_bar is just a div directly under the body element):

index.html中的样式包括以下内容（title_bar只是body元素下面的一个div）：

body {
    border: none;
    margin: 0px;
    padding: 0px;
}

#title_bar {
    -webkit-app-region: drag;
    height: 30px;
    background-color: red;
}

Is there a way to get rid of this gap? If not, is the preferred method of accomplishing the look I want to add in the window buttons manually as mentioned above?

有没有办法去掉这个间隙？如果没有，实现我想要的外观的首选方法是按照上面提到的方式手动添加窗口按钮吗？

I have not been able to find much documentation on titleBarOverlay. Is this a very new feature? Or a feature that is being phased out?

我没有找到关于titleBarOverlay的很多文档。这是一个非常新的功能吗？还是一个即将被淘汰的功能？

const createWindow = () => {
    const win = new BrowserWindow({
        width: 1100,
        height: 900,
        webPreferences: {
            preload: path.join(__dirname, "preload.js")
        },
        backgroundColor: "#0a0a0a",
        frame: false,
        titleBarStyle: 'hidden',
        titleBarOverlay: {
            color: '#323232',
            symbolColor: '#ffffff',
            height: 30
        }
    })

    win.loadFile("index.html");
}

body {
    border: none;
    margin: 0px;
    padding: 0px;
}

#title_bar {
    -webkit-app-region: drag;
    height: 30px;
    background-color: red;
}

答案1

得分: 1

抱歉，只提供翻译，不回答问题。

很遗憾，这对所有的窗口都是标准操作。

要测试这一点，请将计算机上安装的任何（窗口化）应用程序拖到白色背景上。结果将是相同的，即整个窗口周围有一个 1px 的边框。

要实现您期望的外观，您需要删除 titleBarStyle 和 titleBarOverlay 选项，并自己构建标题栏。

以下是我以前提供的两个SO答案，可能会帮助您开始构建自己的标题栏：

• https://stackoverflow.com/a/75840891/2627338
• https://stackoverflow.com/a/72158666/2627338

回答您的问题，titleBarOverlay 已经存在一段时间了，据我所知，没有计划逐渐淘汰它。

更多阅读材料请参考：

• Electron - Window Controls Overlay
• Web Incubator Community Group - Window Controls Overlay for Installed Desktop Web Apps