How to horizontally center an item in a ColumnLayout in a StackLayout?

mjs225

I want to center the Rectangle horizontally in the Window. Layout.alignment: Qt.AlignHCenter works until the StackLayout is added. How to horizontally center the Rectangle? Thanks very much.

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Window {
	height: 300
	width: 240
	visible: true

	StackLayout {
		anchors.fill: parent
		ColumnLayout {
			Layout.fillWidth: true
			Layout.fillHeight: true
			Rectangle {
				color: "red"
				Layout.preferredWidth: 100
				Layout.preferredHeight: 50
				Layout.alignment: Qt.AlignHCenter
			}
			// other items
		}
		// other items
	}
}

mjs225

It turns out wrapping the child Layout in an Item does the trick. Don't know why and whether this is the best solution

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Window {
    height: 300
    width: 240
    visible: true

    StackLayout {
        anchors.fill: parent
        Item {
            Layout.fillWidth: true
            Layout.fillHeight: true
            ColumnLayout {
                anchors.fill: parent
                Rectangle {
                    color: "red"
                    Layout.preferredWidth: 100
                    Layout.preferredHeight: 50
                    Layout.alignment: Qt.AlignHCenter // Center within ColumnLayout
                }
                // other items
            }
        }
        // other items
    }
}