相比于 Repeater 这样的放置有限的静态数据的元素,Qt提供了 ListView 和 GridView 元素,它们都继承自 Flickable,可以放置更多数据。同时,它们限制了同时实例化的代理数量。 对于一个大型的模型,这意味着在同一个场景下只会加载有限的元素。
ListView例1
import QtQuick 2.9
import QtQuick.Window 2.2
Window
{
visible: true
width: 840
height: 600
Rectangle
{
width: 160
height: 420
color: "white"
ListView//列表视图
{
anchors.fill: parent
anchors.margins: 20
clip: true
model: 20 //显示20个自定义组件数据
delegate: numberDelegate//委托:负责显示数据
spacing: 5
orientation: ListView.Vertical
boundsBehavior:Flickable.DragAndOvershootBounds
/*
ListView是个可滚动区域
默认情况下,这种滚动具有在向下到达底部时会有一个反弹的特效。
这一行为由boundsBehavior属性控制。
boundsBehavior属性有三个可选值:
Flickable.StopAtBounds完全消除反弹效果;
Flickable.DragOverBounds在自由滑动时没有反弹效果,但是允许用户拖动越界;
Flickable.DragAndOvershootBounds则是默认值,意味着不仅用户可以拖动越界,还可以通过自由滑动越界
*/
snapMode:ListView.NoSnap
/*
当列表滑动结束时,列表可能停在任意位置:一个代理可能只显示一部分,另外部分被裁减掉。
这一行为是由snapMode属性控制的。
snapMode属性的默认值是ListView.NoSnap,也就是可以停在任意位置;
ListView.SnapToItem会在某一代理的顶部停止滑动;
ListView.SnapOneItem则规定每次滑动时不得超过一个代理,也就是每次只滑动一个代理,这种行为在分页滚动时尤其有效
*/
layoutDirection:Qt.LeftToRight
}
Component //定义一个组件 显示的数据:一个自定义组件
{
id: numberDelegate
Rectangle
{
width: 40
height: 40
color: "lightGreen"
Text
{
anchors.centerIn: parent
font.pixelSize: 10
text: index
}
}
}
}
}
ListView例2
import QtQuick 2.9
import QtQuick.Window 2.2
Window
{
visible: true
width: 840
height: 600
Rectangle
{
width: 580
height: 80
x:150
color: "#eeeeee"
ListView
{
anchors.fill: parent
anchors.margins: 20
clip: true
model: 10
delegate: numberDelegate2
spacing: 5
orientation: ListView.Horizontal
highlight: highlightComponent//设置使用的高亮代理
focus: true//允许ListView接收键盘焦点 可以方向键滚动视图切换项
highlightRangeMode:ListView.NoHighlightRange//高亮显示模式
/*默认值ListView.NoHighlightRange意味着高亮区域和项目的可视范围没有关联;
ListView.StrictlyEnforceRange则使高亮始终可见,如果用户试图将高亮区域从视图的可视
区域移开,当前项目也会随之改变,以便保证高亮区域始终可见;
介于二者之间的是ListView.ApplyRange,它会保持高亮区域可视,但是并不强制,也就是说,
如果必要的话,高亮区域也会被移出视图的可视区。*/
highlightMoveDuration:-1//高亮移动持续时间 -1,意味着持续时间由速度和距离控制
highlightResizeDuration:500//高亮大小改变时间
header: headerComponent
footer: footerComponent
/*
header 和 footer 可以认为是两个特殊的代理。
这两个部分实际会添加在第一个元素之前和最后一个元素之后
需要注意的是,header 和 footer 与ListView之间没有预留间距。这意味着,
header 和 footer 将紧贴着列表的第一个和最后一个元素。如果需要在二者之间留
有一定的间距,则这个间距应该成为 header 和 footer 的一部分。
*/
}
Component
{
id: highlightComponent
Rectangle
{
width: ListView.view.width
color: "lightGreen"
}
}
Component
{
id: numberDelegate2
Item
{
width: 40
height: 40
Text
{
anchors.centerIn: parent
font.pixelSize: 10
text: index
}
}
}
Component
{
id: headerComponent
Rectangle
{
width: 40
height: 20
color: "yellow"
}
}
Component
{
id: footerComponent
Rectangle
{
width: 40
height: 20
color: "red"
}
}
}
}
GridView例子
import QtQuick 2.9
import QtQuick.Window 2.2
Window
{
visible: true
width: 840
height: 600
Rectangle
{
width: 600
height: 300
color: "white"
x:200
y:200
GridView //网格视图
{
anchors.fill: parent
anchors.margins: 20
clip: true
model: 100
cellWidth: 60
cellHeight: 40
delegate: numberDelegate3
flow:GridView.LeftToRight
/*
flow设置显示方向
GridView.LeftToRight 按照先从左向右、再从上到下的顺序填充,滚动条出现在竖直方向;
GridView.TopToBottom 按照先从上到下、在从左到右的顺序填充,滚动条出现在水平方向
*/
}
// 40 60
// **********
// * * *
// * * *
// * * *
// ******** *
// **********
//网格视图不依赖于元素间隔和大小来配置元素。它使用单元宽度(cellWidth)与单元高度(cellHeight)属性来控制数
//组内的二维元素的内容。 每个元素从左上角开始依次放入单元格
//假如代理的width比cellWidth小那元素会重合
Component
{
id: numberDelegate3
Rectangle
{
width: 40
height: 40
color: "lightGreen"
Text
{
anchors.centerIn: parent
font.pixelSize: 10
text: index
}
}
}
}
}