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

Question

我想布置 RowLayout 的项目，使其在其容器内均匀分布。但是不知何故设置 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
                    }
                }
            }
        }
    }
}

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

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

qt

qml

qtquick2