Why can I not make a QML RowLayout fill a ColumnLayout's width?

Question

I want to layout a RowLayout 's items to be evenly spaced inside its container. But somehow setting the RowLayout 's Layout.fillWidth property does not have any effect when its parent is a ColumnLayout :

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    ColumnLayout {
        anchors.fill: parent
        RowLayout {
            Layout.fillWidth: true //this has no effect? why?
            Repeater {
                model: 3
                Button {
                    Layout.alignment: Qt.AlignHCenter
                }
            }
        }
    }
}

Expectation:

Reality:

Answer 1

You have to set the "Layout.fillWidth: true" to the item, in this case to the Buttons:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    ColumnLayout {
        anchors.fill: parent
        RowLayout {
            Repeater {
                model: 3
                Button {
                    Layout.fillWidth: true
                    Layout.alignment: Qt.AlignHCenter
                }
            }
        }
    }
}

If you want a fixed width in the Buttons then you must use an Item as a container, and centered in the container place the buttons:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    ColumnLayout {
        anchors.fill: parent
        RowLayout {
            Repeater {
                model: 3
                Item{
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Button{
                        width: 100
                        anchors.centerIn: parent
                    }
                }
            }
        }
    }
}