Best practices in designing a QML multi-level fluid layout
-
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" } } } } }
- First row: Height = 40%, Width = 100%
-
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 :)
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?
-
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?
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.something
does :).