Scaling and positioning in QML

Question

I'm developing a Qt5.11.1 QML application that runs into a QQuickWidget. The resize mode is set to SizeRootObjectToView. Hence, whenever I resize the QMainWindow I see my QML root object that scales too.

Inside I have some images anchored to fill the parent, and they are scaled as expected. Instead I have issues with smaller images or text that should maintain the same relative position and size.

I begin with absolute position and size when ratio is 1:1. Example: the root item has a size of 1920x1080 px, and I must place the other items (mainly images and texts) to given coordinates.

When the root changes its size all the elements should follow it. I tried this:

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
    }
}

but this doesn't work because the root.width property (and in turn ratio) doesn't change when I resize the window. But it actually resize the root element because any anchored item will resize too! I get a change only if I maximize/minimize the window.

I read this article and this question, but I still don't understand how to handle the resising in QML.

Answer 1

In testing it is the property scale that seems to be a problem By modifying width and height instead it solves the problem

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
    }
}