我對Electron和Node.js非常陌生，所以請原諒術語的任何誤用。

我正在開發一個Windows 10應用程序。我正試圖獲得定制我的應用程序的標題欄區域的能力(沿著其他電子應用程序如Github Desktop或Discord的路線)。

通過搜索和閱讀，我發現有兩種方法可以做到這一點:做一個無框架窗口，自己創建所有的元素，包括窗口控件按鈕，或者做一個無框架窗口，使用窗口控件覆蓋。我更喜歡使用后者，因為這樣代碼更少，titleBarOverlay的幾個參數就足以讓按鈕看起來像我想要的那樣。

問題是覆蓋圖在按鈕周圍留下了1px的間隙，我找不到調整覆蓋圖位置的方法。這是窗口按鈕的外觀(紅色標題欄用于對比:

這是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");
}

index.html的風格包括這個(title_bar只是body元素正下方的一個div):

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

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

有沒有辦法擺脫這種落差？如果不是，那么我想在窗口按鈕中手動添加的外觀的首選方法是什么？

我沒有找到太多關于titleBarOverlay的文檔。這是一個非常新的功能嗎？還是正在被淘汰的功能？

不幸的是，這是所有windows的標準配置。

要測試這一點，請將您計算機上安裝的任何(窗口)應用程序拖到白色背景上。結果是一樣的，整個窗口周圍都是1px的邊框。

要獲得你想要的外觀，你需要放下標題欄樣式和標題欄覆蓋選項和& quot構建& quot自己的標題欄。

下面是我過去提供的兩個SO答案，也許能讓你開始構建自己的標題欄。

https://stackoverflow.com/a/75840891/2627338 https://stackoverflow.com/a/72158666/2627338 回答你的問題，titleBarOverlay已經存在一段時間了，據我所知，還沒有計劃淘汰它。

更多閱讀材料請參見:

電子窗口控制覆蓋 Web孵化器社區組-已安裝桌面Web應用程序的窗口控件覆蓋