ListView
import QtQuick 2.9
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Item {
id: root
Rectangle{
width: 80
height: 300
color: "blue"
ListView{
anchors.fill: parent
anchors.margins: 20
model:100
// 滑动
clip: true
spacing: 5
delegate: numberDelegate
}
Component{
id:numberDelegate
Rectangle{
width: 40
height: 40
color: "lightGreen"
Text {
anchors.centerIn: parent
font.pixelSize: 10
text: index
}
}
}
}
}
}
list列表是可以滑动的,因为我们设置了 click 为 true!
其中 ListView使用了 Component 创建的代理,用来显示 ListView 的数据!
ListView是个数据的组织方式,真正的数据放在 model,ListView只是定义了对数据的排列!
ListView有很多属性可以设置它的属性,例如排列方式、滚动行为控制等,下面让view从左到右水平排布:
// 设置项的排列方向
orientation: ListView.Horizontal
高亮
视图支持设置一个当前视图中显示代理元素中的高亮代理。
它是一个附加的代理元
素,这个元素仅仅只实例化一次,并移动到与当前元素相同的位置
在下面的例子中:
首先是
focus
属性设置为
true
,
它设置链表视图能够获得键盘焦点。
然后是
highlight
属性,指出使用的高亮代理元
素。高亮代理元素的
x,y
与
height
属性由当前元素指定
ListView.view.width属性被绑定用于高亮元素的宽度
// 设置高亮代理
highlight: highlightComponent
focus:true
// 高亮代理
Component{
id:highlightComponent
Rectangle{
width: ListView.view.width
color: "red"
}
}
但是我的没出来效果,暂时不知道原因~
页眉和页脚
import QtQuick 2.9
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Item {
id: root
Rectangle{
width: 80
height: 300
color: "blue"
ListView{
anchors.fill: parent
anchors.margins: 20
model:4
// 滑动
clip: true
spacing: 5
// 设置项的排列方向
// orientation: ListView.Horizontal
// 设置item显示代理
delegate: numberDelegate
// 设置高亮代理
highlight: highlightComponent
focus:true
// 设置页眉和页脚代理
header: headerComponent
footer: footerComponent
}
// 高亮代理
Component{
id:highlightComponent
Rectangle{
width: ListView.view.width
color: "red"
}
}
// 页眉代理
Component {
id: headerComponent
Rectangle {
width: 40
height: 20
color: "yellow"
}
}
// 页脚代理
Component {
id: footerComponent
Rectangle {
width: 40
height: 20
color: "red"
}
}
// item显示代理
Component{
id:numberDelegate
Rectangle{
width: 40
height: 40
color: "lightGreen"
Text {
anchors.centerIn: parent
font.pixelSize: 10
text: index
}
}
}
}
}
}
效果>>
GridView
GridView和ListView非常相似,区别是:GridView是使用了二维,并且GridView不用space设置元素间的间隔,而是用cellxxx!
代码:
import QtQuick 2.9
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Item {
id: root
Rectangle{
width: 640
height:480
color: "blue"
GridView{
anchors.fill: parent
anchors.margins: 20
model:80
// 滑动
clip: true
// 不同于 ListView 的地方
cellWidth:45
cellHeight: 45
// 设置item显示代理
delegate: numberDelegate
}
// item显示代理
Component{
id:numberDelegate
Rectangle{
width: 40
height: 40
color: "lightGreen"
Text {
anchors.centerIn: parent
font.pixelSize: 10
text: index
}
}
}
}
}
}