在前缀尺寸之间手动调整窗口大小答案

【问题标题】：Manually resize window between prefixed dimensions在前缀尺寸之间手动调整窗口大小
【发布时间】：2022-06-10 17:23:01
【问题描述】：

我有一个只能调整到几个尺寸的窗口：

我正在尝试像这样使用 will-resize 事件：

win.on("will-resize", (event, bounds, edge) => {
         if (bounds.width < 580 && bounds.height < 250){
            event.preventDefault();
            win.setBounds({ height: 250 });
        }
        else if (bounds.width > 580 && bounds.height > 190){
            event.preventDefault();
            win.setBounds({ height : 190 })
        }
        else if (bounds.width < 990 && bounds.height > 135 ){
            event.preventDefault();
            win.setBounds({ height: 135 })
        } 

        else if (bounds.width > 991 && bounds.height > 90) {
            event.preventDefault();
            win.setBounds({ height: 90 })
        }
    });

在许多情况下存在重叠，因此逻辑不起作用。

这里有一些非常明显的东西我错过了，但我想不通！

【问题讨论】：

标签： electron

【解决方案1】：

因此，您有 4 个定义的窗口大小需要遵守。

在编码之前您需要回答的一个问题是：

宽度在范围内但高度超出范围，或者
高度在范围内，但宽度超出范围。

您应该以哪种方式移动有效窗口的边界？水平（宽度）还是垂直（高度）？

+---------------+---------------+---------------+---------------+
|               |               |               |               |
|       ?       |       ?       |       ?       |   1200 x 90   |
|               |               |               |               |
+---------------+---------------+---------------+---------------+
|               |               |               |
|       ?       |       ?       |   991 x 135   |       ?
|               |               |               | 
+---------------+---------------+---------------+
|               |               |
|        ?      |   580 x 185   |       ?               ?
|               |               |
+---------------+---------------+
|               |
|   315 x 250   |       ?               ?               ?
|               |
+---------------+

您当前的代码只设置了高度边界，而忽略了宽度边界的任何设置。

我在下面创建了一个小测试文件来测试逻辑。这里最重要的是“窗口大小”逻辑。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
    </head>
    <body>
        <label for="width">Width: </label>
        <input type="text" id="width">

        <label for="height">Height: </label>
        <input type="text" id="height">

        <hr>

        <div>315 x 250 : <span id="small"></span></div>
        <div>580 x 185 : <span id="medium"></span></div>
        <div>991 x 135 : <span id="large"></span></div>
        <div>1200 x 90 : <span id="x-large"></span></div>
    </body>
    <script>
        let widthInput = document.getElementById('width');
        let heightInput = document.getElementById('height');
        let smallWindow = document.getElementById('small');
        let mediumWindow = document.getElementById('medium');
        let largeWindow = document.getElementById('large');
        let xLargeWindow = document.getElementById('x-large');

        widthInput.addEventListener('keyup', () => { calculate(); });
        heightInput.addEventListener('keyup', () => { calculate(); });

        function calculate() {
            if (widthInput.value.length === 0 || heightInput.value.length === 0) {
                return;
            }

            smallWindow.innerText = '';
            mediumWindow.innerText = '';
            largeWindow.innerText = '';
            xLargeWindow.innerText = '';

            // Window size logic
            if (widthInput.value <= 315) { smallWindow.innerText = 'This one'; }
            if (widthInput.value > 315 && widthInput.value <= 580) { mediumWindow.innerText = 'This one'; }
            if (widthInput.value > 580 && widthInput.value <= 991) { largeWindow.innerText = 'This one'; }
            if (widthInput.value > 991) { xLargeWindow.innerText = 'This one'; }
        }
    </script>
</html>

因此，将其转换为在您的 Electron 应用程序中使用。

win.on("will-resize", (event, bounds, edge) => {
    if (bounds.width <= 315) {
        event.preventDefault();
        win.setBounds({width: 315, height: 250});
    }

    if (bounds.width > 315 && bounds.width <= 580) {
        event.preventDefault();
        win.setBounds({width: 580, height: 185});
    }

    if (bounds.width > 580 && bounds.width <= 991) {
        event.preventDefault();
        win.setBounds({width: 991, height: 135});
    }

    if (bounds.width > 991) {
        event.preventDefault();
        win.setBounds({width: 1200, height: 90});
    }
});

如果您的用例/要求与上述假设不同，请通过更新您的问题来告知我以获得更精确的答案。

【讨论】：