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

一、ListView列表視圖。

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

我們先看下面的例子：

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

2、我們更改代碼如下：

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

運行效果如下：

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

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

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

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

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

#p#

二、PathView路徑視圖

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

Rectangle {  
width:300;height:300;  
ListModel{  //數(shù)據模型  
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中設置了路徑屬性，使得在不同點的圖片具有不同的效果，這里設置了縮放和不透明度兩個屬性。我們只需設置開始點和結束點兩個點的屬性，這樣就會在整個路徑上進行線性插值。這一節(jié)介紹了兩個視圖，還有一個GridView網格視圖，它的操作是相似的，在這里就不再進行介紹了。

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

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