个性化阅读
专注于IT技术分析

如何在Electron Framework中使用最小化,最大化和关闭控件创建自定义无框架窗口(无标题栏)

点击下载

要创建没有铬的窗口或任意形状的透明窗口, 你需要使用无框架窗口API。此” api”允许你创建无边框的无边框窗口, 该窗口的一部分(例如工具栏)不属于网页。

在浏览器中, Chrome是浏览器中除网页本身(例如工具栏, 菜单栏, 标签)之外的任何可见外观。要创建无框架窗口, 需要在所需的BrowserWindow实例中将frame属性设置为false:

const {BrowserWindow} = require('electron')

let win = new BrowserWindow({
    width: 800, height: 600, frame: false
})

win.show()

提示:你可能希望在主窗口(main.js)中启用此功能, 该功能应类似于:

function createWindow () {
    // Create the browser window.
    mainWindow = new BrowserWindow({width: 800, height: 600, frame: false})

    // and load the index.html of the app.
    mainWindow.loadURL(`file://${__dirname}/index.html`)

    // Open the DevTools.
    mainWindow.webContents.openDevTools()

    // Emitted when the window is closed.
    mainWindow.on('closed', function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null
    })
}

谁的执行应该创建类似于以下内容的窗口:

无框窗口,无工具栏

但是, 你可能不想删除用户关闭, 最小化或最大化你的应用程序的可能性, 因此你需要学习如何做。这些方法在BrowserWindow中可用, 因此在渲染过程中, 你只需要使用BrowserWindow常量即可检索聚焦的窗口:

const {BrowserWindow} = require('electron').remote;
// Retrieve focused window
var theWindow = BrowserWindow.getFocusedWindow();

// Execute common tasks
// Minimize
theWindow.minimize();
// Maximize app
theWindow.maximize();
// Close app
theWindow.close();

典型的按钮, 但带有一些CSS和HTML

你可以创建桌面应用程序与自定义HTML和CSS一起使用的工具栏。

在此示例中, 我们将使用以下标记:

<div id="title-bar">
    <div id="title">
        <span style="vertical-align: middle;">
            <img src="https://raw.githubusercontent.com/zeke/atom-icon/master/old-icon/2.png" style="width:20px;height:20px;"/>
        </span>
        Our Code World Frameless (But draggable, resizable and closable Window)
    </div>
     <div id="title-bar-btns">
          <button id="min-btn">-</button>
          <button id="max-btn">+</button>
          <button id="close-btn">x</button>
     </div>
</div>

还有一些使其看起来”不错”的样式:

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

#title-bar {
    -webkit-app-region: drag;
    height: 40px;
    text-align: center;
    line-height: 40px;
    vertical-align: middle;
    background-color: #03a9f4;
    padding: none;
    margin: 0px;
}

#title {
    position: fixed;
    top: 0px;
    left: 6px;
    color:white;

}

#title-bar-btns {
    -webkit-app-region: no-drag;
    position: fixed;
    top: 0px;
    right: 6px;
}

请注意, 标题栏类具有使你可以在屏幕上拖动窗口的类, 否则你的用户将被迫在屏幕上的静态位置(你可能不需要的东西)上使用你的应用程序。 -webkit-app-region:拖动;将使选定元素成为一个点, 以与原始标题栏相同的方式在屏幕上拖动整个窗口。

index.html文件中的最终实现应如下所示:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My Electron Frameless Window</title>
        <style>
            body {
                padding: 0px;
                margin: 0px;
            }

            #title-bar {
                -webkit-app-region: drag;
                height: 40px;
                text-align: center;
                line-height: 40px;
                vertical-align: middle;
                background-color: #03a9f4;
                padding: none;
                margin: 0px;
            }

            #title {
                position: fixed;
                top: 0px;
                left: 6px;
                color:white;

            }

            #title-bar-btns {
                -webkit-app-region: no-drag;
                position: fixed;
                top: 0px;
                right: 6px;
            }
        </style>
    </head>
    <body>
        <div id="title-bar">
             <div id="title">
                 <span style="vertical-align: middle;"><img src="https://raw.githubusercontent.com/zeke/atom-icon/master/old-icon/2.png" style="width:20px;height:20px;"/></span>
                 Our Code World Frameless (But draggable, resizable and closable Window)
             </div>
             <div id="title-bar-btns">
                  <button id="min-btn">-</button>
                  <button id="max-btn">+</button>
                  <button id="close-btn">x</button>
             </div>
        </div>
        <div style="text-align:center;">
            <h4>Electron rocks!</h4>
            <img src="http://ourcodeworld.com/resources/img/ocw-empty.png" width="300" height="300"/>
        </div>

        <script>
        (function () {
            // Retrieve remote BrowserWindow
            const {BrowserWindow} = require('electron').remote

            function init() {
                // Minimize task
                document.getElementById("min-btn").addEventListener("click", (e) => {
                    var window = BrowserWindow.getFocusedWindow();
                    window.minimize();
                });

                // Maximize window
                document.getElementById("max-btn").addEventListener("click", (e) => {
                    var window = BrowserWindow.getFocusedWindow();
                    if(window.isMaximized()){
                        window.unmaximize();
                    }else{
                        window.maximize();
                    }
                });

                // Close app
                document.getElementById("close-btn").addEventListener("click", (e) => {
                    var window = BrowserWindow.getFocusedWindow();
                    window.close();
                });
            };

            document.onreadystatechange =  () => {
                if (document.readyState == "complete") {
                    init();
                }
            };
        })();
        </script>
    </body>
</html>

结果应用程序将如下所示:

Electron中的无框窗口

玩得开心 !

赞(0)
未经允许不得转载:srcmini » 如何在Electron Framework中使用最小化,最大化和关闭控件创建自定义无框架窗口(无标题栏)

评论 抢沙发

评论前必须登录!