Qt_Note15_QML_ListView
import QtQuick 2.0
import QtQuick.Controls 2.12
Rectangle{
width: 400
height: 200
border.color: "black"
anchors.centerIn: parent
Component {
id: sectionHeading
Rectangle {
// width: container.width
width: 400
height: childrenRect.height
color: "yellow"
Text {
text: section
font.bold: true
font.pixelSize: 20
}
}
}
// ListView
ListView {
id: list
// y: 20
header: Rectangle{
width: 400
height: 20
color: "blue"
}
footer: Rectangle{
width: 400
height: 20
color: "green"
}
width: 180; height: 200
// model: 3 //数字 控制了所有数据
// model: ['button', 'Rectangle', 'MouseArea', 'CheckBox']
// ListModel
model:ListModel {
ListElement {
name: "Bill Smith"
number: "555 3264"
myValue: 111
size: "small"
}
ListElement {
name: "John Brown"
number: "555 8426"
myValue: 222
size: "medium"
}
ListElement {
name: "Sam Wise"
number: "555 0473"
myValue: 333
size: "large"
}
}
//[] list
spacing: 20
flickableDirection: Flickable.AutoFlickDirection //动画效果
highlight: Rectangle { color: "lightsteelblue";
// radius: 5
}
// delegate: Rectangle { //控制了每一项数据是如何绘制的
text: name + ": " + number
text: index
text: modelData
text: name + " " + number + " " + myValue
// color: "transparent"
// width: list.width
// height: 50
// Text {
// id: txt
// text: name + " " + number + " " + myValue
// }
// MouseArea{
// anchors.fill: parent
// onClicked: {
console.log(list.currentIndex)
// console.log(index)
// currentIndex = index
// }
// }
// }
delegate: Row {
Text { text: '<b>Name:</b> ' + name; width: 160 }
Text { text: '<b>Number:</b> ' + number; width: 160 }
}
section.property: "size"
section.criteria: ViewSection.FullString
section.delegate: sectionHeading //对应每一个property是如何绘制的
}
}