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.

what is Image1? Some custom item? typo? what is root? Please provide all appropriate source. Try to add onRatioChanged handler to see the value changes. — folibis
As said, ratio doesn't change (i.e. onRatioChanged) is not called when resizing the window with the lower-right corner. Only when I maximize or minimize it. — Mark
I've tested the code and it works well for me. It looks that you do something wrong, please provide Minimal, Complete, and Verifiable example so we can run and test it. Anyway, I advice you to use Layout instead of custom positioning. — folibis
I cannot use a Layout because need to position items on a background image, so I have to exactly place them. — Mark

Skogandr Skogandr · Accepted Answer · 2019-02-18T14:48:25

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

Scaling and positioning in QML

1 Answers