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

一、ListView列表視圖。

如果你了解Qt的模型視圖結構，那么這一節的內容就很好理解了，如果你沒接觸過，也沒關系，因為它其實很簡單。在Qt中我們要想利用視圖顯示一些數據，并不是將這些數據直接放到視圖中的，因為視圖只管顯示，它不存儲數據。我們的數據要放在數據模型中。但是數據模型中只是存放數據，它并不涉及數據的顯示方式。所以，我們還要用一個叫做代理的東東來設置數據模型中的數據怎樣在視圖中顯示。那么就構成了下面的關系。

我們先看下面的例子：

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

2、我們更改代碼如下：

import Qt 4.6  
Rectangle {  
width:200;height:200  
ListModel{  //數據模型  
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  //關聯數據模型  
delegate:delegate  //關聯代理  
highlight:highlight  //關聯高亮條  
focus:true  //可以獲得焦點，這樣就可以響應鍵盤了  
}  
} 

運行效果如下：

我們可以拖動整個列表，而且可以使用鍵盤的方向鍵來選擇列表中的項目。

在這個程序中，我們先設置了數據模型，在其中加入了一些數據。然后設置了代理，在代理中我們設置了要怎樣顯示我們的數據。***，我們在視圖中關聯了數據模型和代理，將數據顯示出來了。這里為了達到更好的顯示效果，我們使用了一個高亮條。其中的代理和高亮條都可以使用Component{}組件來實現。

3.我們可以對視圖做一些設置。

我們可以設置keyNavigationWraps:true 使到達***一個項目后重新返回***個項目。

我們可以設置orientation:ListView.Horizontal使列表水平顯示。這時你拖動列表，發現了吧，它可以自動移動到下一條，這就是Flickable的作用。默認的是ListView.Vertical豎直顯示。

#p#

二、PathView路徑視圖

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

Rectangle {  
width:300;height:300;  
ListModel{  //數據模型  
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}  
}  
}  
} 

效果如下：

你可以拖動一個圖標查看效果，是的，所有圖標的轉起來了。這就是路徑視圖。我們在程序中，設置了一個路徑，如上面的：

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

它們確定了一個橢圓形，所有的項目都在這個路徑上，當拖動一個項目，所有的項目都會在路徑上移動。

2、關于Path

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

3、路徑屬性。

我們可以通過路徑屬性PathAttribute ，來設置不同路徑上不同位置的項目。

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

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}  
}  
}  
} 

效果如下：

我們在Path中設置了路徑屬性，使得在不同點的圖片具有不同的效果，這里設置了縮放和不透明度兩個屬性。我們只需設置開始點和結束點兩個點的屬性，這樣就會在整個路徑上進行線性插值。這一節介紹了兩個視圖，還有一個GridView網格視圖，它的操作是相似的，在這里就不再進行介紹了。

本文章原創于 www.yafeilinux.com

小結：剖析 QML 視圖的內容介紹完了，希望本篇文章對你有所幫助！更多內容請參考編輯推薦！