Kazuto_Ute
Kazuto_Ute

Reputation: 797

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

Upvotes: 3

Views: 2130

Answers (1)

eyllanesc
eyllanesc

Reputation: 243965

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

Upvotes: 8

Related Questions