10. GridView控件的简单介绍

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       //滚动条始终显示
        }
    }
}

持续更新中，请大家多多关注…