QML中的模型/視圖--在QML中呈現數據

    Qt Quick包含了一組可以使用不停方式呈現數據的標準項目。

    視圖是一個包含條目集合的可以滾動容器，功能豐富，支持典型應用程序中的多種使用情況，而且還可以進行自定義風格和行爲來滿足需求。

    Qt Quick基本元素提供的標註視圖：

    a. ListView 在水平或者垂直列表中排列條目

    b. GridView 在可用空間中將條目排列在一個網格中

    c. PathView 在路徑上排列條目

     與這些視圖不同，WebView不是一個功能完整的視圖項目，需要和Flickable項目一起使用來創建一個視圖，實現的功能與網頁瀏覽器相似。

1. ListView

    ListView可以顯示一個水平或者垂直放置條目的條目列表。ListView擁有一個模型model屬性，用來定義要顯示的數據，還有一個委託delegate屬性，用來定義數據顯示的方式。ListView默認具有探洞效果，因爲它繼承自Flickable項目。上一節已經多次使用過ListView元素了，那些列子中模型都是和視圖定義在同一個文件的，其實模型也可以定義在一個獨立的文件中，然後像一般的組件一樣來使用它。

   ListView中使用highlight屬性可以指定當前選擇項目的高亮顯示。focus屬性設置爲true是爲了確保可以使用鍵盤來導航列表視圖。

highlight: Rectangle {color: "lightsteelblue"; radius: 5}
focus: true

    ListView在委託的根項目中附加了多個屬性，列如ListView.isCurrentItem可以用來判斷一個條目是否是當前條目。

    ContactModel.qml內容

import QtQuick 2.0

ListModel {
    ListElement {
        name: "Bill Smith"
        number: "555 364"
    }
    ListElement {
        name: "John Brown"
        number: "555 864"
    }
    ListElement {
        name: "Sam Wise"
        number: "555 0364"
    }
}

    顯示在ListView中

import QtQuick 2.4

ListView {
    width: 180; height: 200
    Component {
        id: contactsDelegate
        Rectangle{
            id: wrapper
            width: 180; height: contactInfo.height
            color: ListView.isCurrentItem ? "black" : "red"
            Text {
                id: contactInfo
                text: name + ": " + number
                color: wrapper.ListView.isCurrentItem ? "red" : "black" //使用wrapper
            }
        }
    }
    model: ContactModel{}
    delegate: contactsDelegate
    focus: true
}

   a.剪裁：clip屬性設置爲true，默認爲false

   b.顯示方向和顯示順序：

      orientation：ListView顯示方向--ListView.Horizontal<水平>；layoutDirection：Qt.LeftToRight(default)，Qt.RightToLeft

      orientation：ListView.Vertical(default)<垂直>--verticalLayoutDirection：ListView.TopToBottom(default)， ListView.BottomToTop

   c.添加動畫

   向ListView的model裏添加數據時的動畫model做insert或push操作。

