QML how to center 4 labels in a rectangle

astoffregen

I am trying to center 4 symbols in a rectangle starting from the center.

The rectangle code looks (simplified) like this

Rectangle { id: userlogon_passwords; Layout.fillWidth: true; Layout.fillHeight: true; Layout.preferredHeight: 250; color: "yellow"
            RowLayout { anchors.centerIn: parent 
                spacing: 80
                UserPasswordField { index: 0; p_isSelected: userlogon.p_selectedField == 0 }
                UserPasswordField { index: 1; p_isSelected: userlogon.p_selectedField == 1 }
                UserPasswordField { index: 2; p_isSelected: userlogon.p_selectedField == 2 }
                UserPasswordField { index: 3; p_isSelected: userlogon.p_selectedField == 3 }
            }
        }

UserPasswordField.qml looks like this

Item {
    id: root
    property int index
    property bool p_isSelected
    property bool p_isTimerRunning
    property bool p_isRotated: p_isSelected && p_isTimerRunning 
    property int p_value    

    Label {
        font.pixelSize: root.p_isRotated ? userlogon_passwords.height * 0.5 : userlogon_passwords.height * 0.4
        font.bold: root.p_isSelected
        color: configuration.getColor(root.p_isSelected ? Colors.PasswordEnabled : Colors.PasswordDisabled)
        text: root.p_isRotated ? root.p_value : "*"
        style: Text.Outline
        styleColor: "darkgray"
    }
}

Result is this

The stars are shifted to the right, but should move further to the left. Is there a simple trick?

GrecKo

remove the outer Item in UserPasswordField.qml

JoeCFD

https://forum.qt.io/topic/141934/calculate-width-of-qml-item/4

freedbrt

You didnt set PasswordTextField width and height

GrecKo

remove the outer Item in UserPasswordField.qml

astoffregen

@GrecKo Sorry for late response. It works. Can you describe where the problem with the outer item is?

GrecKo

You Item had a width and height of 0.
Label has implicit width and height based on its content.