Is there a way to use anchors to position QML elements without generating warnings in a Layout?

Question

I am using anchors with the elements inside of Layout to place the elements from center at their respective places, but I am facing warnings (I am aware if we use anchors with Layouts it will throw warnings), but I want to find out a way to eliminate those warnings.

RowLayout {
    id: rowFirst
    spacing: 5
    anchors.centerIn: parent

    Label {
        id: rgeValue
        text: "0"
    }

    Label {
        id: erUnit
        anchors.centerIn: parent
        anchors.horizontalCenterOffset: rgeValue.width / 2 + 5
        anchors.verticalCenterOffset: rgeValue.height / 2 - rgeValueUnit.height
        text: "V"
    }
}

As per the design perspective I shouldn't use the margins and paddings with layout.

Answer 1

You can get rid of the warnings by wrapping your items into another item as a container. Still, the layout is in charge or placing your wrapper items into its cells.

RowLayout {
    id: rowFirst

    spacing: 5
    anchors.centerIn:  parent

    Item {
        Layout.fillHeight: true
        Layout.fillWidth: true

        Label {
            id: rgeValue
            text:  "0"
        }
    }

    Item {
        Layout.fillHeight: true
        Layout.fillWidth: true

        Label {
            id: rgeValueUnit
            text:  "V"
        }
    }
    
    Item {
        Layout.fillHeight: true
        Layout.fillWidth: true

        Label{
            id: erUnit

            anchors.centerIn:  parent
            anchors.horizontalCenterOffset: rgeValue.width/2+5
            anchors.verticalCenterOffset: rgeValue.height/2-rgeValueUnit.height

            text:"V"

        }
    }
}

As mentioned from @StephenQuan it would help to get a better impression what you want to achieve. For me it seams that you want to use Layouts in a strange way.

Answer 2

If the parent is a RowLayout, ColumnLayout, then you should not use anchoring in the children. The children should use the Layout attached property. Alternatively, if the parent is an Item, Rectangle, then, it's okay to use anchoring. You shouldn't be mixing the two.

Perhaps you're over thinking the problem. I mocked up the following that demonstrates how to center your Labels inside a RowLayout with minimal code. I put in a dummy background so that you can confirm that the Label text is indeed centered:

    RowLayout {
        anchors.centerIn: parent
        Label {
            Layout.preferredWidth: 100
            Layout.preferredHeight: 50
            background: Frame { }
            text: "0"
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
        }
        Label {
            Layout.preferredWidth: 100
            Layout.preferredHeight: 50
            background: Frame { }
            text: "V"
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
        }
    }

You can Try it Online!