Rectangle{
x:20
y:20
height: 50
width: 50
radius: 5
color: mous.pressed ? "red" :"gray"
Text {
anchors.centerIn: parent
font.pixelSize: 30
text: qsTr("+")
}
MouseArea{//一些操作獲取方式
id:mous
anchors.fill: parent
onClicked: {mylist.incrementCurrentIndex();
//mylist.model.append({"name":"黃昏","score":88})//追加了一項數據
//mylist.model.insert(2,{"name":"落日","score":88})//插入一項數據，index爲2
//mylist.model.move(0,5,2);//移動，第一個參數表示從index爲0開始，移動個數爲第三個參數
//第二個參數爲移動後的index
//mylist.model.set(2,{"name":"落日","score":88})//重新設置改變index爲2的數據值
//注意，如果set的index值等於count，則添加一個新的數據，相當append。
//mylist.model.setProperty(2,"name","夕陽")//設置index數據，一次只能設置一個。index得小count
//mylist.model.sync()// can only be called from a WorkerScript
}
}
}
Rectangle{
x:960
y:20
height: 50
width: 50
radius: 5
color: mous1.pressed ? "red" :"gray"
Text {
anchors.centerIn: parent
font.pixelSize: 30
text: qsTr("-")
}
MouseArea{//一些操作獲取方式
id:mous1
anchors.fill: parent
onClicked: {//mylist.decrementCurrentIndex();
//mylist.model.clear();//全部清除數據
//console.log(mylist.model.get(1).score);//get獲取到第幾個Index的信息
//mylist.model.remove(1);//刪除掉參數對應的index數據
}
}
}
Component{
id:myfooter
Rectangle{
height: 50
width: 400
color: "red"
Text {
anchors.centerIn: parent
font.pixelSize: 30
text: mylist.count
}
}
}
Component{
id:myheader
Rectangle{
height: 50
width: 400
color: "red"
Text {
anchors.centerIn: parent
font.pixelSize: 15
text: "count:" + mylist.count + " currentSection:" + mylist.currentSection
}
}
}
Component{
id:myhighlight
Rectangle{
z:2
height: 50
width: 400
color: "green"
}
}
ListView {
id:mylist
height: 400
width: 400
y:50
anchors.horizontalCenter: parent.horizontalCenter
//count: 5 //只讀屬性
//currentSection: 只讀屬性
//currentIndex: 2//當前項
spacing: 10 //子項之間的間隙
footer:myfooter //列表的頁腳，類型Component
//header: myheader //列表的標題或者說是頭部
//highlight: myhighlight //高亮顯示
//highlightFollowsCurrentItem: true//當前項改變的時候，高亮顯示會跟着移動
//highlightMoveDuration: 500
//highlightMoveSpeed: 200 //高亮的移動速度
//highlightRangeMode: ListView.ApplyRange
//ListView.StrictlyEnforceRange
//ListView.NoHighlightRange
//highlightResizeDuration: 100
//highlightResizeSpeed: 500
//highlightItem只讀屬性
// preferredHighlightBegin: 2
//preferredHighlightEnd: 5
keyNavigationWraps: true //當前項頭尾互切（到達最後一項再增加到下一項即可返回第一項）incrementCurrentIndex()
//orientation: ListView.Horizontal//列表的方向，水平
orientation:ListView.Vertical //默認垂直方向
layoutDirection: Qt.LeftToRight //水平佈局方向
//layoutDirection: Qt.RightToLeft
//section.criteria: ViewSection.FullString //
//section.criteria: ViewSection.FirstCharacter
//section.delegate: myheader
//section.property: "hello"
//snapMode: ListView.NoSnap //拖動停止設置默認，可見區域任意點可停止
//snapMode: ListView.SnapToItem //
//snapMode: ListView.SnapOneItem//移動一個Item，對於一次翻轉一個界面很有用
delegate: mycomponent //委託，進行實例顯示
model:mymodel //myvisual//數據模型
//數據模型有， ListModel ,XmlListModel,VisualItemModel，還有C++提供的數據模型
Component{//Component把元素封裝成一個組件，作爲列表的委託，實例顯示
//一個.qml文件也是一個組件，一樣可以最委託
id:mycomponent
Rectangle{
height: 60
width: 400
//color: mylist.isCurrentItem ? "red" : "gray"//是否爲當前項，我的沒起作用
color: mylist.currentIndex ==index ? "red" : "gray"//當前光標是否等於index，個人感覺和isCurrentItem這個屬性是一樣的作用
Text{
anchors.centerIn: parent
font.pixelSize: 25
text:name +": " +score //從數據模型裏面獲取的數據
}
}
}
ListModel{//簡單的ListElement容器
id:mymodel
ListElement{name:"張三";score:82} //可以添加很多數據內容，委託給delegate顯示
ListElement{name:"李四";score:75}
ListElement{name:"王五";score:96}
ListElement{name:"黃六";score:76}
ListElement{name:"啓華";score:25}
ListElement{name:"京東";score:68}
ListElement{name:"淘寶";score:35}
ListElement{name:"樂視";score:46}
ListElement{name:"三星";score:78}
ListElement{name:"華爲";score:59}
ListElement{name:"電信";score:82}
ListElement{name:"移動";score:52}
ListElement{name:"小米";score:99}
ListElement{name:"聯通";score:27}
ListElement{name:"魅族";score:89}
}
VisualItemModel{//使用VisualItemModel數據模型不需要委託顯示
//數據模型中是是含有元素的，根據index來顯示不同的item
id:myvisual
Rectangle{height: 100;width: 400;radius: 5;color: "red"}
Rectangle{height: 100;width: 400;radius: 5;color: "blue"}
Rectangle{height: 100;width: 400;radius: 5;color: "yellow"}
Rectangle{height: 100;width: 400;radius: 5;color: "#567890"}
Rectangle{height: 100;width: 400;radius: 5;color: "#887766"}
}
}
說明：簡單點來說，列表視圖只要是分爲三個部分，一個是列表控制元素listview，一個是數據模型model，一個是delegate委託代理實例化顯示model的數據。
需要注意的是，當model爲Visual了ItemModel時候不需要delegate代理顯示，因爲這個model本身就是用來顯示的。
