一、目标效果 

如下图所示，我们通过 GridView 新建100个子项，每个子项上写有自己的 index。

二、具体实现代码 

1. Main.qml

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("GridView 演示")

    GridView{
        anchors.fill: parent
        anchors.margins: 20
        clip: true

        model: 100
        cellWidth: 60; cellHeight: 60 //指定单元格的大小，默认是100x100，其实就是每个单元之间的间隔大小，数值越大，间隔越大
        flow: GridView.FlowTopToBottom //指定排列方式为：从上到下，默认就是从左到右，所以下面的这句没必要
        // flow: GridView.FlowLeftToRight

        delegate: GreyBox{
            required property int index
            width: 40; height: 40
            radius: 20
            text: index
        }
    }
}

2. GreyBox.qml

import QtQuick

Rectangle{
    color: "grey"
    property alias text: label.text
    radius: 8

    Text {
        id: label
        text: ""
        anchors.centerIn: parent
        color: "white"
    }
}