How to center GridView items
-
Hi all,
Can anyone advise how to get items within a GridView to center themselves? Using the very simple code below produces a grid of rectangles, but the are left aligned within their parent. I thought setting the horizontal and vertical center properties of the anchors might center the GridView, but it doesn't. Any ideas?
Thanks
-PaulGridView { id: myGridView anchors.fill: parent cellWidth: 150; cellHeight: cellWidth model: myModel delegate: myDelegate } Component{ id: myDelegate Rectangle{ width: myGridView.cellWidth - 10 height: myGridView.cellHeight - 10 color: "red" Text { text: name} } } ListModel{ id: myModel ListElement{name: "One Item"} ListElement{name: "One Item"} ListElement{name: "One Item"} } -
Hi @paul.haakma,
Do you mean the text is not center aligned ? -
Hi, @paul.haakma ,
You can put rectangle into Item (cell size) like below.
Component{ id: myDelegate Item { width: myGridView.cellWidth; height: myGridView.cellHeight Rectangle { width: parent.width-10; height: parent.height-10 color: "red" anchors.centerIn: parent } Text { text: name anchors.centerIn: parent } } } -
Hi. Thanks for the reply. I can center the text ok, the issue is the overall placement of the grid itself.
E.g. Say the grid fills the entire window with a margin of 50, and has four items. There is a fixed gap of 50 on the left side of the grid, but the space on the right is variable dependant on how many items flow across the screen.
If I slowly resize the window down, at some point one item drops down into a second row, but the white space (the margin) on the right hand side is now larger than the left.
I want the gridview to first work out the maximum number of items can fit across the screen, then center those items on the screen.
(Sorry, first time posting and can't find a way to upload a picture so have to try and explain!) -
Hi. Thanks for your reply.
Your comment I think refers to centering the grid item itself (e.g. the rectangle and the text) within the item. I am wanting to center the entire gridview on the screen.
E.g. Say the grid fills the entire window with a margin of 50, and has four items. There is a fixed gap of 50 on the left side of the grid, but the space on the right is variable dependant on how many items flow across the screen.
If I slowly resize the window down, at some point one item drops down into a second row, but the white space (the margin) on the right hand side is now larger than the left.
I want the gridview to first work out the maximum number of items can fit across the screen, then center those items on the screen.
(Sorry, first time posting and can't find a way to upload a picture so have to try and explain!) -
@paul.haakma If I understood you correctly, you can center the
GridViewitself usinganchors.centerIn: parent. You current code will work, just removefillproperty for gridview try assigning a smallerwidthandheightfor it to see the effect. Also you may need to calculatecellWidthandcellHeightdepending upon its parent.P.S: Upload the picture on any image hosting site and paste the link here.
-
@p3c0
Almost - and probably will do, although not quite the behaviour I was thinking.
If I have a cell width of 100, and explicitly set a GridView width of 200, and then have 3 items, I get 2 items on the top row and 1 on the second, and can center the GridView in it's parent.
But, if I have a cell width of 100, and set a GridView of, say, 500, and then have 3 items, then those 3 items (flowing from the left) take up the first three spaces and leave a gap of 200 on the right hand side. Also, with a fixed width now, if I resize the window (in this case the parent is the root item of the app) down then it doesn't affect the flow of the grid items, they just get clipped off the edge of the window.I imagine that this is the expected behaviour for GridView - but had hoped there was some way the GridView would center the items.
Thanks
-
But, if I have a cell width of 100, and set a GridView of, say, 500, and then have 3 items, then those 3 items (flowing from the left) take up the first three spaces and leave a gap of 200 on the right hand side.
Yes, because
GridViewis visualized as a square and the default flow is from left to right. So it starts from top left.Also, with a fixed width now, if I resize the window (in this case the parent is the root item of the app) down then it doesn't affect the flow of the grid items, they just get clipped off the edge of the window.
Right, it will. AFAIK you cannot center the items in the
GridViewas it is again visualized as a square unless you add some dummy invisible items above and below of those so as to make it appear at center. -
Late reply, but I leave it here in case someone else stumbles upon this thread like I did.
I too wanted the grid to appear centered, and with some property binding I got it to work:
GridView { ... // The standard size property var idealCellHeight: 200 property var idealCellWidth: 200 // The actual cell height is always as desired, but the cell width // is calculated from the current width of the view and how many cells fit cellHeight: idealCellHeight cellWidth: width / Math.floor(width / idealCellWidth) delegate: Item { // The delegate size is equal to the cell size... height: GridView.view.cellHeight width: GridView.view.cellWidth Rectangle { // ... but visible part is not. Here the width is set to the ideal size. // The visible part of the delegate is centered in the delegate, which means // the grid appears centered anchors.centerIn: parent width: parent.GridView.view.idealCellWidth // - 20 (suggestion) height: parent.height // - 20 (suggestion) ... } } }Since there will be gaps unless the grid size is exactly a multiple of the wanted cell size I suggest subtracting some of the size of the visible area. It looks prettier that way.
