为什么我不能让 QML RowLayout 填充 ColumnLayout 的宽度？

Question

我想将 aRowLayout的项目布局在其容器内均匀分布。但不知何故，当其父级是 a 时，设置RowLayout的Layout.fillWidth属性不会产生任何效果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
                }
            }
        }
    }
}

期待：

现实：

Answer 1

您必须将“Layout.fillWidth: true”设置为该项目，在本例中为按钮：

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
                }
            }
        }
    }
}

如果您希望按钮具有固定宽度，则必须使用项目作为容器，并将按钮放置在容器的中心：

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
                    }
                }
            }
        }
    }
}