qtqmlqtquick2

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


I want to lay out 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


Solution

  • 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