Trying to dynamically change size of component in grid layout
-
Hello. I have a custom component that I add to a grid layout. The result is this:
Item{ width: 100 height: 50 property string client_name:"none" property int unit_count:1 property string client_id : "none" Layout.fillWidth: true id : entry Rectangle{ id :flick_area height : 100 width :parent.width visible: false anchors.top : frame.bottom anchors.bottom : parent.bottom color : "green" } Rectangle{ id: frame width : parent.width height: 50 color: "white" anchors.top : parent.top ALL THE LIEN CONTENT AND BUTTON are inside FRAME ....
I am working to make the plus button expand the height of the component (the line) so I can show details in an hierarchical way. When I click the button I try to set the height of my component to a larger value and make the rectangle "flick_area" visible. The problem is that the grid does not reorganize itself when I change the size of one of the components. The result is this: (using the color green to make it visible)
THe obvious behavior I expected is that single item in the grid layout to be larger and the next item appear only under the now enlarged item, but while it grows in size the next item stays at the very same position it were in the screen. Can anyone shed me some light on what I should do to fix this? The grid layout itself is declared like this:
Flickable{ id: flickable clip: true width: parent.width anchors.top : client_group_description_area.bottom anchors.bottom : parent.bottom contentWidth: parent.width contentHeight: client_group_grid.height boundsBehavior: Flickable.StopAtBounds GridLayout{ id : client_group_grid anchors.fill : parent.fill columns :1 anchors.margins: 5 } }
Any help or pointers would be appreciated.