How to center elements in ColumnLayout

Question

how can I center elements in ColumnLayout?

Here is my qml code:

ApplicationWindow {
    id: root
    visible: true
    width: 640
    height: 640
    title: qsTr("Your Booking")
    GridLayout{
        anchors.fill: parent
        columns: 2
        flow: GridLayout.TopToBottom
        Rectangle{
            id: appBar
            Layout.columnSpan: 2
            width: root.width
            height: root.height/10
            color: "red"
        }
        ColumnLayout{
            spacing:5
            id: columnData
            height: root.height - appBar.height
            width: root.width/2

            ComboBox{
                 anchors.horizontalCenter: parent.horizontalCenter
            }
            ComboBox{

            }
            ComboBox{
            }
            ComboBox{
            }
            ComboBox{
            }
        }
        ColumnLayout{

        }

    }
}

I want to center ComboBoxes in ColumnLayout.

Answer 1

You should avoid using anchors and layouts at the same time. Mixing them at the same level would lead to the malfunction of the layouts or some unexpected results (however, using anchors inside the items in layouts is ok).

To align items in layouts, you can use the attached properties: Layout.alignment, e.g.:

 Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter

This statement would make your item stay exactly in the center of your layout.