ListView {
    ...
    add: Transition {
        NumberAnimation { properties: "x,y"; from: 100; duration: 1000}
}    

   d.替換動畫

   ListView的model裏替換時的動畫，model做delete或insert操作行的後邊部分。

ListView {
    ...
    addDisplaced: Transition {
        NumberAnimation { properties: "x,y"; from: 100; duration: 1000}
}

   e.列表腳：自己定義樣式

   e.列表腳設置：

   footerPositioning：ListView.InlineFooter--在ListItem下面，ListView.OverLayFooter--固定顯示在可視部分的下方，可以被ListViewItem覆蓋，ListView.pullBackFooter--顯示在下方，拖動隨ListItem畫出可視區域。

   f.列表頭

   f.列表頭設置

   headerPositioning：ListView.InlineHeader--在ListItem下面，ListView.OverLayHeader--固定顯示在可視部分的下方，可以被ListViewItem覆蓋，ListView.pullBackHeader--顯示在下方，拖動隨ListItem畫出可視區域。

另外，ListView還提供了decrementCurrentIndex()和incrementCurrentIndex()函數來進行條目的自動滾動。

  g.刪除行的動畫  

ListView {
    ...
    remove: Transition {
        ParallelAnimation {
            NumberAnimation { property: "opacity"; to: 0; duration: 1000 }
            NumberAnimation { properties: "x,y"; to: 100; duration: 1000 }
        }
    }
}

    h.刪除行以下部分的動畫

removeDisplaced: Transition {
        NumberAnimation { properties: "x,y"; duration: 1000 }
}

2. GridView

    GridView與ListView的概念以及用法很相似。將條目排列成網格。

3. PathView

     Pathview與ListView、GridView最大的不同之處在於它是一個路徑(Path)上排列條目的。

import QtQuick 2.4

Rectangle {
    width: 400; height: 240
    color: "white"

    ListModel {
        id: appModel
        ListElement {name: "Musice"; icon: "1.jpg"}
        ListElement {name: "Movie"; icon: "2.jpg"}
        ListElement {name: "Camera"; icon: "3.jpg"}
        ListElement {name: "Messaging"; icon: "5.jpg"}
        ListElement {name: "Contacts List"; icon: "6.jpg"}
    }

    Component {
        id: appDelegate
        Item {
            id: test
            width: 100; height: 100
            scale: PathView.iconScale //放大縮小倍數
            Image {
                id: myIcon
                y: 20; anchors.horizontalCenter: parent.horizontalCenter
                width: 55
                height: 55
                source: icon
                smooth: true
            }
            Text {
                anchors{
                    top: myIcon.bottom
                    horizontalCenter: parent.horizontalCenter
                }
                text: name
                smooth: true
                color: test.PathView.isCurrentItem ? "red" : "black"
            }
            MouseArea {
                anchors.fill: parent
                onClicked: view.currentIndex = index
            }
        }
    }

    Component {
        id: appHighlight
        Rectangle {width: 80; height: 80; color: "lightsteelblue"}
    }

    PathView {
        id: view
        anchors.fill: parent
        highlight: appHighlight
        preferredHighlightBegin: 0.5
        preferredHighlightEnd: 0.5
        focus: true
        model: appModel
        delegate: appDelegate
        //Path由一個或者多個路徑組成，可用的路徑包括PathLine、PathQuad和PathCubic
        path:Path {
            startX: 10
            startY: 50
            PathAttribute {name: "iconScale"; value: 0.5}
            PathQuad {x: 200; y:150; controlX: 50; controlY: 200}
            PathAttribute {name: "iconScale"; value: 1.0}
            PathQuad {x: 390; y:50; controlX: 350; controlY: 200}
            PathAttribute{name: "iconScale"; value: 0.5}
        }
        onCurrentIndexChanged: {
            console.log("獲取pathView的當前值： " + appmodel.get(currentIndex).name)    
        } 
    }
}

     a. PathLine定義了一條直線，可以以一條直線到達指定的位置。

Path {
    startX: 0; startY: 100
    PathLine {x: 200; y:100}
}

     b. PathQuad定義了包含一個控制點的二次貝爾賽曲線。

Path {
    startX: 20; startY: 0
    PathQuad {x: 200; y:0; controlX: 100; controlY: 150}
}

     c.  PathCubic定義了一個具有兩個控制點的三次貝塞爾曲線。

Path {
    startX: 20; startY: 0
    PathCubic {
        x: 180; y:0; 
        control1X: -10; control1Y:90
        control2X: 210; control2Y:90
    }
}

    Path中條目之間的空隙使用PathPercent對象來調節。   

PathView {
    ...
    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}
    }
}

     使用PathPerCent將一半的條目分佈在中間的PathLine上

PathView {
    ...
    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}
    }
}

    Path中還可以使用PathAttribute，該對象允許在路徑上的多個點指定由名稱和值組成的屬性。這些屬性可以作爲附加屬性在委託中使用。在路徑上其他沒有指定屬性的點會進行線性插值。例如前面例子中，指定的iconScale屬性，分別在路徑兩端和中間部位指定了其縮放值，中間爲正常大小，兩端顯示爲一半大小。在端點和中間點之間的點會進行線性插值，也就是在起縮放值在0.5和1.0進行線性變化。

4. WebView

    WebView主要用來對網頁內容進行渲染，只需要爲其指定一個URL即可。在使用該元素時需要先導入QtWebKit模塊。

import QtQuick 2.4
import QtWebKit 3.0

Flickable {
    width: 400; height: 300
    contentWidth: webView.width; contentHeight: webView.height

    WebView {
        id: webView
        url: "http://www.baidu.com"
    }
}

     WebView默認不可彈動，所以放入Flickable項目中。這裏需要指定網頁的URL即可。