【问题标题】:Avoid Overlapping Browserwindows避免重叠的浏览器窗口
【发布时间】:2022-02-21 20:20:31
【问题描述】:

我正在开发一个 Electron 应用程序。我在桌面上有 Browserwindows,但我希望在避免与可停靠窗口重叠以及在我们通过鼠标更改窗口宽度时并排调整彼此大小方面具有与桌面上其他窗口相同的行为宽度因此,下一个窗口的变化。 我的意思是在桌面上捕捉窗口。 喜欢this image

但是我的问题是,当我将 frame 属性设置为 false 时,电子制作的窗口不遵循这种行为,它让其他窗口重叠,并且在并排窗口调整大小时不考虑电子窗口和...

current electron windows is on right side

在 Linux 中,通过将 style="-webkit-app-region: drag" 添加到正文中,它可以按我的意愿工作,并且它考虑捕捉电子窗口。但在 Windows 操作系统中,捕捉不起作用。

在捕捉方面,对于 WINDOWS 操作系统上的无框电子窗口,我如何考虑与 LIUX 中的无框窗口相同的行为?

【问题讨论】:

    标签: javascript node.js google-chrome electron


    【解决方案1】:

    我不相信 Electron 可以控制其他(非电子)窗口的位置(x、y、宽度、高度)。这样做需要使用较低级别的语言。

    在 Windows 上,您可以右键单击窗口标题栏并将其拖动到屏幕的左侧或右侧边缘,它将将该窗口的宽度扩大到 50%(高度扩大到 100%)。在此之后,您可以选择另一个打开的窗口来填充剩余的宽度。在 Windows 上,没有本机功能可以在同一屏幕上同时调整两个窗口的拆分,尽管它有时可能是喜怒无常的。

    在 MacOS 上,您可以右键单击并按住最大化按钮。将出现一个弹出菜单,提示您将窗口最大化或平铺到屏幕的左边缘或右边缘。在此之后,您可以选择另一个打开的窗口来填充剩余的宽度。在 MacOS 上,可以同时调整同一屏幕上两个窗口的拆分。

    在 Linux(至少是 Ubuntu)上,您可以右键单击窗口标题栏并将其拖动到屏幕的左侧或右侧边缘,它将将该窗口的宽度扩大到 50%(高度扩大到 100%) .要使用另一个窗口填充剩余的屏幕宽度,您需要通过将第二个窗口的标题栏拖动到屏幕的另一侧来执行相同的操作。一旦屏幕被两个窗口填满,就可以同时在同一屏幕上调整两个窗口的拆分。

    如果您希望“停靠”多个“由 Electron 应用程序创建”的窗口,那么您需要存储每个窗口的位置(x、y、宽度、高度)并监控这些值的任何变化。如果有变化,则相应地更新其他“停靠”窗口的位置。将需要一些编码,但它可以在没有太多问题的情况下实施。

    现在在您的实例 (https://i.stack.imgur.com/aZy3e.png) 中,我注意到您的 Electron 应用程序没有标题栏。这将使任何操作系统都难以本地管理此功能。

    也许另一种解决方案是在不使用时将您的 Electron 应用程序滑出视图,并在光标碰到屏幕边缘时将其滑回。如果在尝试使用滚动条时他们的光标不准确,并且您的应用在滚动条上不断滑入和滑出,用户满意度将会下降。

    【讨论】:

    • 感谢您的回复,我稍微修改了问题并更好地描述了它,事实上,浏览器窗口在有框架时在窗口中捕捉是正确的,但是当它是无框架时,它未在桌面上进行捕捉。
    • 我刚刚在我的一个 Electron 应用程序上设置了 frame: false<body style="-webkit-app-region: drag">。在我的 Windows 操作系统上捕捉和调整分割工作。结果,我围绕 Windows 操作系统本机能力更新了我的答案,以同时调整两个窗口的拆分(尽管有时对于特定的窗口有点喜怒无常)。我对你现在的问题可能有点茫然。如果您有时间,请创建一个可以克隆的基本应用程序。然后我们可以在我们自己的系统上对其进行测试并进行比较。我可以访问:Windows 10、MacOS Catalina 和 Linux Ubuntu 20.04
    猜你喜欢
    • 2011-02-04
    • 1970-01-01
    • 2019-08-28
    • 1970-01-01
    • 2011-12-29
    • 1970-01-01
    • 2017-09-04
    • 2020-04-25
    • 1970-01-01
    相关资源
    最近更新 更多