快捷導(dǎo)航

教你如何使用qt quick-PathView實(shí)現(xiàn)好看的home界面

更新時(shí)間：2021年06月26日 08:19:08 作者：諾謙

pathView的使用類似與ListView,都需要模型(model)和代理(delegate),只不過pathView多了一個(gè)路徑(path)屬性,顧名思義路徑就是item滑動(dòng)的路徑，下面給大家分享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 類庫中最復(fù)雜也最靈活的一個(gè)了。

要使用一個(gè) PathView ，至少須要設(shè)置 model 、 delegate 、 path 三個(gè)屬性。
model 、 delegate 假設(shè)你學(xué)習(xí)過 ListView 肯定已經(jīng)接觸過，這里不再細(xì)說。 path 是 PathView 的專有特性，它指定 PathView 用來放置 item 的路徑。

要使用 PathView 。先要了解 Path 。

一個(gè)Path可以由下面多個(gè)Path段組成(之前講解PathAnimation時(shí)提過):

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用來給路徑上定義帶有值的命名屬性。而PathPercent則用來對每個(gè)間距進(jìn)行一個(gè)調(diào)整。

1.PathAttribute
PathAttribute對象用來給路徑上的不同點(diǎn)指定由name和value組成的自定義屬性。自定義屬性將會(huì)作為附加屬性公開給委托。
路徑上任何特定點(diǎn)上的屬性值都是通過下個(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用來設(shè)置每個(gè)路徑上的顯示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實(shí)戰(zhàn)

我們參考韋東山之前發(fā)布的一個(gè)Qt開源視頻,如下圖所示:

最終做出來如下圖所示:

效果圖如下所示(有點(diǎn)大,需要多等下刷新出來):

源碼已經(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實(shí)現(xiàn)好看的home界面的詳細(xì)內(nèi)容，更多關(guān)于qt quick-PathView的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: