Help with GridView

RobM

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

fcarney

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

fcarney

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

RobM

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:

and here is what I want (edited the above image in mspaint):

Does this make sense?

fcarney

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

RobM

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