QML 中的缩放和定位答案

【问题标题】：Scaling and positioning in QMLQML 中的缩放和定位
【发布时间】：2019-07-10 08:41:27
【问题描述】：

我正在开发一个运行到QQuickWidget 的 Qt5.11.1 QML 应用程序。调整大小模式设置为SizeRootObjectToView。因此，每当我调整 QMainWindow 的大小时，我都会看到我的 QML 根对象也在缩放。

在里面我有一些锚定的图像来填充父级，它们按预期缩放。相反，我遇到了较小的图像或文本应该保持相同的相对位置和大小的问题。

当比率为 1:1 时，我从绝对位置和大小开始。示例：根项目的大小为 1920x1080 像素，我必须将其他项目（主要是图像和文本）放置到给定的坐标。

当根改变它的大小时，所有元素都应该跟随它。我试过这个：

import QtQuick 2.11
import QtQuick.Controls 2.4
import QtGraphicalEffects 1.0

Rectangle {
    id: root
    visible: true
    color: "black"

    property real ratio: root.width / 1920

    readonly property real x_CenterGauge: 502
    readonly property real y_CenterGauge: 489

    Image {
        x: x_CenterGauge * ratio
        y: y_CenterGauge * ratio
        scale: ratio
    }
}

但这不起作用，因为当我调整窗口大小时，root.width 属性（以及ratio）不会改变。但它实际上会调整根元素的大小，因为任何锚定项目也会调整大小！只有当我最大化/最小化窗口时，我才会得到改变。

我阅读了this article 和this question，但我仍然不明白如何处理 QML 中的调整。

【问题讨论】：

什么是Image1？一些自定义项目？错字？ root 是什么？请提供所有适当的来源。尝试添加onRatioChanged 处理程序以查看值变化。
抱歉，打错了。这是一个标准的Image。
如前所述，ratio 不会改变（即onRatioChanged）在右下角调整窗口大小时不会被调用。只有当我最大化或最小化它时。
我已经测试了代码，它对我来说效果很好。看起来你做错了什么，请提供Minimal, Complete, and Verifiable example，以便我们运行和测试它。无论如何，我建议你使用Layout 而不是自定义定位。
我不能使用Layout，因为需要将项目定位在背景图像上，所以我必须准确地放置它们。

标签： qt resize qml qt5 scaling

【解决方案1】：

在测试中，似乎是财产规模有问题通过修改宽度和高度来解决问题

Rectangle {
    id: root
    visible: true
    color: "black"

    property real ratio: root.width / 1920

    readonly property real x_CenterGauge: 202
    readonly property real y_CenterGauge: 489

    Image {
        x: root.x_CenterGauge * root.ratio
        y: root.y_CenterGauge * root.ratio

        width: implicitWidth * root.ratio
        height: implicitHeight * root.ratio
        //scale: ratio
    }
}

【讨论】：

正确。 scale 属性实际上不会改变元素的大小是有意的。在处理动画时非常有用。