Anchor Loop with Layout.centerIn?

[fcarney]

I have this code:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.5

ApplicationWindow {
    id: mainwin
    visible: true
    width: 1920/2
    height: 1080/2

    Rectangle {
        id: meters1
        width: parent.width
        height: parent.height/2

        color: "red"

        RowLayout {
            spacing: 5
            anchors.centerIn: parent

            Rectangle {
                Layout.minimumHeight: 50 //meters1.height
                Layout.minimumWidth: height*2
                color: "darkgrey"

                Text {
                    anchors.centerIn: parent
                    text: "meter1"
                }
            }
            Rectangle {
                Layout.minimumHeight: 50 //meters1.height
                Layout.minimumWidth: height*2
                color: "grey"

                Text {
                    anchors.centerIn: parent
                    text: "meter2"
                }
            }
        }
    }
}

It gives me this error:

qrc:/main_center.qml:19:9: QML RowLayout: Possible anchor loop detected on centerIn.

I don't understand where the loop could be. Is this a real error?

[fcarney]

@fcarney said in Anchor Loop with Layout.centerIn?:

I don't understand where the loop could be.

I think its a bug on loop detection or centerIn works differently than I think it does.
I can make the error go away by replacing "anchors.centerIn: parent" with this:

anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter

[Shrinidhi Upadhyaya]

Hi @fcarney , just to add to it

• First thing is anchors.centerIn is a convenience anchor.

• anchors.centerIn expects a QQuickItem which means that, it should have some height or width, so based upon the height or width it anchors it, while anchors.horizontalCenter expects a QQuickAnchorLine, so i guess what it does is irrespective of height or width it positions itself with respect to the parent.

So now for example if you give like this in your code:-

anchors.centerIn: parent.horizontalCenter

It will give you a error like this:-

• And as i see in your code you have not given height and width to the RowLayout, you need to specify the height and width to it, the reason why the 2 Rectangles are taking the height and width now is because you have hardcoded the width and height.

So for example just remove the Text inside the 2 rectangles, you will have the below output:-

But if you replace:-

 //                Layout.minimumHeight: 50 //meters1.height
//                Layout.minimumWidth: height*2
            Layout.fillHeight: true
            Layout.fillWidth: true

Then in the output nothing will be visible because the RowLayout does not have any height and width, but if you give height and width to the RowLayout, you will have this:-

Note:- Please do correct me if iam wrong somewhere, lets all learn together cheers :-)

[fcarney]

@Shrinidhi-Upadhyaya said in Anchor Loop with Layout.centerIn?:

Then in the output nothing will be visible because the RowLayout does not have any height and width, but if you give height and width to the RowLayout,

I think you are right. I ended up switching to a Row component and I gave it an "anchors.fill: parent" and also the:

anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter

So now it behaves better.
I was not sure if a RowLayout could be given dimensions as a layout I thought depended upon is children to determine its size. That might be where the loop came in. It needs the size of the children to determine where to place the component to center it.