QML視圖是本文要介紹的內(nèi)容，在QML中提供了三種視圖方式：ListView列表視圖、GridView網(wǎng)格視圖和PathView路徑視圖。這三種視圖都是繼承自Flickable ，所以它們都有Flickable效果。下面我們簡(jiǎn)單介紹一下ListView和PathView。

一、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)目。

我們可以設(shè)置orientation:ListView.Horizontal使列表水平顯示。這時(shí)你拖動(dòng)列表，發(fā)現(xiàn)了吧，它可以自動(dòng)移動(dòng)到下一條，這就是Flickable的作用。默認(rèn)的是ListView.Vertical豎直顯示。

#p#

二、PathView路徑視圖

1.什么是路徑視圖，我們先來看一個(gè)例子。

Rectangle {  
width:300;height:300;  
ListModel{  //數(shù)據(jù)模型  
id:listModel  
ListElement{icon:”01.gif”}  
ListElement{icon:”02.gif”}  
ListElement{icon:”03.gif”}  
ListElement{icon:”04.gif”}  
}  
Component{     //代理  
id:delegate  
Item{ id:wrapper; width:50; height:50  
Column{  
Image {source:icon;width:50;height:50}  
}  
}  
}  
PathView{  //路徑視圖  
anchors.fill:parent; model:listModel; delegate:delegate  
path:Path{startX:120;startY:200  
PathQuad{x:120;y:25;controlX:260;controlY:125}  
PathQuad{x:120;y:200;controlX:-20;controlY:125}  
}  
}  
} 

效果如下：

你可以拖動(dòng)一個(gè)圖標(biāo)查看效果，是的，所有圖標(biāo)的轉(zhuǎn)起來了。這就是路徑視圖。我們?cè)诔绦蛑校O(shè)置了一個(gè)路徑，如上面的：

path:Path{startX:120;startY:200  
PathQuad{x:120;y:25;controlX:260;controlY:125}  
PathQuad{x:120;y:200;controlX:-20;controlY:125}  
} 

它們確定了一個(gè)橢圓形，所有的項(xiàng)目都在這個(gè)路徑上，當(dāng)拖動(dòng)一個(gè)項(xiàng)目，所有的項(xiàng)目都會(huì)在路徑上移動(dòng)。

2、關(guān)于Path

在QML中提供了三種Path。PathLine直線，PathQuad二次貝塞爾曲線，PathCubic三次貝塞爾曲線。你可以在幫助中查看它們的使用，這里不再進(jìn)行過多介紹。

3、路徑屬性。

我們可以通過路徑屬性PathAttribute ，來設(shè)置不同路徑上不同位置的項(xiàng)目。

例如我們更改上面的程序：

Component{     //代理  
id:delegate  
Item{ id:wrapper; width:50; height:50  
scale:PathView.scale; opacity:PathView.opacity  
Column{  
Image {source:icon;width:50;height:50}  
}  
}  
}  
PathView{  
anchors.fill:parent; model:listModel; delegate:delegate  
path:Path{startX:120;startY:200  
PathAttribute{name:”scale”;value:1.0}  
PathAttribute{name:”opacity”;value:1.0}  
PathQuad{x:120;y:25;controlX:260;controlY:125}  
PathAttribute{name:”scale”;value:0.5}  
PathAttribute{name:”opacity”;value:0.5}  
PathQuad{x:120;y:200;controlX:-20;controlY:125}  
}  
}  
} 

效果如下：

我們?cè)赑ath中設(shè)置了路徑屬性，使得在不同點(diǎn)的圖片具有不同的效果，這里設(shè)置了縮放和不透明度兩個(gè)屬性。我們只需設(shè)置開始點(diǎn)和結(jié)束點(diǎn)兩個(gè)點(diǎn)的屬性，這樣就會(huì)在整個(gè)路徑上進(jìn)行線性插值。這一節(jié)介紹了兩個(gè)視圖，還有一個(gè)GridView網(wǎng)格視圖，它的操作是相似的，在這里就不再進(jìn)行介紹了。

本文章原創(chuàng)于 www.yafeilinux.com

小結(jié)：剖析 QML 視圖的內(nèi)容介紹完了，希望本篇文章對(duì)你有所幫助！更多內(nèi)容請(qǐng)參考編輯推薦！