10. GridView控件的简单介绍

山间点烟雨

已于 2023-02-16 15:53:40 修改

阅读量1.3k

点赞数

分类专栏： QML基础控件文章标签： qt

于 2023-02-08 16:36:09 首次发布

本文链接：https://blog.csdn.net/FY_13781298928/article/details/128937122

版权

QML基础控件专栏收录该内容

16 篇文章 4 订阅

订阅专栏

该文介绍了如何利用QtQuick中的GridView控件来整齐排列多个相似控件，展示了GridView的关键属性如宽度、高度、单元格尺寸、数据模型以及高亮设置，并提供了一个包含纵向滑动条的示例代码，用于创建9个具有相同颜色和文本的矩形控件。

摘要由CSDN通过智能技术生成

1. 使用说明：

在某种界面设计中，如果需要很多个类似的控件整齐的排列，类似方阵的一种数据展示，可以使用GridView控件来实现。

2. 常用属性介绍：

width：宽度
height：高度
clip：超过区域是否自动裁切
cellWidth：单元格宽度
cellHeight：单元格高度
model：提供数据，ListModel
delegate：为数据设计展示样式
currentIndex：当前项索引
highLight：高亮显示样式
highlightFollowsCurrentItem：高亮是否跟随当前项
highlightMoveDuration：高亮移动到下一个位置所需时间

附加属性：
ScrollBar.vertical：纵向滑动条
ScrollBar.horizontal：横向滑动条
…

3. 示例代码：

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

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

    GridView{
        id:gridView
        anchors.centerIn: parent
        width: cellWidth * 5
        height: cellHeight * 2
        clip:true
        cellWidth:40
        cellHeight:40

        model: ListModel{
            ListElement{
                mname:"控件1"
                mcolor:"lightgreen"
            }
            ListElement{
                mname:"控件1"
                mcolor:"lightgreen"
            }
            ListElement{
                mname:"控件1"
                mcolor:"lightgreen"
            }
            ListElement{
                mname:"控件1"
                mcolor:"lightgreen"
            }
            ListElement{
                mname:"控件1"
                mcolor:"lightgreen"
            }
            ListElement{
                mname:"控件1"
                mcolor:"lightgreen"
            }
            ListElement{
                mname:"控件1"
                mcolor:"lightgreen"
            }
            ListElement{
                mname:"控件1"
                mcolor:"lightgreen"
            }
            ListElement{
                mname:"控件1"
                mcolor:"lightgreen"
            }
            ListElement{
                mname:"控件1"
                mcolor:"lightgreen"
            }
            ListElement{
                mname:"控件1"
                mcolor:"lightgreen"
            }
        }
        delegate: Rectangle{
            width: GridView.view.cellWidth - 2
            height:GridView.view.cellHeight - 2
            color: mcolor
            Text {
                id: txt
                anchors.centerIn: parent
                text: qsTr(mname)
            }
        }
        ScrollBar.vertical: ScrollBar {
            implicitWidth: 15
            implicitHeight: 20
            height: parent.height
            anchors.right:parent.right
            policy: ScrollBar.AlwaysOn       //滚动条始终显示
        }
    }
}