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}
}
}
未完待續 ~