教你如何使用qt quick-PathView實現(xiàn)好看的home界面
PathView ,顧名思義,沿著特定的路徑顯示 Model 內(nèi)的數(shù)據(jù)。 Model 能夠是 QML 內(nèi)建的 ListModel 、 XmlListModel ,也能夠是在 C++ 中實現(xiàn)的 QAbstractListModel 的派生類。
PathView 恐怕是 Qt Quick 提供的 Model-View 類庫中最復(fù)雜也最靈活的一個了。
要使用一個 PathView ,至少須要設(shè)置 model 、 delegate 、 path 三個屬性。
model 、 delegate 假設(shè)你學(xué)習(xí)過 ListView 肯定已經(jīng)接觸過,這里不再細說。 path 是 PathView 的專有特性,它指定 PathView 用來放置 item 的路徑。
要使用 PathView 。先要了解 Path 。
一個Path可以由下面多個Path段組成(之前講解PathAnimation時提過):
- PathLine : 由一個坐標指定的直線路徑
- PathPolyline : 由一個path坐標列表指定的多段路徑
- PathQuad : 由一個控制點生成的二次貝塞爾曲線路徑
- PathCubic : 由兩個控制點生成的三次貝塞爾曲線路徑
- PathArc : 由結(jié)束坐標,以及一個radiusX和radiusY半徑實現(xiàn)的一個圓弧(順時針繪畫)
- PathAngleArc : 由中心點、半徑和起始角度startAngle、旋轉(zhuǎn)角度sweepAngle指定的圓弧。
- PathCurve : 由一個坐標點生成的curve曲線路徑(通常需要配合多個PathCurve才行)
- PathSvg : 由SVG路徑字符串實現(xiàn)的路徑。你可以用它創(chuàng)建線條, 曲線, 弧形等等
下表概述了各種路徑元素的適用性:
其中PathAttribute用來給路徑上定義帶有值的命名屬性。而PathPercent則用來對每個間距進行一個調(diào)整。
1.PathAttribute
PathAttribute對象用來給路徑上的不同點指定由name和value組成的自定義屬性。自定義屬性將會作為附加屬性公開給委托。
路徑上任何特定點上的屬性值都是通過下個PathAttributes插入的。然后兩個點之間的路徑會根據(jù)屬性value值做插值計算.
比如下面這個(參考QT幫助):
path: Path { startX: 120; startY: 100 PathAttribute { name: "iconScale"; value: 1.0 } // 給(120,100)添加屬性iconScale = 1.0、iconOpacity = 1.0 PathAttribute { name: "iconOpacity"; value: 1.0 } PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 } PathAttribute { name: "iconScale"; value: 0.3 } // 給(120,25)添加屬性iconScale = 0.3 iconOpacity = 0.5 PathAttribute { name: "iconOpacity"; value: 0.5 } PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 } }
這里我們最后還有一個貝塞爾曲線,終點是(120,100),這里并未給它賦PathAttribute自定義屬性,這是因為開頭已經(jīng)給(120,100)添加了屬性.所以這里省略掉了.
大家不妨試試改成這樣(其實效果一樣):
path: Path { startX: 120; startY: 100 PathAttribute { name: "iconScale"; value: 1.0 } // 給(120,100)添加屬性iconScale = 1.0、iconOpacity = 1.0 PathAttribute { name: "iconOpacity"; value: 1.0 } PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 } PathAttribute { name: "iconScale"; value: 0.3 } // 給(120,25)添加屬性iconScale = 0.3 iconOpacity = 0.5 PathAttribute { name: "iconOpacity"; value: 0.5 } PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 } PathAttribute { name: "iconScale"; value: 1.0 } // 給(120,100)添加屬性iconScale = 1.0、iconOpacity = 1.0 PathAttribute { name: "iconOpacity"; value: 1.0 } }
2.PathPercent
PathPercent用來設(shè)置每個路徑上的顯示item的百分比比例,通常放在路徑元素后面,來指示前面的路徑顯示item的百分比比例
比如下面示例:
path:Path { startX: 20; startY: 100 PathQuad { x: 50; y: 180; controlX: 0; controlY: 80 } PathPercent { value: 0.25 } PathLine { x: 150; y: 180 } PathPercent { value: 0.75 } PathQuad { x: 180; y: 100; controlX: 200; controlY: 80 } }
將50%的item放置在PathLine路徑上,然后25%的item放置在其它PathQuad上.
3.PathView實戰(zhàn)
我們參考韋東山之前發(fā)布的一個Qt開源視頻,如下圖所示:
最終做出來如下圖所示:
效果圖如下所示(有點大,需要多等下刷新出來):
源碼已經(jīng)上傳到群里,由于我們借用了別人的UI圖,所以請不要將別人的UI圖片用在商業(yè)上,僅供學(xué)習(xí)參考使用?。?!
核心代碼如下所示:
ListModel { id: mymodel ListElement { name: "多媒體" back: "qrc:/images/media_nor.png" } ListElement { name: "系統(tǒng)設(shè)置" back: "qrc:/images/system_nor.png" } ListElement { name: "智能家電" back: "qrc:/images/machine_nor.png" } ListElement { name: "衛(wèi)生醫(yī)療" back: "qrc:/images/medical_nor.png" } ListElement { name: "公共服務(wù)" back: "qrc:/images/public_nor.png" } } Component { id: delegate App { id: rect width: itemSize.width height: itemSize.height z: PathView.iconZ scale: PathView.iconScale imagSrc: back label: name enabled: view.opacity == 1.0 transform: Rotation{ origin.x: rect.width/2.0 origin.y: rect.height/2.0 axis{x:0;y:1;z:0} angle: rect.PathView.iconAngle } MouseArea { anchors.fill: parent onClicked: { if (view.currentIndex == index) newJumpWindow("qrc:/AppWindow.qml", name) } } } } PathView { id: view anchors.centerIn: parent width: (itemCount-1.9)*itemSize.width height: wind.height model: mymodel delegate: delegate flickDeceleration: 300 preferredHighlightBegin: 0.5 preferredHighlightEnd: 0.5 pathItemCount: itemCount clip: true enabled: opacity == 1.0 path: Path { id: path startX: 0 startY: view.height * 0.45 PathAttribute{name:"iconZ";value: 0} PathAttribute{name:"iconAngle";value: -50} PathAttribute{name:"iconScale";value: 0.7} PathLine{x:view.width/2; y: path.startY} // 設(shè)置初始Z為0,角度為70 大小比例為0.6 PathAttribute{name:"iconZ";value: 100} PathAttribute{name:"iconAngle";value: 0} PathAttribute{name:"iconScale";value: 1.0} PathLine{x:view.width; y: path.startY} PathAttribute{name:"iconZ";value: 0} PathAttribute{name:"iconAngle";value: 50} PathAttribute{name:"iconScale";value: 0.7} } }
未完待續(xù) ~
以上就是教你如何使用qt quick-PathView實現(xiàn)好看的home界面的詳細內(nèi)容,更多關(guān)于qt quick-PathView的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
C++實現(xiàn)LeetCode(186.翻轉(zhuǎn)字符串中的單詞之二)
這篇文章主要介紹了C++實現(xiàn)LeetCode(186.翻轉(zhuǎn)字符串中的單詞之二),本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-08-08C++基礎(chǔ)入門教程(一):基礎(chǔ)知識大雜燴
這篇文章主要介紹了C++基礎(chǔ)入門教程(一):基礎(chǔ)知識大雜燴,本文講解了注釋、頭文件、命名空間等內(nèi)容,需要的朋友可以參考下2014-11-11C語言判斷數(shù)是否為素數(shù)與素數(shù)輸出
大家好,本篇文章主要講的是C語言判斷數(shù)是否為素數(shù)與素數(shù)輸出,感興趣的同學(xué)趕快來看一看吧,對你有幫助的話記得收藏一下,方便下次瀏覽2021-12-12詳解C++調(diào)用Python腳本中的函數(shù)的實例代碼
這篇文章主要介紹了C++調(diào)用Python腳本中的函數(shù) ,需要的朋友可以參考下2018-11-11C語言時間函數(shù)的ctime()和gmtime()你了解嗎
這篇文章主要為大家詳細介紹了C語言時間函數(shù)的ctime()和gmtime(),文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-02-02C語言編程gcc如何生成靜態(tài)庫.a和動態(tài)庫.so示例詳解
本文主要敘述了gcc如何生成靜態(tài)庫(.a)和動態(tài)庫(.so),幫助我們更好的進行嵌入式編程。因為有些時候,涉及安全,所以可能會提供靜態(tài)庫或動態(tài)庫供我們使用2021-10-10