Layouts inside a Layout QML
-
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.
-
@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. -
@dheerendra
The heirarchy is:ColumnLayout { Logo_Rect { } Tabs_ColumnLayout { Tab_Rect {} Tab_Rect {} } }
I want the
Logo_Rect
to be exactly 70 and theTabs_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.
-
@AhsanKhan do not use
anchors
in a Layout child.Instead use
Layout.fillWidth
andLayout.fillHeight
. -
@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.
-
@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.