教你如何使用qt quick-PathView實現好看的home界面

Posted on by

PathView ，顧名思義，沿著特定的路徑顯示 Model 內的數據。 Model 能夠是 QML 內建的 ListModel 、 XmlListModel ，也能夠是在 C++ 中實現的 QAbstractListModel 的派生類。

    PathView 恐怕是 Qt Quick 提供的 Model-View 類庫中最復雜也最靈活的一個瞭。

    要使用一個 PathView ，至少須要設置 model 、 delegate 、 path 三個屬性。
    model 、 delegate 假設你學習過 ListView 肯定已經接觸過，這裡不再細說。 path 是 PathView 的專有特性，它指定 PathView 用來放置 item 的路徑。

要使用 PathView 。先要瞭解 Path 。

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

  • PathLine : 由一個坐標指定的直線路徑
  • PathPolyline : 由一個path坐標列表指定的多段路徑
  • PathQuad : 由一個控制點生成的二次貝塞爾曲線路徑
  • PathCubic : 由兩個控制點生成的三次貝塞爾曲線路徑
  • PathArc : 由結束坐標,以及一個radiusX和radiusY半徑實現的一個圓弧(順時針繪畫)
  • PathAngleArc : 由中心點、半徑和起始角度startAngle、旋轉角度sweepAngle指定的圓弧。
  • PathCurve : 由一個坐標點生成的curve曲線路徑(通常需要配合多個PathCurve才行)
  • PathSvg : 由SVG路徑字符串實現的路徑。你可以用它創建線條, 曲線, 弧形等等

下表概述瞭各種路徑元素的適用性:

其中PathAttribute用來給路徑上定義帶有值的命名屬性。而PathPercent則用來對每個間距進行一個調整。

1.PathAttribute
PathAttribute對象用來給路徑上的不同點指定由name和value組成的自定義屬性。自定義屬性將會作為附加屬性公開給委托。
路徑上任何特定點上的屬性值都是通過下個PathAttributes插入的。然後兩個點之間的路徑會根據屬性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自定義屬性,這是因為開頭已經給(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用來設置每個路徑上的顯示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實戰

我們參考韋東山之前發佈的一個Qt開源視頻,如下圖所示:

最終做出來如下圖所示:

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

源碼已經上傳到群裡,由於我們借用瞭別人的UI圖,所以請不要將別人的UI圖片用在商業上,僅供學習參考使用！！！

核心代碼如下所示:

ListModel {
          id: mymodel

          ListElement {
              name: "多媒體"
              back: "qrc:/images/media_nor.png"
          }
          ListElement {
              name: "系統設置"
              back: "qrc:/images/system_nor.png"
          }
          ListElement {
              name: "智能傢電"
              back: "qrc:/images/machine_nor.png"
          }
          ListElement {
              name: "衛生醫療"
              back: "qrc:/images/medical_nor.png"
          }
          ListElement {
              name: "公共服務"
              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}  // 設置初始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}

        }
    }

未完待續 ~

以上就是教你如何使用qt quick-PathView實現好看的home界面的詳細內容，更多關於qt quick-PathView的資料請關註WalkonNet其它相關文章！

推薦閱讀：