当我将窗口移动到具有不同DPI的屏幕时，为什么我的QML项目没有缩放？

问题描述

我正在使用Windows 10和Qt 5.15.1。当我将QML应用程序窗口从DPI较低的屏幕（比例为100％）移动到DPI较高的屏幕（125％比例）时，该窗口会按预期放大（调整大小）以使用更多像素。这样一来，两个屏幕上的窗口看起来都是相同的物理尺寸。

但是，窗口中的项目无法缩放-它们保持相同的像素数。因此，在高DPI屏幕上，所有项目看上去实际上都较小。

当我在具有不同DPI的屏幕之间移动窗口时，如何缩放项目（以相同的物理尺寸）？我希望所有项目都发生这种情况，例如文本，按钮，矩形等。

我的QML是：

import QtQuick 2.12
import QtQuick.Controls 2.12

applicationwindow {
    visible: true
    width: 240
    height: 60

    Text {
        text: "Hello World"
        font.pointSize: 14
    }

}

我的Python是：

QtCore.QCoreApplication.setAttribute(Qt.AA_EnableHighDpiScaling)
QtCore.QCoreApplication.setAttribute(Qt.AA_USEOpenGLES)

app = QtWidgets.QApplication([])

engine = QtQml.QQmlEngine()
context = QtQml.QQmlContext(engine.rootContext())
designer = QtQml.QQmlComponent(engine,'main.qml')
designer.create(context)

app.exec_()

解决方法

我了解到Qt rounds DPI scaling默认为整数。因此在我的屏幕上以125％的比例缩放时，它四舍五入为100％...因此没有变化。

可以通过将 ERROR in multi ./resources/js/app.js ./resources/sass/app.scss ./resources/sass/welcome.scss Module not found: Error: Can't resolve 'postcss-loader' in 'C:\wamp64\www\equipmentFinderAssistant' @ multi ./resources/js/app.js ./resources/sass/app.scss ./resources/sass/welcome.scss /js/app[1] ERROR in multi ./resources/js/app.js ./resources/sass/app.scss ./resources/sass/welcome.scss Module not found: Error: Can't resolve 'postcss-loader' in 'C:\wamp64\www\equipmentFinderAssistant' @ multi ./resources/js/app.js ./resources/sass/app.scss ./resources/sass/welcome.scss /js/app[2] ERROR in ./resources/js/components/ProductPreviewBar.vue Module not found: Error: Can't resolve 'postcss-loader' in 'C:\wamp64\www\equipmentFinderAssistant' @ ./resources/js/components/ProductPreviewBar.vue 4:0-78 @ ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/ProductCard.vue?vue&type=script&lang=js& @ ./resources/js/components/ProductCard.vue?vue&type=script&lang=js& @ ./resources/js/components/ProductCard.vue @ ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/CategoryBox.vue?vue&type=script&lang=js& @ ./resources/js/components/CategoryBox.vue?vue&type=script&lang=js& @ ./resources/js/components/CategoryBox.vue @ ./resources/js/app.js @ multi ./resources/js/app.js ./resources/sass/app.scss ./resources/sass/welcome.scss npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js` npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the @ development script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\nateg\AppData\Roaming\npm-cache\_logs\2020-09-17T16_37_51_015Z-debug.log npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! @ dev: `npm run development` npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the @ dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\nateg\AppData\Roaming\npm-cache\_logs\2020-09-17T16_37_51_079Z-debug.log 环境变量设置为QT_SCALE_FACTOR_ROUNDING_POLICY来as of Qt 5.14禁用此行为。或在代码中：

PassThrough

或者，如果您知道监视器的比例因子，则可以通过设置QtGui.QGuiApplication.setHighDpiScaleFactorRoundingPolicy( Qt.HighDpiScaleFactorRoundingPolicy.PassThrough) 环境变量（如QT_SCREEN_SCALE_FACTORS）直接指定它们。

所以现在我在两个屏幕上都能获得预期的自动缩放比例。

,

使用较高的DPI会更改应用程序的尺寸对我来说真的很奇怪。不过，它并不是真正的“扩展”。只是使窗口变大了。而且您没有将Rectangle的大小与ApplicationWindow绑定在一起，因此这就是为什么它保持相同的大小。这里的简单答案是您可以执行以下操作：

    Rectangle {
        anchors.fill: parent
        color: "green"
    }

这将使Rectangle保持与应用程序相同的大小。

如果您实际上希望在ApplicationWindow更改大小时缩放应用程序的所有内容（包括Rectangle的子代），那么您可以执行以下操作：

ApplicationWindow {
    visible: true
    width: defaultWidth
    height: defaultHeight

    property real defaultWidth: 320
    property real defaultHeight: 240

    Rectangle {
        width: defaultWidth
        height: defaultHeight
        color: "green"

        transform: Scale { 
            xScale: parent.width / defaultWidth
            yScale: parent.height / defaultHeight
        }
    }
}