Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Nested QML Layout fillWidth



  • 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"
    			}
    		}
    	}
    }
    


  • 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


Log in to reply