top/bottomMargin with fillHeight components - qt

Question

I'm facing a problem regarding top / bottom margin on components inside a layout (GridLayout here, but it seems to be the same with a ColumnLayout) with fillHeight.
Considering the following example:
`
import QtQuick 2.0
import QtQuick.Layouts 1.2
Item {
width : 800
height : 480
GridLayout {
anchors.fill: parent
columns: 2
rows : 2
Rectangle {
color:"red"
Layout.fillHeight: true
width : 400
}
Rectangle {
color:"green"
Layout.rowSpan: 2
Layout.fillHeight: true
width : 400
}
Rectangle {
color:"blue"
Layout.fillHeight: true
width : 400
Layout.bottomMargin: 10
}
}
}
`
The display is as .
Just commenting the line "Layout.bottomMargin: 10" restablish the ratio between red and blue rectangles:
There seem to be a ratio calculated that take into account the margins when my guess is that it shouldn't. Indeed, the height of the blue rectangle seems to be (top+bottom margins)*height of the red one (I've tested with like a dozen values, maybe not enough).

Answer 1

The layout engine indeed uses the implicitHeight to calculate the resulting sizes. Since the implicitHeight of a Rectangle is 0, the blue rectangle will be 10 times as big as the red. You can play a bit with setting implicitHeight on the rectangles:
Item {
width : 800
height : 480
GridLayout {
anchors.fill: parent
columns: 2
rows : 2
Rectangle {
color:"red"
Layout.fillHeight: true
implicitHeight: 200
width : 400
onHeightChanged: console.log("red", height)
}
Rectangle {
color:"green"
Layout.rowSpan: 2
Layout.fillHeight: true
width : 400
}
Rectangle {
color:"blue"
implicitHeight: 200
Layout.fillHeight: true
width : 400
Layout.bottomMargin: 10
onHeightChanged: console.log("blue", height)
}
}
}
However, this feels like a dirty solution. The resulting size depends on the implicitHeight set, but not completely. Basically you alter how much the "weight" of the bottomMargin is in the calculation of the layout engine.
To make a non-dirty solution, you can put the blue Rectangle inside a Item and anchors the blue Rectangle to it with a bottom margin. (so, no Layout.bottomMargin in the Item). But this depends a bit on your desired end-result, as the blue rectangle will be smaller than the red one.

Answer 2

Thanks for the reply !
Yeah, to me, it is definitely a dirty solution to put an implicitHeight and I can't really apply it to my app.
The other solution is almost like the one I thought about. The difference is that I put a ColumnLayout that fills its parent (with a rowSpan: 2) and contains both the red and blue Rectangles and in which I ask for a Layout.bottomPadding. And this way it works.
This is just a workaround that work for what I want to do, but with this, there's no way to have a topMargin on the blue rectangle without using a spacing. But as I said, this is fine for me.
as the blue rectangle will be smaller than the red one
Yes, I'm aware of that, and it is what I expect. And with my solution there's also this difference of height.
Edit : no, I'm completely mistaken for that last point and in fact, with the ColumnLayout, red and blue will be the same size : with a layout