唤醒手腕 2023-12-01 13:38 采纳率: 58.3%
浏览 85
已结题

关于 electron 创建桌面程序设置窗口透明在鼠标未选中窗口时存在顶部条

关于 electron 创建桌面程序设置窗口透明在鼠标未选中窗口时存在顶部条

窗口创建代码展示

const mainWindow = new BrowserWindow({
    width: 920,
    height: 465,
    transparent: true,
    hasShadow: false,
    titleBarStyle: 'hidden',
    resizable: false,
    frame: false,
    parent: null,
    webPreferences: {
        contextIsolation: false,
        nodeIntegration: true,
        devTools: false
    }
})

问题情况视频演示

img

希望把上面显示 document 条给隐藏掉,谢谢巨佬,解决就采纳!

  • 写回答

13条回答 默认 最新

  • 专家-赤兔[在线] 全栈领域优质创作者 2023-12-01 13:39
    关注

    引自强大而免费的微信小程序:皆我百晓生

    要隐藏顶部的TitleBar条,您可以尝试使用 frame: false 选项来创建窗口。但是根据您提供的代码,我注意到您已经设置了 frame: false,但仍然看到了顶部的TitleBar条。

    这是因为在某些操作系统上,即使设置了 frame: false,仍然会显示系统默认的TitleBar条。为了彻底隐藏TitleBar条,您可以尝试使用隐藏系统默认TitleBar条的库,比如 frameless-window

    首先,在项目目录中安装 frameless-window 库:

    npm install frameless-window
    

    然后,在您的代码中导入并使用该库:

    const frameless = require('frameless-window');
    
    const mainWindow = frameless({
      width: 920,
      height: 465,
      transparent: true,
      hasShadow: false,
      parent: null,
      webPreferences: {
        contextIsolation: false,
        nodeIntegration: true,
        devTools: false
      }
    });
    
    // 使用 mainWindow.loadURL() 等方法加载您的应用程序页面
    
    // 然后调用 show() 显示窗口
    mainWindow.show();
    

    通过使用 frameless-window 库,您应该能够彻底隐藏顶部的TitleBar条。

    评论 编辑记录

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 12月8日
  • 创建了问题 12月1日