inserting spaces between GridView delegates

mzimmers

Hi all -

I want a GridView with spacing between the cells. Is this possible?
If I can't put spacing between the cells, what's the recommended way to "fake" spacing by making my delegates just a bit smaller than the cell, and centering them?
Here's what I've tried, and it doesn't work quite right - my delegates aren't centered on the main screen.

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window

Window {
    id: mainWindow
    width: 640
    height: 480
    visible: true

    Pane {
        id: gridPane
        anchors.fill: parent
        property int netWidth: gridPane.availableWidth - (gridView.spacing * (gridView.nbrColumns - 1))
        background: Rectangle { color: 'lightblue' }
        padding: 16

        GridView {
            id: gridView

            property int nbrColumns: 4
            property int spacing: 8
            implicitHeight: gridPane.availableHeight
            implicitWidth: gridPane.availableWidth
            anchors.centerIn: parent
            cellWidth: gridPane.netWidth / 4
            cellHeight: 120
            model: 6
            delegate: Rectangle {
                height: gridView.cellHeight - gridView.spacing
                width: gridView.cellWidth - gridView.spacing
                color: 'blue'
            }
        }
    }
}

This also doesn't strike me as a great way to place the delegates within the cell. Is there a better way to do this?

Thanks...

jeremy_k

GridView {
    delegate: Item {
        width: GridView.view.cellWidth
        height: GridView.view.cellHeight
        Rectangle {
            anchors {
                centerIn: parent
                fill: parent
                margins: GridView.view.spacing
            }
            color: "blue"
        }
    }
}

mzimmers

Thanks, @jeremy_k -- the missing ingredient was the intermediate Item in the delegate. I decided to implement it with a Pane instead:

GridView {
    id: gridView

    property int spacing: 8
    property int cellPadding: spacing * 0.5

    // this is now within a ColumnLayout
    Layout.fillHeight: true 
    Layout.preferredWidth: gridPane.availableWidth
    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
    
    cellWidth: Layout.preferredWidth / nbrColumns
    cellHeight: 72
    model: 60
    delegate: Pane {
        height: GridView.view.cellHeight
        width: GridView.view.cellWidth
        padding: GridView.view.cellPadding
        background: Rectangle { color: 'transparent' }
        Rectangle {
            anchors {
                centerIn: parent
                fill: parent
            }
            color: 'lightblue'
        }
    }
}

and it works.

May I ask why you chose the syntax:

GridView {
    delegate: Item {
        width: GridView.view.cellWidth

instead of:

GridView {
    id: gridView
    delegate: Item {
        width: gridView.cellWidth

Thanks again.

jeremy_k

@mzimmers said in inserting spaces between GridView delegates:

Thanks, @jeremy_k -- the missing ingredient was the intermediate Item in the delegate. I decided to implement it with a Pane instead:

That's your choice of course, but a Pane with a transparent Rectangle background is more overhead than an Item. At minimum, it's two container items per delegate instance instead of one.

May I ask why you chose the syntax:
GridView {
    delegate: Item {
        width: GridView.view.cellWidth

Using the attached property gives the delegate greater independence from the particular context. It doesn't need to change if the GridView id changes. Think about it in the same way as using anchors.fill: parent instead of anchors.fill: <id of parent item>.