Best practices in designing a QML multi-level fluid layout

nickaein

Hi,

I have designed a layout in QML to learn more about its features and have some questions on the "Best Practices" in designing such layout. Here it is:

It is essentially a ColumnLayout consisted of three RowLayouts, each one with some Rectangles. The size of each Row and Rectangle should be calculate such as:

First row: Height = 40%, Width = 100%
- Red Rectangle filling the whole area
Second row: Height = 20%, Width = 100%
- Dark-green Rectangle: Height = 100%, Width = 20%,
- Light-green Rectangle: Height = 100%, Width = 80%
Third row: Height = 40%, Width = 100%
- Dark-blue Rectangle: Height = 100%, Width = 40%,
- Blue Rectangle: Height = 100%, Width = 20%
- Light-blue Rectangle: Height = 100%, Width = 40%

The QML I have came up with is working and is in the following. I have some questions about it:

I have set the width and height percentages using Layout.preferredHeight: x*parent.height pattern. Other options caused some issues (e.g. preferredHeight caused binding loop warnings). Is my approach correct and efficient?
As a hack, I set Layout.fillWidth: true for the first element of Row #2 and Row #3, which doesn't make sense to me, but does work. If I set their width as percentage (e.g. Layout.preferredWidth: 0.2*parent.width) their row will collapse to width 0. Is this an expected behavior? Is there any better workaround?
Do you have any recommendation on the layouts? Am I on the right path?

Here is my QML code for the layout:

ApplicationWindow {
	width: 250
	height: 150
	visible: true
	
	Rectangle {
		anchors.fill: parent
		ColumnLayout {
			anchors.fill: parent
			spacing: 0
			RowLayout {
				spacing: 0
				Layout.preferredHeight: 0.4*parent.height
				Layout.fillHeight: false
				Rectangle {
					Layout.fillHeight: true
					Layout.fillWidth: true
					color: "red"
				}
			}
			RowLayout {
				spacing: 0
				Layout.preferredHeight: 0.2*parent.height
				Layout.fillHeight: false
				Rectangle {
					Layout.fillHeight: true
					Layout.fillWidth: true
					color: "darkGreen"
				}
				Rectangle {
					Layout.fillHeight: true
					Layout.preferredWidth: 0.8*parent.width
					color: "lightGreen"
				}
			}
			RowLayout {
				spacing: 0
				Layout.preferredHeight: 0.4*parent.height
				Layout.fillHeight: false
				Rectangle {
					Layout.fillHeight: true
					Layout.fillWidth: true
					color: "darkBlue"
				}
				Rectangle {
					Layout.fillHeight: true
					Layout.preferredWidth: 0.2*parent.width
					color: "blue"
				}
				Rectangle {
					Layout.fillHeight: true
					Layout.preferredWidth: 0.4*parent.width
					color: "lightBlue"
				}
			}
		}
	}
}

t3685

I don't think you need your top-level rectangle as it is hidden by all your other rectangles. Another option would be to try to make it work with a GridLayout. Don't know how that would work out though :)

nickaein

@t3685

I've always been afraid of GridLayout. Maybe that's because I had many trouble with the GridLayout in Qt Widgets. I've learnt to design the layout with a hierarchy of column-row-column-row... layouts. Might give GridLayout a try this time! :)

BTW, any comments on the two questions? Do you think my workarounds are right?

t3685

@nickaein

My only advice is to make things as clear and understandable as possible. ColumnLayout and RowLayout are just convenience forms of GridLayout, and personally I think it's confusing to know exactly what each attached property Layout.somethingdoes :).