GridView 演示（P28 5.4GridView）

最新推荐文章于 2025-07-29 23:09:29 发布

原创最新推荐文章于 2025-07-29 23:09:29 发布 · 255 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#qml #qt quick #qt #qt6 #ui

QML 专栏收录该内容

53 篇文章

订阅专栏

本文介绍了如何在Qt的QML中通过GridView组件创建一个包含100个子项的界面，每个子项显示其索引，通过代码实现网格布局和数据绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、目标效果

如下图所示，我们通过 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"
    }
}