logo标签列表

Neutralinojs：当窗口从最大化状态拖出时，如何最大化Neutralino窗口

javascriptnode.jsuser-interfacetitlebarneutralinojs
3
我为Neutralino窗口制作了一个自定义标题栏，其中有三个简单的按钮用于关闭、最大化、最小化。我还使其在拖动标题栏时使用Neutralino.window.setDraggableRegion拖动整个窗口。但是，现在的问题是，在窗口最大化后拖动标题栏时，它应该像其他Win32应用程序一样取消最大化。但是它没有这样做，它只是移动窗口。我尝试通过在标题栏div中使用ondrag="dragMinimize()" draggable="true"和JavaScript函数来修复它。
async function dragMinimize() {
  let isMaximized = await Neutralino.window.isMaximized();
  if(isMaximized) {
    Neutralino.window.unmaximize();
  }
}

这个问题是指标题栏在拖动未最大化和最大化的窗口时会脱离窗口
如何解决这个问题

1个回答
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();，这将导致我们的窗口取消最大化。

以下是完整代码：

  1. 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>
  1. 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;
}
  1. 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);

结果：

Preview

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接