一、ListView列表視圖。

如果你了解Qt的模型視圖結(jié)構(gòu)，那么這一節(jié)的內(nèi)容就很好理解了，如果你沒接觸過，也沒關(guān)系，因?yàn)樗鋵?shí)很簡(jiǎn)單。在Qt中我們要想利用視圖顯示一些數(shù)據(jù)，并不是將這些數(shù)據(jù)直接放到視圖中的，因?yàn)橐晥D只管顯示，它不存儲(chǔ)數(shù)據(jù)。我們的數(shù)據(jù)要放在數(shù)據(jù)模型中。但是數(shù)據(jù)模型中只是存放數(shù)據(jù)，它并不涉及數(shù)據(jù)的顯示方式。所以，我們還要用一個(gè)叫做代理的東東來設(shè)置數(shù)據(jù)模型中的數(shù)據(jù)怎樣在視圖中顯示。那么就構(gòu)成了下面的關(guān)系。

我們先看下面的例子：

1、新建一個(gè)Qt QML Application工程，命名為“myView”。

2、我們更改代碼如下：

import Qt 4.6  
Rectangle {  
width:200;height:200  
ListModel{  //數(shù)據(jù)模型  
id:listModel  
ListElement{name:”Tom”;number:”001″}  
ListElement{name:”John”;number:”002″}  
ListElement{name:”Sum”;number:”003″}  
}  
Component{     //代理  
id:delegate  
Item{ id:wrapper; width:200; height:40  
Column{  
x:5; y:5  
Text{text:”<b>Name:</b>”+name}  
Text{text:”<b>Number:</b>”+number}  
}  
}  
}  
Component{   //高亮條  
id:highlight  
Rectangle{color:”lightsteelblue”;radius:5}  
}  
ListView{  //視圖  
width:parent.width; height:parent.height  
model:listModel  //關(guān)聯(lián)數(shù)據(jù)模型  
delegate:delegate  //關(guān)聯(lián)代理  
highlight:highlight  //關(guān)聯(lián)高亮條  
focus:true  //可以獲得焦點(diǎn)，這樣就可以響應(yīng)鍵盤了  
}  
} 

運(yùn)行效果如下：

我們可以拖動(dòng)整個(gè)列表，而且可以使用鍵盤的方向鍵來選擇列表中的項(xiàng)目。

在這個(gè)程序中，我們先設(shè)置了數(shù)據(jù)模型，在其中加入了一些數(shù)據(jù)。然后設(shè)置了代理，在代理中我們?cè)O(shè)置了要怎樣顯示我們的數(shù)據(jù)。最后，我們?cè)谝晥D中關(guān)聯(lián)了數(shù)據(jù)模型和代理，將數(shù)據(jù)顯示出來了。這里為了達(dá)到更好的顯示效果，我們使用了一個(gè)高亮條。其中的代理和高亮條都可以使用Component{}組件來實(shí)現(xiàn)。

3.我們可以對(duì)視圖做一些設(shè)置。

我們可以設(shè)置keyNavigationWraps:true 使到達(dá)最后一個(gè)項(xiàng)目后重新返回第一個(gè)項(xiàng)目。