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

  • Moderators

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


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



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


  • Moderators

    @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.



  • @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


  • Moderators

    @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.



  • 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.



  • @0sse
    Thanks, Your suggestion fix my problem.


Log in to reply