Layouts inside a Layout QML

[AhsanKhan]

Code first:

ColumnLayout {
                        anchors.fill: parent
                        // Logo section
                        Rectangle {
                            Layout.fillWidth: true
                            Layout.preferredHeight: 70
                            color: "blue"
                        }

                        // Tabs Layout for tabs
                        ColumnLayout {
                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            Rectangle {
                                Layout.fillWidth: true
                                Layout.preferredHeight: 100
                                color: "green"
                            }
                            Rectangle {
                                Layout.fillWidth: true
                                Layout.preferredHeight: 100
                                color: "green"
                            }
                        }
                    }

It's a side bar and I want the Logo to be on top and the tabs Layout filling the rest of the parent(ColumnLayout in this case, containing both the Logo Section and Tabs' ColumnLayout).

Problem is, the Tabs' ColumnLayout is fine (filling the rest of the parent) at first, but if I add item to it. It hugs that item instead of filling the parent and the Logo Rectangle is also displaced into the middle (which can be solved with the alignment).

Furthermore, the more Rectangles I add to the Tabs Layout, the more it expands, means it's hugging its content, not filling the parent. Screenshot here:

Edit: The layout is respecting the children(s) geometry over its own, after being populated.

[dheerendra]

@AhsanKhan
At least I'm not clear what is behaviour you are looking for. Currently code is working as expected. If you can give more information on what you wanted to achieve, we will help.

[AhsanKhan]

@dheerendra
The heirarchy is:

ColumnLayout {
     Logo_Rect { }

     Tabs_ColumnLayout {
          Tab_Rect {}
          Tab_Rect {}    
     }
}

I want the Logo_Rect to be exactly 70 and the Tabs_ColumnLayout to fill the rest of the space (of the parent ColumnLayout). Tabs_ColumnLayout fills the parent, when it's empty. But as soon as I add Item(s) to it. It hugs that children item(s) instead of filling the parent.

I got what I wanted though, by aligning everything to the top.

[GrecKo]

@AhsanKhan do not use anchors in a Layout child.

Instead use Layout.fillWidth and Layout.fillHeight.

[AhsanKhan]

@GrecKo The first ColumnLayout is a part of a Rectangle, not another layout. I don't see any other place I used anchors.

[mzimmers]

@AhsanKhan I'm not sure I understand what you want, but if you wish the tabs (the green rectangles) not to be distributed throughout the layout, you can put a final element in your ColumnLayout:

Item {
    Layout.fillHeight: true
}

I also don't see anything limiting the height of this side bar.

[GrecKo]

@AhsanKhan You are correct, I must have misread or misinterpreted.

Honestly I don't know why it doesn't work, it seems like the ColumnLayout fillHeight is not respected.

[AhsanKhan]

@GrecKo yeah. That's what I'm saying. It's respecting the children(s) geometry over its own. I tested it further. But I got what I needed, so thank you!