Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Help with GridView



  • I am having some trouble with GridView. I have a 1024 (width) screen. I want to have three Rectangles that will fill their Cell be evenly spaced on the screen like so:

    untitled(1).png

    Keep in mind I made the above image in mspaint so just pretend it's perfect XD (screen is red)

    How can I do this using GridView? I have tried all sorts of things but I can't seem to get it right. The best I have managed to do is to create cell's which are larger than the Rectangles within them. That on top of decreasing the width of the GridView allows me to space them out evenly but only with respect to one another and not the parent of the GridView. Here's my basic code:

          GridView
          {
            id: gridView
            height: parent.height
            width: parent.width
            model: 3
            cellWidth: 150
            cellHeight: 150
    
            delegate: Rectangle
            {
              height: 150
              width: 150
              color: "blue"
            }
          }
    


  • Ah, okay, then maybe something like this:

    GridView
        {
            id: gridView
            anchors.fill: parent
            model: 3
            cellWidth: width/count
            cellHeight: cellWidth
    
            delegate: Rectangle {
                width: gridView.cellWidth
                height: gridView.cellHeight
                color: "red"
    
                Item {
                    width: 150
                    height: 150
    
                    anchors.margins: 20
                    anchors.centerIn: parent
    
                    Rectangle {
                        anchors.fill: parent
                        color: "blue"
                    }
                }
            }
        }
    


  • anchors can do this:

    import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Controls 2.12
    
    Window {
        visible: true
        width: 450
        height: 450
        title: qsTr("Grid View Spacing")
    
        GridView
        {
            id: gridView
            height: parent.height
            width: parent.width
            model: 3
            cellWidth: 150
            cellHeight: 150
    
            delegate: Rectangle {
                width: gridView.cellWidth
                height: gridView.cellHeight
                color: "red"
    
                Item {
                    anchors.fill: parent
                    anchors.margins: 20
    
                    Rectangle {
                        anchors.fill: parent
                        color: "blue"
                    }
                }
            }
        }
    }
    


  • I have been able to get that but what I need to do is now take that GridView and center it within the Window, how might I do that? For instance here is what I have:

        Item
        {
          //This item is 1024 wide
          id : gridViewContainer 
    
    
          GridView
          {
            id: gridView
    
            anchors.fill: parent
            cellHeight: 150
            cellWidth: 150
    
            model: 3
    
            delegate: Item
            {
              width: gridView.cellWidth
              height: gridView.cellHeight
    
    
              Rectangle
              {
                anchors.fill: parent
                color: "blue"
                anchors.margins: 20
              }
            }
          }
    

    Here is what this actually looks like (took a screenshot) and cropped it:
    bad.png
    and here is what I want (edited the above image in mspaint):
    good.png
    Does this make sense?



  • Ah, okay, then maybe something like this:

    GridView
        {
            id: gridView
            anchors.fill: parent
            model: 3
            cellWidth: width/count
            cellHeight: cellWidth
    
            delegate: Rectangle {
                width: gridView.cellWidth
                height: gridView.cellHeight
                color: "red"
    
                Item {
                    width: 150
                    height: 150
    
                    anchors.margins: 20
                    anchors.centerIn: parent
    
                    Rectangle {
                        anchors.fill: parent
                        color: "blue"
                    }
                }
            }
        }
    


  • YES! This is exactly what I wanted, well almost, I altered the margins so that (given you only have an odd number of items per row) everything will be spaced perfectly evenly:

      Component
      {
        id: girdViewComponent
    
        Item
        {
          //This item is 1024 wide
          id : gridViewContainer
    
          GridView
          {
            id: gridView
    
            anchors.fill: parent
            cellHeight: 150
            cellWidth: parent.width/count
    
            model: 3
    
            delegate: Item
            {
              width: gridView.cellWidth
              height: gridView.cellHeight
    
              Rectangle
              {
                anchors.fill: parent
    
                anchors.topMargin: 10
                anchors.bottomMargin: 10
                anchors.leftMargin: index % 2 !== 0 ? 0 : 10
                anchors.rightMargin: index % 2 !== 0 ? 0 : 10
    
                Rectangle
                {
                  width: 10
                  height: 10
                  anchors.centerIn: parent
                  color: "red"
                }
              }
            }
          }
    

Log in to reply