1.简介
ListView有一个模型,它定义了要显示的数据,还有一个委托,它定义了数据应该如何显示。ListView中的项是水平或垂直布局的。ListView 继承自 Flickable。
常用属性:
- count : int:有多少子项
- model : model:此属性保存为列表提供数据的模型。
- delegate : Component:定义了数据应该如何显示
- orientation : enumeration:设置列表的方向是水平还是垂直
- currentIndex : int:当前项的索引
- currentItem : Item:当前项
- highlight : Component:高亮
- add : Transition:添加项目时的动画
- remove : Transition:删除项目时的动画
- move : Transition:移动项目时的动画
- populate : Transition:为视图创建的项的动画
- section.criteria : enumeration:分组显示全称还是首字母
- section.delegate : Component :分组代理
- section.property : string:每个分组基础的属性的名称。
2.示例
示例1:设置model,设置代理,设置选中高亮,设置文字等属性。
Window {
visible: true
width: 700
height: 700
title: qsTr("Hello World")
ListModel{
id :listModel
ListElement {
name: "Bill Smith"
number: "555 3264"
}
ListElement {
name: "John Brown"
number: "555 8426"
}
ListElement {
name: "Sam Wise"
number: "555 0473"
}
}
ListView{
id:list
spacing: 10
width: 200
height: 500
model: listModel
//orientation: Qt.Horizontal
//highlightFollowsCurrentItem: false
delegate: Rectangle{
width: list.width
height: 50
Text{//设置文字属性
text:name + number
color:"red"
font.bold: true
anchors.centerIn: parent //设置文字居中
}
color:"transparent" //使model的颜色透明,为了显示出highlight颜色
MouseArea{
anchors.fill: parent
onClicked: {
list.currentIndex = index //点击选中哪一项
}
}
}
highlight: Rectangle { //高亮
width: 180
height: 40
color: "black"
y: list.currentItem.y
Behavior on y { //点击选中的时候会有个动画
SpringAnimation {
spring: 3
damping: 0.2
}
}
}
}
}
示例2:设置页脚、页眉,分组显示,代码里有注释。
Window {
visible: true
width: 500
height: 500
title: qsTr("Hello World")
Component {
id: sectionHeading
Rectangle {
width: list.width
height: childrenRect.height
color: "lightsteelblue" // 控制颜色
Text {
text: section
font.bold: true
font.pixelSize: 20
}
}
}
ListModel{
id :listModel
ListElement {
name: "Bill Smith"
number: "555 3264"
size: "small"
}
ListElement {
name: "Bill Smith2"
number: "555 3264"
size: "small"
}
ListElement {
name: "John Brown"
number: "555 8426"
size: "mid"
}
ListElement {
name: "Sam Wise"
number: "555 0473"
size: "big"
}
}
Rectangle{
x:80
y:80
width: 400
height: 400
border.width: 2
border.color: "black"
ListView{
id:list
spacing: 10
width: 200
height: 300
footer: Rectangle{ //设置页脚
height: 20
width: list.width
color: "red"
}
header: Rectangle{ //设置页眉
height: 20
width: list.width
color: "blue"
}
section.property: "size" //设置分组名称
section.criteria: ViewSection.FullString //设置显示全称 还是 首字母
section.delegate: sectionHeading //设置代理
anchors.centerIn: parent
model: listModel
delegate: Rectangle{
width: list.width
height: 50
Text{//设置文字属性
text:name + number
color:"red"
font.bold: true
anchors.centerIn: parent //设置文字居中
}
color:"transparent" //使model的颜色透明,为了显示出highlight颜色
MouseArea{
anchors.fill: parent
onClicked: {
list.currentIndex = index //点击选中哪一项
}
}
}
highlight: Rectangle { //高亮
width: 180
height: 20
color: "black"
}
}
}
}
示例3:设置添加动画,删除、移动等操作动画类似。
Window {
visible: true
width: 500
height: 500
title: qsTr("Hello World")
ListModel{
id :listModel
ListElement {
name: "Bill Smith"
number: "555 3264"
}
ListElement {
name: "John Brown"
number: "555 8426"
}
}
Rectangle{
x:80
y:80
width: 400
height: 400
border.width: 2
border.color: "black"
ListView{
id:list
spacing: 10
width: 200
height: 300
anchors.centerIn: parent
model: listModel
delegate: Rectangle{
width: list.width
height: 50
Text{//设置文字属性
text: name + number
color:"red"
font.bold: true
anchors.centerIn: parent //设置文字居中
}
}
add: Transition {
NumberAnimation { properties: "x,y"; from: 100; duration: 1000 }
}
}
Button{
x:20
y:20
width: 50
height: 50
text: "add"
onClicked: {
var data = {'name':"赵六",'number':"778 0899"}
listModel.append(data);
}
}
}
}