QT QML Gridlayout desperation - qt

Question

I need a fairly simple layout in qml.
I have now struggled for some time with the GridLayout, which I had actually classified as correct for this requirement - but it does not work.
This is how it should be
And this is how it is currently - the right rectangle (yellow) is completely missing.
This is my current code
ApplicationWindow {
property real _encoderWidth: 254
property real _headerHeight: 188
property real _leftSideWidth: 70
property real _keyboard1Height: 100
property real _keyboard2Height: 180
visible: true
id: root
objectName: "mainScreen"
width: 600 + _encoderWidth + _leftSideWidth
height: 800 + _headerHeight + _keyboard1Height + _keyboard2Height
minimumHeight: height
maximumHeight: height
minimumWidth: width
maximumWidth: width
GridLayout {
id: grid
anchors.fill: parent
rows: 4
columns: 3
Rectangle {
id: left
Layout.column: 0
Layout.rowSpan: 4
Layout.fillWidth: true
Layout.fillHeight: true
Layout.minimumHeight: root.height
Layout.maximumHeight: root.height
Layout.minimumWidth: _leftSideWidth
Layout.maximumWidth: _leftSideWidth
color: "blue"
}
Rectangle {
id: top
Layout.row: 0
Layout.column: 1
Layout.fillWidth: true
Layout.fillHeight: true
Layout.minimumHeight: _headerHeight
Layout.maximumHeight: _headerHeight
Layout.minimumWidth: root.width
Layout.maximumWidth: root.width
color: "red"
}
Rectangle {
id: right
Layout.row: 0
Layout.column: 2
Layout.rowSpan: 4
Layout.fillWidth: true
Layout.fillHeight: true
Layout.minimumHeight: root.height
Layout.maximumHeight: root.height
Layout.minimumWidth: _encoderWidth
Layout.maximumWidth: _encoderWidth
color: "yellow"
}
Rectangle {
id: content
Layout.row: 1
Layout.column: 1
Layout.fillWidth: true
Layout.fillHeight: true
Layout.minimumHeight: 800
Layout.maximumHeight: 800
Layout.minimumWidth: 600
Layout.maximumWidth: 600
color: "green"
}
Rectangle {
id: bottom1
Layout.row: 2
Layout.column: 1
Layout.fillWidth: true
Layout.fillHeight: true
Layout.minimumHeight: _keyboard1Height
Layout.maximumHeight: _keyboard1Height
Layout.minimumWidth: root.width
Layout.maximumWidth: root.width
color: "lightgray"
}
Rectangle {
id: bottom2
Layout.row: 3
Layout.column: 1
Layout.fillWidth: true
Layout.fillHeight: true
Layout.minimumHeight: _keyboard2Height
Layout.maximumHeight: _keyboard2Height
Layout.minimumWidth: root.width
Layout.maximumWidth: root.width
color: "gray"
}
}
}
The layout does not have to be dynamic, the window size is fixed and cannot be changed.
Any tip or suggestion for improvement is welcome.
Many thanks and best regards
Arne

Answer 1

2 things I found strange in your window:
Why use a layout if you fix all the sizes?
Why use root.width for items in your middle column (except for green, you used 600 there)?It is probably that very point that pushed the yellow rectangle outside the viewport.
I'm not sure these are the proportions you are looking for.
I added 2 variables at the top.
I kept the layout even though sizes are supposed to be fixed.
I set the preferred sizes instead of min/max sizes.Note that since you do not seem to have taken the space between rectangles into consideration (rowSpacing and columnSpacing), the cost of ensuring rectangles fit in the window is that their sizes are going to be slightly different from what you expect.
I removed the explicitly set height for the left and right item (they are supposed to fill all 4 rows they span across.
I removed the explicitly set width for all but 1 item in the middle column (they are all supposed to fill the available width).
This leaves:
ApplicationWindow {
property real _baseWidth: 600
property real _baseHeight: 400
property real _encoderWidth: 254
property real _headerHeight: 188
property real _leftSideWidth: 70
property real _keyboard1Height: 100
property real _keyboard2Height: 180
visible: true
id: root
objectName: "mainScreen"
width: _baseWidth + _encoderWidth + _leftSideWidth
height: _baseHeight + _headerHeight + _keyboard1Height + _keyboard2Height
minimumHeight: height
maximumHeight: height
minimumWidth: width
maximumWidth: width
GridLayout {
id: grid
anchors.fill: parent
rows: 4
columns: 3
Rectangle {
id: left
Layout.row: 0
Layout.column: 0
Layout.rowSpan: 4
Layout.fillWidth: true
Layout.fillHeight: true
Layout.preferredWidth: _leftSideWidth
color: "blue"
}
Rectangle {
id: top
Layout.row: 0
Layout.column: 1
Layout.fillWidth: true
Layout.fillHeight: true
Layout.preferredHeight: _headerHeight
Layout.preferredWidth: _baseWidth
color: "red"
}
Rectangle {
id: content
Layout.row: 1
Layout.column: 1
Layout.fillWidth: true
Layout.fillHeight: true
Layout.preferredHeight: _baseHeight
color: "green"
}
Rectangle {
id: bottom1
Layout.row: 2
Layout.column: 1
Layout.fillWidth: true
Layout.fillHeight: true
Layout.preferredHeight: _keyboard1Height
color: "lightgray"
}
Rectangle {
id: bottom2
Layout.row: 3
Layout.column: 1
Layout.fillWidth: true
Layout.fillHeight: true
Layout.preferredHeight: _keyboard2Height
color: "gray"
}
Rectangle {
id: right
Layout.row: 0
Layout.column: 2
Layout.rowSpan: 4
Layout.fillWidth: true
Layout.fillHeight: true
Layout.preferredWidth: _encoderWidth
color: "yellow"
}
}
}
I let you fine-tune the thing if needed, such as including the spacing of the layout.