GridView of QML realizes sliding grid layout

Recently, I have been working on the requirements of sliding grid , It happens to be used GridView Realize corresponding functions .

1、GridView Key attributes

GridView There are many related attributes , Here are some key attributes ：

cellHeight:  The height of a single grid in the table 
cellWeight:  The width of a single grid in the table 
currentIndex:  Index of the current focus 
delegate:  agent , That is, the implementation method in the grid 
layoutDirection:  The order in which all the squares are arranged 
model:  Table data 

2、GridView Implement sliding table

Realize the idea ：

1、 Create a GridView, Set the size of the grid 
2、 Create a model（ That is database ）, One delegate（ Display form in Grid ）

Implementation code ：
main.qml

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    
    id:root
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Rectangle {
    
        anchors.fill:        parent
        anchors.margins:     10
        border.color:        "black"

        GridView {
    
            id:              grid
            anchors.fill:    parent
            cellWidth:       200
            cellHeight:      200
            anchors.margins: 20
            model:           ShowModel{
    }
            delegate:        ShowDelegate{
    }
            clip:            true  //  Crop beyond the boundary , That is, it does not display , The default is false
            boundsBehavior:  Flickable.StopAtBounds  //  Slide no more than the size of the parent box 
        }
    }
}

ShowModel.qml

import QtQuick 2.0

ListModel {
    
    id: fruitModel
    ListElement {
    
        name:"apple"
        picSrc: "pic/apple.jpg"
        cost: 2
    }

    ListElement {
    
        name:"banana"
        picSrc: "pic/ Banana .jpg"
        cost: 2
    }

    ListElement {
    
        name:"orange"
        picSrc:"pic/ a mandarin orange .jpg"
        cost: 2
    }

    ListElement {
    
        name:"pair"
        picSrc:"pic/ pear .jpg"
        cost: 2
    }
    ListElement {
    
        name:"apple"
        picSrc: "pic/apple.jpg"
        cost: 2
    }

    ListElement {
    
        name:"banana"
        picSrc: "pic/ Banana .jpg"
        cost: 2
    }

    ListElement {
    
        name:"orange"
        picSrc:"pic/ a mandarin orange .jpg"
        cost: 2
    }

    ListElement {
    
        name:"pair"
        picSrc:"pic/ pear .jpg"
        cost: 2
    }
}

ShowDelegate.qml

import QtQuick 2.0

Rectangle {
    
    width: grid.cellWidth
    height: grid.cellHeight
    anchors.margins: 10
    radius: 10
    border.color: "black"
    Image{
    
        anchors.horizontalCenter:   parent.horizontalCenter
        anchors.verticalCenter:     parent.verticalCenter
        source:                     model.picSrc
        sourceSize.width:           parent.width * 0.90
        sourceSize.height:          parent.height * 0.90
    }

    MouseArea {
    
        anchors.fill: parent
        onClicked: {
    
            console.log(parent.width, parent.height)
        }
    }
}