1、QML使用了與Qt中Model-View類似的結構
1）模型類提供了數據。
A）模型可以使用QML的簡單數據，或者複雜的C++數據
B）QML：ListModel，XmlListModel，VisualItemModel
C）C++：QAbstractItemModel，QStringList，QList<QObject*>
2）視圖顯示模型提供的數據，包括ListView，GridView，PathView，Repeater（all QML），且都自動支持滾動
3）代理爲視圖創建模型中數據的實例
4）HightLight控件用來高亮視圖裏面選中的item
For Reference：Model-View in Qt
Model爲其他部件提供數據的接口（QAbstractItemModel）
View獲取model的indices（indices是對數據的引用）
Delegate用來定製View中的數據顯示方式（當用戶編輯時，Delegate直接與Model交互）
在這種結構中，Model就是我們的數據，Delegate是一個描述model中每條數據的顯示方式的控件，View是可視的元素，使用Delegate來顯示Model中的數據。
示例一：
// Define the data in MyModel.qml - data is static in this simple case
import QtQuick 2.0
ListModel {
id: contactModel
ListElement {
name: "Bill Smith"
number: "555 3264"
}
ListElement {
name: "John Brown"
number: "555 8426"
}
ListElement {
name: "Sam Wise"
number: "555 0473"
}
}
示例二：// Create a view to use the model e.g. in MyList.qml
import QtQuick 2.0
Rectangle {
width: 180; height: 200
color: "green"
// Define a delegate component. A delegate will be
// instantiated for each visible item in the list.
Component {
id: delegate
Item {
id: wrapper
width: 180; height: 40
Column {
x: 5; y: 5
Text {text: '<b>Name:</b>' + name}
Text {text: '<b>Number:</b>' + number}
}
}
}
// Define a hightlight component. Just one of these will be
// instantiated by each ListView and placed behind the current item.
Component {
id: highlight
Rectangle {
color: "lightsteelblue"
radius: 5
}
}
// The actual list
ListView {
width: parent.width; height: parent.height
model: MyModel{}// Refers to MyModel.qml
delegate: delegate// Refers to the delegate component
highlight: hightlight // refers to the hightlight component
focus: true
}
}
2、網格視圖（GridView）
它以網格的形式顯示數據，與ListView的使用方式一致
如：
GridView {
width: parent.width; height: parent.height
model: MyModel
delegate: delegate
highlight: highlight
cellWidth: 80; cellHeight: 80
focus: true
}
3、路徑視圖（PathView）
通過一個獨立的Path Object格式化數據的顯示方式。一些獨立的元素可以用於初始化Path，如PathLine，PathQuad，PathCubic。在Path上的items的分佈是由PathPercent元素定義的。Items的顯示方式是通過PathAttribute元素來控制的
示例一：
PathView { // With equl distribution of dots
anchors.fill: parent
model: MyModel
delegate: delegate
path: Path {
startX: 20; startY: 0
PathQuad {x: 50; y: 80; controlX: 0; controlY:80}
PathLine {x: 150; y: 80}
PathQuad {x: 180; y: 0; controlX: 200; controlY: 80}
}
}
效果如下：
示例二：
PathView { // With 50% of the dots in the buttom part
anchors.fill: parent
model: MyModel
delegate: delegate
path: Path {
startX: 20; startY: 0
PathQuad {x: 50; y: 80; controlX: 0; controlY:80}
PathPercent { value: 0.25 }
PathLine {x: 150; y: 80}
PathPercent {value: 0.75}
PathQuad {x: 180; y: 0; controlX: 200; controlY: 80}
PathPercent {value: 1}
}
}
效果如下：
示例三：
Component {
id: delegate
Item {
id: wrapper
width: 80; height: 80
scale: PathView.scale
opacity: PathView.opacity
Column {
Image {}
Text {}
}
}
}
PathView { // With 50% of the dots in the buttom part
anchors.fill: parent
model: MyModel
delegate: delegate
path: Path {
startX: 120; startY: 100
PathAttribute {name: "scale"; value: 1.0}
PathAttribute {name: "opacity"; value: 1.0}
PathQuad {x:120; y: 25; controlX: 260; controlY: 75}
PathAttribute {name: "scale"; value: 0.3}
PathAttribute {name: "opacity"; value: 0.5}
PathQuad {x: 120; y: 100; controlX: -20; controlY: 75}
}
}
效果如下：
4、Repeater
其用於創建大量其他items實例的元素。
model的使用和前面的view元素很像，model的數據類型可以是object list，a string list， a number， or a Qt/C++ model。當前的model index可以通過index屬性訪問。
如：
Column {
Repeater {
model: 10 // The model is just a number here
Text {
text: "I'm item " + index
}
}
}
效果如下：
Repeater所創建的items是按照順序插入到這個Repeater的parent中的，可以在layout中使用Repeater。
如：
Row {
Rectangle {
width: 10; height: 20; color: "red"
}
Repeater {
model: 10
Rectangle {
width: 20; height: 20; radius: 10; color: "green"
}
}
Rectangle {
width: 10; height: 20; color: "blue"
}
}
效果如下：
5、Flickable
該屬性可以讓其子元素被拖拽和滾動，所以沒有必要創建一個MouseArea或者處理鼠標事件的函數。Flickable界面很容易通過屬性配置：flickDirection，flickDeceleration，horizontalVelocity，verticalVelocity，boundsBehavior，...
很多QML元素默認是flickable的，比如說ListView的元素
示例如下：
Flickable {
width: 200; height: 200
contentWidth: image.width; contentHeight: image.height
Image {
id: image
source: "images/ball.png"
}
}