Nested QML Layout fillWidth

aperception

Hi there, I'm sorry I imagine this is a common noob question, but I wasn't able to find an answer in my searching.

In the example layout below, I want nestedRowLayout to take up a fixed width of 100, and the red rectangle to fill up the remaining space.
Then I want the green and blue rectangles to have a fixed width of 20, and the yellow rectangle to fill up the remaining space in nestedRowLayout (40 in this case, after accounting for the margins).

What actually happens is that the yellow rectangle greedily tries to take up as much space as possible without obeying the preferredWidth of nestedRowLayout.

I can get the intended behaviour by using Layout.maximumWidth: 100 instead of preferredWidth in nestedRowLayout, but this somehow seems wrong to me, as something might cause that layout to take a value smaller than 100.

Am I thinking about this wrong? Is there a more 'correct' way to do this?

import QtQuick 2.7
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.12

ApplicationWindow {
	id : mainWindow

	minimumWidth  : 100
	minimumHeight : 300
	maximumWidth  : 800
	maximumHeight : 500

	Item {
		id: mainView
		anchors.fill: parent

		ColumnLayout {
			anchors.fill: parent

			// top
			RowLayout {
				Layout.preferredWidth: parent.width
				Layout.preferredHeight: 50
				spacing: 20

				Rectangle {
					Layout.fillWidth: true
					Layout.preferredHeight: parent.height
					color: "red"
				}
				Rectangle {
					color: "orange"
					Layout.preferredWidth: 10
					Layout.preferredHeight: parent.height
				}
				RowLayout {
					id: nestedRowLayout
					Layout.preferredWidth: 100
					Layout.preferredHeight: parent.height
					spacing: 10

					Rectangle {
						color: "yellow"
						Layout.fillWidth: true
						Layout.preferredHeight: parent.height
					}
					Rectangle {
						color: "green"
						Layout.preferredWidth: 20
						Layout.preferredHeight: parent.height
					}
					Rectangle {
						color: "blue"
						Layout.preferredWidth: 20
						Layout.preferredHeight: parent.height
					}
				}
			}

			// bottom
			Rectangle {
				Layout.preferredWidth: parent.width
				Layout.fillHeight: true
				color: "indigo"
			}
		}
	}
}

Markkyboy

You may be better off using GridLayout rather than ColumnLayout.

I have an example of how to use GridLayout which may help you to achieve your goal;

https://forum.qt.io/topic/108774/gridlayout-columnspan-woes/5