教你如何使用qt quick-PathView實(shí)現(xiàn)好看的home界面
PathView ,顧名思義,沿著特定的路徑顯示 Model 內(nèi)的數(shù)據(jù)。 Model 能夠是 QML 內(nèi)建的 ListModel 、 XmlListModel ,也能夠是在 C++ 中實(shí)現(xiàn)的 QAbstractListModel 的派生類。
PathView 恐怕是 Qt Quick 提供的 Model-View 類庫(kù)中最復(fù)雜也最靈活的一個(gè)了。
要使用一個(gè) PathView ,至少須要設(shè)置 model 、 delegate 、 path 三個(gè)屬性。
model 、 delegate 假設(shè)你學(xué)習(xí)過(guò) ListView 肯定已經(jīng)接觸過(guò),這里不再細(xì)說(shuō)。 path 是 PathView 的專有特性,它指定 PathView 用來(lái)放置 item 的路徑。
要使用 PathView 。先要了解 Path 。
一個(gè)Path可以由下面多個(gè)Path段組成(之前講解PathAnimation時(shí)提過(guò)):
- PathLine : 由一個(gè)坐標(biāo)指定的直線路徑
- PathPolyline : 由一個(gè)path坐標(biāo)列表指定的多段路徑
- PathQuad : 由一個(gè)控制點(diǎn)生成的二次貝塞爾曲線路徑
- PathCubic : 由兩個(gè)控制點(diǎn)生成的三次貝塞爾曲線路徑
- PathArc : 由結(jié)束坐標(biāo),以及一個(gè)radiusX和radiusY半徑實(shí)現(xiàn)的一個(gè)圓弧(順時(shí)針繪畫)
- PathAngleArc : 由中心點(diǎn)、半徑和起始角度startAngle、旋轉(zhuǎn)角度sweepAngle指定的圓弧。
- PathCurve : 由一個(gè)坐標(biāo)點(diǎn)生成的curve曲線路徑(通常需要配合多個(gè)PathCurve才行)
- PathSvg : 由SVG路徑字符串實(shí)現(xiàn)的路徑。你可以用它創(chuàng)建線條, 曲線, 弧形等等
下表概述了各種路徑元素的適用性:
其中PathAttribute用來(lái)給路徑上定義帶有值的命名屬性。而PathPercent則用來(lái)對(duì)每個(gè)間距進(jìn)行一個(gè)調(diào)整。
1.PathAttribute
PathAttribute對(duì)象用來(lái)給路徑上的不同點(diǎn)指定由name和value組成的自定義屬性。自定義屬性將會(huì)作為附加屬性公開給委托。
路徑上任何特定點(diǎn)上的屬性值都是通過(guò)下個(gè)PathAttributes插入的。然后兩個(gè)點(diǎn)之間的路徑會(huì)根據(jù)屬性value值做插值計(jì)算.
比如下面這個(gè)(參考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 } }
這里我們最后還有一個(gè)貝塞爾曲線,終點(diǎn)是(120,100),這里并未給它賦PathAttribute自定義屬性,這是因?yàn)殚_頭已經(jīng)給(120,100)添加了屬性.所以這里省略掉了.
大家不妨試試改成這樣(其實(shí)效果一樣):
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用來(lái)設(shè)置每個(gè)路徑上的顯示item的百分比比例,通常放在路徑元素后面,來(lái)指示前面的路徑顯示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實(shí)戰(zhàn)
我們參考韋東山之前發(fā)布的一個(gè)Qt開源視頻,如下圖所示:
最終做出來(lái)如下圖所示:
效果圖如下所示(有點(diǎn)大,需要多等下刷新出來(lái)):
源碼已經(jīng)上傳到群里,由于我們借用了別人的UI圖,所以請(qǐng)不要將別人的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實(shí)現(xiàn)好看的home界面的詳細(xì)內(nèi)容,更多關(guān)于qt quick-PathView的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
C++實(shí)現(xiàn)LeetCode(186.翻轉(zhuǎn)字符串中的單詞之二)
這篇文章主要介紹了C++實(shí)現(xiàn)LeetCode(186.翻轉(zhuǎn)字符串中的單詞之二),本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08C++基礎(chǔ)入門教程(一):基礎(chǔ)知識(shí)大雜燴
這篇文章主要介紹了C++基礎(chǔ)入門教程(一):基礎(chǔ)知識(shí)大雜燴,本文講解了注釋、頭文件、命名空間等內(nèi)容,需要的朋友可以參考下2014-11-11C語(yǔ)言判斷數(shù)是否為素?cái)?shù)與素?cái)?shù)輸出
大家好,本篇文章主要講的是C語(yǔ)言判斷數(shù)是否為素?cái)?shù)與素?cái)?shù)輸出,感興趣的同學(xué)趕快來(lái)看一看吧,對(duì)你有幫助的話記得收藏一下,方便下次瀏覽2021-12-12詳解C++調(diào)用Python腳本中的函數(shù)的實(shí)例代碼
這篇文章主要介紹了C++調(diào)用Python腳本中的函數(shù) ,需要的朋友可以參考下2018-11-11C語(yǔ)言時(shí)間函數(shù)的ctime()和gmtime()你了解嗎
這篇文章主要為大家詳細(xì)介紹了C語(yǔ)言時(shí)間函數(shù)的ctime()和gmtime(),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2022-02-02C語(yǔ)言函數(shù)棧幀的創(chuàng)建與銷毀詳解
函數(shù)棧幀(stack frame)就是函數(shù)調(diào)用過(guò)程中在程序的調(diào)用棧(call stack)所開辟的空間,下面這篇文章主要給大家介紹了關(guān)于C語(yǔ)言函數(shù)棧幀的創(chuàng)建與銷毀的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09C語(yǔ)言編程gcc如何生成靜態(tài)庫(kù).a和動(dòng)態(tài)庫(kù).so示例詳解
本文主要敘述了gcc如何生成靜態(tài)庫(kù)(.a)和動(dòng)態(tài)庫(kù)(.so),幫助我們更好的進(jìn)行嵌入式編程。因?yàn)橛行r(shí)候,涉及安全,所以可能會(huì)提供靜態(tài)庫(kù)或動(dòng)態(tài)庫(kù)供我們使用2021-10-10