Rectangle with dynamic text size doesn't center

Djoe

Hello,

I am trying to center a rectangle with text. Once the text has changed the rectangle is not centered anymore. I suppose I have a binding issue. The first iteration works correctly but not the second one.
Bellow a simple example of my problem :

Page
{
    property bool temp : false
    RowLayout
    {
        id: mainLayout

        anchors.centerIn: parent

        Rectangle
        {
            id: rectangle


            width: labelText.paintedWidth + 16
            height: labelText.paintedHeight + 6

            radius: 8
            color: "red"

            Label
            {
                Timer {
                        interval: 500; running: true; repeat: true
                        onTriggered:
                        {
                            if (temp == false)
                                labelText.text = "test"

                            if (temp === true)
                                labelText.text = "Why doesn't it center ?"

                            temp = !temp
                        }
                    }

                id: labelText
                anchors.centerIn: parent
                color: "black"
                text: "test"
                font.pixelSize: 70

                font.bold: true
            }
        }
    }
}

Result 1 iteration:

Result 2 iteration:

For information, on my current software I use Q_PROPERTY to update the text in the rectangle. But I think the problem stays the same.

GrecKo

Don't specify width and height in a Layout. Use Layout.preferredWidth (or implicitWidth) and Layout.preferredHeight (or implicitHeight) instead.

CP71

@Djoe
try add in rectangle obj;

anchors.centerIn: parent

Code:

Page
{
property bool temp : false
RowLayout
{
id: mainLayout

    anchors.centerIn: parent

    Rectangle
    {
        id: rectangle

        anchors.centerIn: parent

        width: labelText.paintedWidth + 16
        height: labelText.paintedHeight + 6

        radius: 8
        color: "red"

        Label
        {
            Timer {
                    interval: 1000; running: true; repeat: true
                    onTriggered:
                    {
                        if (temp == false)
                            labelText.text = "test"

                        if (temp === true)
                            labelText.text = "Why doesn't it center ?"

                        temp = !temp
                    }
                }

            id: labelText
            anchors.centerIn: parent
            color: "black"
            text: "test"
            font.pixelSize: 70

            font.bold: true
        }
    }
}

}

Djoe

@GrecKo Thank you for your answer. It works perfectly !