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