How to center GridView items

paul.haakma

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
-Paul

 GridView {
        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"}
  }

p3c0

Hi @paul.haakma,
Do you mean the text is not center aligned ?

Jean

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
        }
    }
  }

paul.haakma

@p3c0

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!)

paul.haakma

@Jean

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!)

p3c0

@paul.haakma If I understood you correctly, you can center the GridView itself using anchors.centerIn: parent. You current code will work, just remove fill property for gridview try assigning a smaller width and height for it to see the effect. Also you may need to calculate cellWidth and cellHeight depending upon its parent.

P.S: Upload the picture on any image hosting site and paste the link here.

paul.haakma

@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

p3c0

@paul.haakma

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 GridView is 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 GridView as 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.

0sse

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.

Mostafa88

@0sse
Thanks, Your suggestion fix my problem.