listview基础复习
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1
//ListView 显示一个条目列表
//model 条目对应的数据
//Delegate 条目的外观
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
//数据显示
Component{
id:phoneModel
ListModel{
//id:phoneModel
ListElement{
name:"iphone 3GS"
cost:"1000"
manufacturer:"Apple"
}
ListElement{
name:"iphone 4"
cost:"1800"
manufacturer:"Apple"
}
ListElement{
name:"iphone 4S"
cost:"2300"
manufacturer:"Apple"
}
ListElement{
name:"iphone 5"
cost:"4900"
manufacturer:"Apple"
}
ListElement{
name:"B199"
cost:"1590"
manufacturer:"HuaWei"
}
ListElement{
name:"MI 2S"
cost:"1999"
manufacturer:"Xiao Mi"
}
ListElement{
name:"GALAXY S5"
cost:"4699"
manufacturer:"Samsung"
}
}
}
//表显示
Component{
id:phoneDelegate
Item{
id:wrapper
width: parent.width
height: 30
MouseArea{
anchors.fill: parent
onClicked: {
wrapper.ListView.view.currentIndex = index
console.log("index = "+index)
}
}
RowLayout{
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
spacing: 8
Text {
id:coll
text: name
color: wrapper.ListView.isCurrentItem?"red":"black"
font.pixelSize: wrapper.ListView.isCurrentItem?22:18
Layout.preferredWidth: 80
}
Text {
text: cost
color: wrapper.ListView.isCurrentItem?"red":"black"
font.pixelSize: wrapper.ListView.isCurrentItem?22:18
Layout.preferredWidth: 80
}
Text {
text: manufacturer
color: wrapper.ListView.isCurrentItem?"red":"black"
font.pixelSize: wrapper.ListView.isCurrentItem?22:18
Layout.fillWidth: true
}
}
}
}
//表头
Component{
id:headerview
Item{
width: parent.width
height: 30
RowLayout{
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
spacing: 8
Text{
text:"Name"
font.bold: true
font.pixelSize: 20
Layout.preferredWidth: 120
}
Text{
text: "cost"
font.bold: true
font.pixelSize: 20
Layout.preferredWidth: 80
}
Text{
text:"manufacture"
font.bold: true
font.pixelSize: 20
Layout.fillWidth: true
}
}
}
}
//list显示数据
ListView{
id:listView
anchors.fill: parent
delegate: phoneDelegate
model:phoneModel.createObject(listView)
header: headerview
focus: true
highlight: Rectangle{
color: "lightblue"
}
}
}
