32.qt quick-PathView實現好看的home介面

諾謙發表於2021-06-25
QTUIView

pathView的使用類似與ListView,都需要模型(model)和代理(delegate),只不過pathView多了一個路徑(path)屬性,顧名思義路徑就是item滑動的路徑.

 一個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}

        }
    }

未完待續 ~

 

相關文章