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:

    1. 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?
    2. 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?
    3. 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"
    				}
    			}
    		}
    	}
    }


  • 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 :)



  • @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?



  • @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 :).


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.