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.15Window {id:rootwidth: 640height: 480visible: truetitle: qsTr("Hello Signal")GridView{id:gridViewanchors.centerIn: parentwidth: cellWidth * 5height: cellHeight * 2clip:truecellWidth:40cellHeight:40model: 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 - 2height:GridView.view.cellHeight - 2color: mcolorText {id: txtanchors.centerIn: parenttext: qsTr(mname)}}ScrollBar.vertical: ScrollBar {implicitWidth: 15implicitHeight: 20height: parent.heightanchors.right:parent.rightpolicy: ScrollBar.AlwaysOn //滚动条始终显示}}
}