Qt 学习之路：模型-视图高级技术
PathView
PathView是 QtQuick 中最強大的視圖，同時也是最復(fù)雜的。PathView允許創(chuàng)建一種更靈活的視圖。在這種視圖中，數(shù)據(jù)項并不是方方正正，而是可以沿著任意路徑布局。沿著同一布局路徑，數(shù)據(jù)項的屬性可以被更詳細(xì)的設(shè)置，例如縮放、透明度等。
?
使用PathView首先需要定義一個代理和一個路徑。除此之外，PathView還可以設(shè)置很多其它屬性，其中最普遍的是pathItemCount，用于設(shè)置可視數(shù)據(jù)項的數(shù)目；preferredHighlightBegin、preferredHighlightEnd和highlightRangeMode可以設(shè)置高亮的范圍，也就是沿著路徑上面的當(dāng)前可以被顯示的數(shù)據(jù)項。
在深入了解高亮范圍之前，我們必須首先了解path屬性。path接受一個Path元素，用于定義PathView中的代理所需要的路徑。該路徑使用startX和startY屬性，結(jié)合PathLine、PathQuad、PathCubic等路徑元素進(jìn)行定義。這些元素可以結(jié)合起來形成一個二維路徑。
一旦路徑定義完成，我們可以使用PathPercent和PathAttribute元素進(jìn)行調(diào)整。這些元素用于兩個路徑元素之間，更好的控制路徑和路徑上面的代理。PathPercent控制兩個元素之間的路徑部分有多大。它控制了路徑上面代理的分布，這些代理按照其定義的百分比進(jìn)行分布。
PathAttribute元素同PathPercent同樣放置在元素之間。該元素允許沿路徑插入一些屬性值。這些屬性值附加到代理上面，可用于任何能夠使用的屬性。
下面的例子演示了如何利用PathView實現(xiàn)卡片的彈入。這里使用了一些技巧來達(dá)到這一目的。它的路徑包含三個PathLine元素。通過PathPercent元素，中間的元素可以正好位于中央位置，并且能夠留有充足的空間，以避免被別的元素遮擋。元素的旋轉(zhuǎn)、大小縮放和 Z 軸都是由PathAttribute進(jìn)行控制。除了定義路徑，我們還設(shè)置了PathView的pathItemCount屬性。該屬性用于指定路徑所期望的元素個數(shù)。最后，代理中的PathView.onPath使用preferredHighlightBegin和preferredHighlightEnd屬性控制代理的可見性。
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | ????PathView { ????????anchors.fill: parent ????????delegate: flipCardDelegate ????????model: 100 ????????path: Path { ????????????startX: root.width/2 ????????????startY: 0 ????????????PathAttribute { name: "itemZ"; value: 0 } ????????????PathAttribute { name: "itemAngle"; value: -90.0; } ????????????PathAttribute { name: "itemScale"; value: 0.5; } ????????????PathLine { x: root.width/2; y: root.height*0.4; } ????????????PathPercent { value: 0.48; } ????????????PathLine { x: root.width/2; y: root.height*0.5; } ????????????PathAttribute { name: "itemAngle"; value: 0.0; } ????????????PathAttribute { name: "itemScale"; value: 1.0; } ????????????PathAttribute { name: "itemZ"; value: 100 } ????????????PathLine { x: root.width/2; y: root.height*0.6; } ????????????PathPercent { value: 0.52; } ????????????PathLine { x: root.width/2; y: root.height; } ????????????PathAttribute { name: "itemAngle"; value: 90.0; } ????????????PathAttribute { name: "itemScale"; value: 0.5; } ????????????PathAttribute { name: "itemZ"; value: 0 } ????????} ????????pathItemCount: 16 ????????preferredHighlightBegin: 0.5 ????????preferredHighlightEnd: 0.5 ????} |
?
代理直接使用了通過PathAttribute元素附加的itemZ、itemAngle和itemScale屬性。需要注意的是，被附加到代理的屬性只能在wrapper中使用。因此，我們又定義了一個rotX屬性，以便在內(nèi)部的Rotation元素中使用。另一點需要注意的是附件屬性PathView.onPath的使用。通常我們會將這個屬性綁定到可視化屬性，這樣允許PathView保留非可見元素，以便進(jìn)行緩存。如果不這樣設(shè)置，不可見元素可能會由于界面裁剪等原因被銷毀，因為PathView比ListView和GridView要靈活得多，所以為提高性能，一般會使用這種綁定實現(xiàn)緩存。
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | ????Component { ????????id: flipCardDelegate ????????BlueBox { ????????????id: wrapper ????????????width: 64 ????????????height: 64 ????????????antialiasing: true ????????????gradient: Gradient { ????????????????GradientStop { position: 0.0; color: "#2ed5fa" } ????????????????GradientStop { position: 1.0; color: "#2467ec" } ????????????} ????????????visible: PathView.onPath ????????????scale: PathView.itemScale ????????????z: PathView.itemZ ????????????property variant rotX: PathView.itemAngle ????????????transform: Rotation { ????????????????axis { x: 1; y: 0; z: 0 } ????????????????angle: wrapper.rotX; ????????????????origin { x: 32; y: 32; } ????????????} ????????????text: index ????????} ????} |
?
示例運行結(jié)果如下：
完成PathView中圖片和一些復(fù)雜元素的變換之后，通常會進(jìn)行一定的性能優(yōu)化，比如，將Image元素的smooth屬性綁定到PathView.view.moving附加屬性。這意味著在移動時，圖片質(zhì)量會稍有下降，靜止時恢復(fù)正常。在視圖移動時，很少有用戶會在意圖片的清晰度，因此，這樣的妥協(xié)一般是可以接受的。
從 XML 加載模型
XML 是一種非常常見的數(shù)據(jù)格式，QML 提供了XmlListModel元素支持將 XML 數(shù)據(jù)轉(zhuǎn)換為模型。XmlListModel可以加載本地或遠(yuǎn)程的 XML 文檔，使用 XPath 表達(dá)式處理數(shù)據(jù)。
下面的例子給出了如何從 RSS 獲取圖片。source屬性指向了一個遠(yuǎn)程地址，其數(shù)據(jù)會被自動下載下來。
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | import QtQuick 2.0 import QtQuick.XmlListModel 2.0 Background { ????width: 300 ????height: 480 ????Component { ????????id: imageDelegate ????????Box { ????????????width: listView.width ????????????height: 220 ????????????color: '#333' ????????????Column { ????????????????Text { ????????????????????text: title ????????????????????color: '#e0e0e0' ????????????????} ????????????????Image { ????????????????????width: listView.width ????????????????????height: 200 ????????????????????fillMode: Image.PreserveAspectCrop ????????????????????source: imageSource ????????????????} ????????????} ????????} ????} ????XmlListModel { ????????id: imageModel ????????source: "http://www.padmag.cn/feed" ????????query: "/rss/channel/item" ????????XmlRole { name: "title"; query: "title/string()" } ????????XmlRole { name: "imageSource"; query: "substring-before(substring-after(description/string(), 'img src=\"'), '\"')" } ????} ????ListView { ????????id: listView ????????anchors.fill: parent ????????model: imageModel ????????delegate: imageDelegate ????} } |
?
當(dāng)數(shù)據(jù)被下載下來，這個 XML 就被處理成模型的數(shù)據(jù)項和角色。query屬性是 XPath 表達(dá)式語言，用于創(chuàng)建模型數(shù)據(jù)項。在這個例子中，該屬性值為/rss/channel/item，因此，rss 標(biāo)簽下的每一個 channel 標(biāo)簽中的每一個 item 標(biāo)簽，都會被生成一個數(shù)據(jù)項。每一個數(shù)據(jù)項都可以定義一系列角色，這些角色使用XmlRole表示。每一個角色都有一個名字，代理可以使用附件屬性訪問到其值。角色的值是使用 XPath 表達(dá)式獲取的。例如，title屬性的值由title/string()表達(dá)式?jīng)Q定，返回的是<title>和</title>標(biāo)簽之間的文本。imageSource屬性值則更有趣。它并不是直接由 XML 獲取的字符串，而是一系列函數(shù)的運算結(jié)果。在返回的 XML 中，有些 item 中包含圖片，使用<img src=標(biāo)簽表示。使用substring-after和substring-beforeXPath 函數(shù)，可以找到每張圖片的地址并返回。因此，imageSource屬性可以直接作為Image元素的source屬性值。
分組列表
有時，列表中的數(shù)據(jù)可以分成幾個部分，例如，按照列表數(shù)據(jù)的首字母分組。利用ListView可以將一個扁平的列表分為幾個組，如下圖所示：
為了使用分組，需要設(shè)置section.property和section.criteria兩個屬性。section.property定義了使用哪個屬性進(jìn)行分組。這里，需要確保模型已經(jīng)排好序了，以便每一部分能夠包含連續(xù)的元素，否則，同一屬性的名字可能出現(xiàn)在多個位置。section.criteria的可選值為ViewSection.FullString或ViewSection.FirstCharacter。前者為默認(rèn)值，適用于具有明顯分組的模型，例如，音樂集等；后者按照屬性首字母分組，并且意味著所有屬性都適用于此，常見例子是電話本的通訊錄名單。
一旦分組定義完畢，在每一個數(shù)據(jù)項就可以使用附加屬性ListView.section、ListView.previousSection和ListView.nextSection訪問到這個分組。使用這個屬性，我們就可以找到一個分組的第一個和最后一個元素，從而實現(xiàn)某些特殊功能。
我們也可以給ListView的section.delegate屬性賦值，以便自定義分組顯示的代理。這會在一個組的數(shù)據(jù)項之前插入一個用于顯示分組的代理。這個代理可以使用附加屬性訪問當(dāng)前分組的名字。
下面的例子按照國別對一組人進(jìn)行分組。國別被設(shè)置為section.property屬性的值。section.delegate組件，也就是sectionDelegate，用于顯示每組的名字，也就是國家名。每組中的人名則使用spaceManDelegate顯示。
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | import QtQuick 2.0 Background { ????width: 300 ????height: 290 ????ListView { ????????anchors.fill: parent ????????anchors.margins: 20 ????????clip: true ????????model: spaceMen ????????delegate: spaceManDelegate ????????section.property: "nation" ????????section.delegate: sectionDelegate ????} ????Component { ????????id: spaceManDelegate ????????Item { ????????????width: ListView.view.width ????????????height: 20 ????????????Text { ????????????????anchors.left: parent.left ????????????????anchors.verticalCenter: parent.verticalCenter ????????????????anchors.leftMargin: 8 ????????????????font.pixelSize: 12 ????????????????text: name ????????????????color: '#1f1f1f' ????????????} ????????} ????} ????Component { ????????id: sectionDelegate ????????BlueBox { ????????????width: ListView.view.width ????????????height: 20 ????????????text: section ????????????fontColor: '#e0e0e0' ????????} ????} ????ListModel { ????????id: spaceMen ????????ListElement { name: "Abdul Ahad Mohmand"; nation: "Afganistan"; } ????????ListElement { name: "Marcos Pontes"; nation: "Brazil"; } ????????ListElement { name: "Alexandar Panayotov Alexandrov"; nation: "Bulgaria"; } ????????ListElement { name: "Georgi Ivanov"; nation: "Bulgaria"; } ????????ListElement { name: "Roberta Bondar"; nation: "Canada"; } ????????ListElement { name: "Marc Garneau"; nation: "Canada"; } ????????ListElement { name: "Chris Hadfield"; nation: "Canada"; } ????????ListElement { name: "Guy Laliberte"; nation: "Canada"; } ????????ListElement { name: "Steven MacLean"; nation: "Canada"; } ????????ListElement { name: "Julie Payette"; nation: "Canada"; } ????????ListElement { name: "Robert Thirsk"; nation: "Canada"; } ????????ListElement { name: "Bjarni Tryggvason"; nation: "Canada"; } ????????ListElement { name: "Dafydd Williams"; nation: "Canada"; } ????} } |
?
關(guān)于性能
模型視圖的性能很大程度上取決于創(chuàng)建新的代理所造成的消耗。例如，如果clip屬性設(shè)置為false，當(dāng)向下滾動ListView時，系統(tǒng)會在列表末尾創(chuàng)建新的代理，并且將列表上部已經(jīng)不可顯示的代理移除。顯然，當(dāng)初始化代理需要消耗大量時間時，用戶在快速拖動滾動條時，這種現(xiàn)象就會造成一定程度的影響。
為了避免這種情況，你可以調(diào)整被滾動視圖的外邊框的值。通過修改cacheBuffer屬性即可達(dá)到這一目的。在上面所述的有關(guān)豎直滾動的例子中，這個屬性會影響到列表上方和下方會有多少像素。這些像素則影響到是否能夠容納這些代理。例如，將異步加載圖片與此結(jié)合，就可以實現(xiàn)在圖片真正加載完畢之后才顯示出來。
更多的代理意味著更多的內(nèi)存消耗，從而影響到用戶的操作流暢度，同時也有關(guān)代理初始化的時間。對于復(fù)雜的代理，上面的方法并不能從根本上解決問題。代理初始化一次，其內(nèi)容就會被重新計算。這會消耗時間，如果這個時間很長，很顯然，這會降低用戶體驗。代理中子元素的個數(shù)同樣也有影響。原因很簡單，移動更多的元素當(dāng)然要更多的時間。為了解決前面所說的兩個問題，我們推薦使用Loader元素。Loader元素允許延時加載額外的元素。例如，一個可展開的代理，只有當(dāng)用戶點擊時，才會顯示這一項的詳細(xì)信息，包含一個很大的圖片。那么，利用Loader元素，我們可以做到，只有其被顯示時才進(jìn)行加載，否則不加載。基于同樣的原因，應(yīng)該使每個代理中包含的 JavaScript 代碼盡可能少。最好能做到在代理之外調(diào)用復(fù)雜的 JavaScript 代碼。這將減少代理創(chuàng)建時編譯 JavaScript 所消耗的時間。
轉(zhuǎn)載于:https://www.cnblogs.com/lvdongjie/p/4811582.html
總結(jié)
以上是生活随笔為你收集整理的Qt 学习之路：模型-视图高级技术的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 黑茶多少钱啊？
- 下一篇： C++基础知识（二）