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

user_14376283 0
Viewed 701

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:

enter image description here

Reality:

enter image description here

qtquick2 qml qt
1 Answers

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

enter image description here

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

enter image description here

user_66225870
Related