"Neutralinojs：如何在将 Neutralino 窗口拖离最大化状态时最大化它"

Question

我为 Neutralino 窗口制作了一个自定义标题栏。
它有 3 个简单的按钮，分别是关闭、最大化、最小化。
我还这样做了，当拖动标题栏时，它使用Neutralino.window.setDraggableRegion<\/code>拖动整个窗口。但现在的问题是，当我拖动标题栏时窗口最大化后，它应该像其他 Win32 应用程序一样取消最大化。但它没有，它只是移动窗口。我确实尝试通过ondrag="dragMinimize()" draggable="true"<\/code>栏div<\/code>中的 ondrag ondrag="dragMinimize()" draggable="true"<\/code>和 js 中的函数来解决这个问题：

async function dragMinimize() {
  let isMaximized = await Neutralino.window.isMaximized();
  if(isMaximized) {
    Neutralino.window.unmaximize();
  }
}

Answer 1

简单来说，当鼠标移到标题栏上时，您需要运行一个函数并检查是否按下了鼠标左键，然后您可以使用Neutralino.window.unmaximize()

签出此代码：

async function initCustomWindowBar() {
    const closeBtn = document.getElementById("close");
    const minimizeBtn = document.getElementById("minimize");
    const maximizeBtn = document.getElementById("maximize");
    const draggableRegion = document.getElementById("draggableRegion");

    closeBtn.addEventListener("click", async () => {
        await Neutralino.app.exit(0);
    })

    minimizeBtn.addEventListener("click", async () => {
        await Neutralino.window.minimize();
    })

    maximizeBtn.addEventListener("click", async () => {
        await Neutralino.window.maximize();
    })

    draggableRegion.addEventListener("mousemove", async (event) => {
        if (event.buttons == 1 && await Neutralino.window.isMaximized()) {
            await Neutralino.window.unmaximize();
        }
    })

    await Neutralino.window.setDraggableRegion('draggableRegion');
}

Neutralino.init();
Neutralino.events.on("ready", initCustomWindowBar);

所以在这里我们在一切准备就绪后调用initCustomWindowBar函数。

在我们的initCustomWindowBar函数中，我们首先收集所有用于最小化、最大化、关闭和窗口可拖动区域的 HTML 元素。

然后我们将事件侦听器添加到我们的 3 个按钮，这些按钮将运行相应的函数来最小化、最大化和关闭我们的窗口。

最后我们在我们的可拖动区域添加一个事件监听器，事件监听器是mousemove ，只有当鼠标在我们的可拖动区域移动时，这个事件监听器才会每次运行我们的函数。

这个事件监听器还将给我们event对象作为参数，我们可以用它来检查函数被调用时是否按下了鼠标左键。

现在，当用户将鼠标移到我们窗口的可拖动区域上时，将运行一个函数，该函数将检查鼠标左键是否被按下以及窗口是否最大化，如果这两个条件都为真，那么我们将运行await Neutralino.window.unmaximize(); 这将导致我们的窗口未最大化。

这是完整的代码：

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>NeutralinoJs sample app</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="draggableRegion">
        <span class="title">My Window</span>
        <span class="windowButtons">
            <span id="minimize"></span>
            <span id="maximize"></span>
            <span id="close"></span>
        </span>
    </div>
    <div id="neutralinoapp">
        <h1>NeutralinoJs</h1>
        <div id="info"></div>
    </div>
    <script src="js/neutralino.js"></script>
    <script src="js/main.js"></script>
</body>
</html>

CSS

#draggableRegion {
    display: block;
    text-align: center;
    user-select: none;
    background-color: #333;
    color: #fff;
    margin-bottom: 10px;
    padding: 20px;
    cursor: default;
}

#draggableRegion .windowButtons {
    user-select: none;
    float: right;
}

#draggableRegion .title {
    user-select: none;
}

.windowButtons span {
    display: inline-block;
    cursor: pointer;
    width: 1rem;
    height: 1rem;
    background-color: #E8E8E8;
    border-radius: 100%;
}

.windowButtons span#minimize {
    background-color: #eebc3c;
}

.windowButtons span#maximize {
    background-color: #7aca4f;
}

.windowButtons span#close {
    background-color: #df6158;
}

JavaScript

function onWindowClose() {
    Neutralino.app.exit();
}

async function initCustomWindowBar() {
    const closeBtn = document.getElementById("close");
    const minimizeBtn = document.getElementById("minimize");
    const maximizeBtn = document.getElementById("maximize");
    const draggableRegion = document.getElementById("draggableRegion");

    draggableRegion.addEventListener("mousemove", async (e) => {
        if (e.buttons == 1 && await Neutralino.window.isMaximized()) {
            await Neutralino.window.unmaximize();
        }
    })

    closeBtn.addEventListener("click", async () => {
        await Neutralino.app.exit(0);
    })

    minimizeBtn.addEventListener("click", async () => {
        await Neutralino.window.minimize();
    })

    maximizeBtn.addEventListener("click", async () => {
        await Neutralino.window.maximize();
    })

    await Neutralino.window.setDraggableRegion('draggableRegion');
}

Neutralino.init();
Neutralino.events.on("windowClose", onWindowClose);
Neutralino.events.on("ready", initCustomWindowBar);

结果：

很抱歉质量不好，GIF 做得不好。

"Neutralinojs：如何在将 Neutralino 窗口拖离最大化状态时最大化它"

问题描述

1 个解决方案

解决方案1
0 2022-01-23 22:13:07

"Neutralinojs：如何在将 Neutralino 窗口拖离最大化状态时最大化它"

问题描述

1 个解决方案

解决方案1 0 2022-01-23 22:13:07

解决方案1
0 2022-01-23 22:13:07