Prevent overlap in Column with scaled

Mlibu

I have a need to use scale with one item in a Column. I cannot figure out how to eliminate the overlap between the two items. Any ideas? Thanks.

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Column {
        anchors.centerIn: parent
        Rectangle {
            id: topRect
            color: "red"
            height: topText.implicitHeight
            width: topText.implicitWidth
            scale: 3
            Text {
                id: topText
                text: "This should not overlap"
            }
        }
        Rectangle {
            id: botRect
            height: 50
            width: 50
            color: "blue"
        }
    }
}

lemons

The issue is that the column does not know about the rendered height of the item if you use scale.
The height property remains the same, as otherwise the scale would scale the new height of the item.

If you want to stick with scale, you could do something like this:

Window {
    width: 400
    height: 680
    visible: true

    Column {
        anchors.centerIn: parent

        // add a wrapper for scaleable item
        Item {
            anchors.horizontalCenter: parent.horizontalCenter
            // set height and width to the scaled height and width of child
            height: topRect.height * topRect.scale
            width: topRect.width * topRect.scale
            Rectangle {
                id: topRect
                color: "red"
                height: 100
                width: 100
                scale: 3
                // add transformOrigin top left, to scale to the lower right
                // this way the scaled item will fill the wrapper item
                transformOrigin: Item.TopLeft
            }
        }
        Rectangle {
            id: botRect
            // only for better visualizing this item is right below the scaled one
            anchors.horizontalCenter: parent.horizontalCenter
            height: 100
            width: 100
            color: "blue"
        }
    }

    // just for testing
    Button {
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        text: "Toggle Scale Change"
        onClicked: {
            topRect.scale = topRect.scale === 1 ? 3 : 1
        }
    }
}

Mlibu

Thank you. Answer was so simple. I'm still getting used to the flexibility and power of binding to properties.