Nested layout child item fill with and height

AndySD

I have a nested ColumnLayout and RowLayout. The RowLayout is not set any width and height. So I assume the two rectangles' Layout.fillwidth & Layout.fillheight would not work since their parents' width and height are not set. However, the rectangles actually expanded and filled out the width and height of their parents' parent, which is the Columnlayout. How does this happen? does RowLayout inherited ColumnLayout's with and height? Thanks so much!

    ColumnLayout {
        anchors.fill : parent

        RowLayout {

            Rectangle {
                width: 100
                height: 50
                color: "red"
                Layout.fillWidth: true
                Layout.fillHeight: true
            }
            Rectangle {
                width: 100
                height: 50
                color: "red"
                Layout.fillWidth: true
                Layout.fillHeight: true
            }
        }
    }

GrecKo

That's because ***Layout items have both Layout.fillWidth: true and Layout.fillHeight: true by default.

Bob64

@GrecKo that explains why the rectangles fill the RowLayout (though it doesn't make sense to me to have two rectangles that both fill the container). I think @AndySD was curious about why the RowLayout fills ColumnLayout. Is that something that just naturally happens if one Layout is contained within another in the absence of any other sizing specification?

AndySD

@Bob64 Thanks Bob, exactly what I mean. Any thoughts on this? thanks!

AndySD

@GrecKo Thanks GrecKo. Do you mean RowLayout and ColumnLayout in qml have both Layout.fillWidth: true and Layout.fillHeight: true by default?

GrecKo

@Bob64 said in Nested layout child item fill with and height:

I think @AndySD was curious about why the RowLayout fills ColumnLayout. Is that something that just naturally happens if one Layout is contained within another in the absence of any other sizing specification?

Yes that's what I wrote, the RowLayout has fillWidth and fillHeight set to true so it will fill the parent ColumnLayout.

@Bob64 said in Nested layout child item fill with and height:

though it doesn't make sense to me to have two rectangles that both fill the container

fillWidth should be interpreted fill available remaining width. Multiple items with it will share the available width.

@AndySD said in Nested layout child item fill with and height:

Do you mean RowLayout and ColumnLayout in qml have both Layout.fillWidth: true and Layout.fillHeight: true by default?

Yes, and GridLayout.

Bob64

@GrecKo said in Nested layout child item fill with and height:

Yes that's what I wrote, the RowLayout has fillWidth and fillHeight set to true so it will fill the parent ColumnLayout.

My apologies, I did not read your first response carefully enough and I thought you were referring to the settings in Rectangle in @AndySD's question.

Interestingly, this doesn't seem to be documented anywhere obvious. Now that you have explained, it certainly makes sense as default behaviour, but I have been bitten by QML enough times to have learned not to make too many assumptions.