Electron标题栏最大化时出现白色竖线问题求助

当使用titleBarStyle: 'hidden'搭配titleBarOverlay配置窗口时，最大化后按钮旁出现白色竖线，这是Electron原生标题栏按钮布局的常见小问题，不用自定义标题栏就能解决，试试下面几种方案：

方案1：手动指定标题栏覆盖层高度 #

最大化时的竖线往往是因为overlay高度和原生按钮区域不匹配，手动设置height参数对齐系统标题栏高度（Windows一般设32px，Mac可根据实际调整）：

function createWindow() {
  win = new BrowserWindow({
    width: 800,
    height: 600,
    titleBarStyle: 'hidden',
    titleBarOverlay: {
      color: '#1D1E20',
      symbolColor: '#EEEEEE',
      height: 32 // 显式设置高度
    },
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      devTools: true
    },
    show: false
  })
  // 其余代码不变
  win.loadFile('index.html')
  win.once('ready-to-show', () => {
    win.show()
  })
}

方案2：切换标题栏样式为hiddenInset #

hiddenInset样式下原生按钮布局更紧凑，能避免边界线溢出的问题，直接修改titleBarStyle：

function createWindow() {
  win = new BrowserWindow({
    width: 800,
    height: 600,
    titleBarStyle: 'hiddenInset', // 替换为hiddenInset
    titleBarOverlay: {
      color: '#1D1E20',
      symbolColor: '#EEEEEE'
    },
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      devTools: true
    },
    show: false
  })
  // 其余代码不变
  win.loadFile('index.html')
  win.once('ready-to-show', () => {
    win.show()
  })
}

方案3：监听窗口状态变化，强制刷新标题栏 #

通过监听窗口最大化/还原事件，重新设置标题栏覆盖层，修复布局异常：

function createWindow() {
  win = new BrowserWindow({
    width: 800,
    height: 600,
    titleBarStyle: 'hidden',
    titleBarOverlay: {
      color: '#1D1E20',
      symbolColor: '#EEEEEE'
    },
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      devTools: true
    },
    show: false
  })

  // 新增监听事件
  win.on('maximize', () => {
    win.setTitleBarOverlay({
      color: '#1D1E20',
      symbolColor: '#EEEEEE'
    })
  })
  win.on('unmaximize', () => {
    win.setTitleBarOverlay({
      color: '#1D1E20',
      symbolColor: '#EEEEEE'
    })
  })

  win.loadFile('index.html')
  win.once('ready-to-show', () => {
    win.show()
  })
}

方案4：升级Electron到最新稳定版 #

这个问题大概率是旧版本Electron的已知bug，升级到v28及以上的稳定版，原生组件的布局问题通常会被官方修复。

问题对应状态截图：

• 正常状态：
  
• 最大化异常状态：
  

内容的提问来源于stack exchange，提问作者Heda Dasser