QT Quick QML应用程序支持多种显示尺寸

问题描述

如何让QT Quick QML应用程序在不同的屏幕尺寸上正确呈现?
例如,屏幕尺寸为800x600和1280x720。

那么我应该如何构建屏幕以使其在两个屏幕上看起来都一样?
我知道我们必须使用锚,并避免X,Y固定位置。

但是我们需要为组件提供HeightWidth,这导致在两个不同的屏幕上显示同一组件的问题。

我已阅读以下链接
https://doc.qt.io/qt-5/scalability.html
https://doc.qt.io/archives/qt-4.8/scalability.html

QT建议,构建两个单独的父级布局听起来不合逻辑。

扩展方法是否可行?
QML fit screen on all resolutions

解决方法

通常,当我处理可伸缩性时,它是在智能手机环境中进行的,它的可变性比您的情况大得多,但我认为相同的原理也适用。

通常来说,我不认为您应该尝试缩放整个用户界面的逻辑像素比率。我认为应该保持1:1的比例,其中QML中的一个逻辑屏幕单位(像素)等于QML之外的一个逻辑屏幕单位(像素)。

这样做的主要原因是您通常将至少具有两个不同的宽高比:在您的情况下,800x600为4:3,而1280x720为16:9。当宽高比不匹配时,如果您的UI本身选择了这些高宽比中的一个或另一个,并试图在两个高宽比上全屏显示(假设您不想在任一方向上拉伸UI的图像-这对于UI几乎是没有意义的。

因此,我通常要做的是使用RowLayout和ColumnLayout,并在UI本身上设置适当的fillWidth和fillHeight,以便UI的适当内部区域可以随着屏幕尺寸的变化而扩展,以容纳更大或更小的空间。这与网络应用中用于容纳各种窗口大小的原理相同。

一种很好的方法是将应用程序构建到桌面环境(Mac或Windows),然后调整窗口大小,然后查看布局如何适应不同的屏幕尺寸。一旦合理地确定了要处理的大小范围,就可以针对目标环境进行构建,并且应该可以正常运行。