前言
pathView 與 ListView 等具備類似的效果,不過區別是 pathview 可以根據 path 定義的路徑進行循環的運行
代碼
PathView {
property string displayUnit: ""
property int displayStartValue: 0
id: list
highlightRangeMode: ListView.StrictlyEnforceRange
highlightMoveDuration: 200
preferredHighlightBegin: 0.5 //高亮區域默認頂層,所以這裏也需要設置
preferredHighlightEnd: 0.5
pathItemCount: 4
model: 200
delegate: Column {
z: PathView.zOrder !== undefined ? PathView.zOrder : 0
opacity: PathView.itemAlpha !== undefined ? PathView.itemAlpha : 0
scale: PathView.itemScale !== undefined ? PathView.itemScale : 0
Text {
text: index + displayStartValue + displayUnit
font.pixelSize: 28
}
}
path:Path {
startX: list.width / 2;
startY: 10;
PathAttribute { name: "zOrder"; value: 0 }
PathAttribute { name: "itemAlpha"; value: 0.1 }
PathAttribute { name: "itemScale"; value: 0.6 }
PathLine {
relativeX: 0;
relativeY: 100;
}
PathAttribute { name: "zOrder"; value: 10 }
PathAttribute { name: "itemAlpha"; value: 0.8 }
PathAttribute { name: "itemScale"; value: 1.5 }
PathLine {
relativeX: 0;
relativeY: 100;
}
PathAttribute { name: "zOrder"; value: 0 }
PathAttribute { name: "itemAlpha"; value: 0.1 }
PathAttribute { name: "itemScale"; value: 0.6 }
}
}
要點說明:
- path 屬性決定了顯示元素的移動位置和效果,這部分具體看官方幫助
- 要支持鼠標按住拖動效果,顯示的文本是否在 PathView 範圍內
- 按鍵切換查看幫助文檔
focus: true; Keys.onLeftPressed: decrementCurrentIndex(); Keys.onRightPressed: incrementCurrentIndex()
在 pathview 中添加類似這樣的效果就可以了 - 定義在 PathAttribute 的屬性,在委託項直接可以使用
- 如果要實現鼠標滑輪滾動的效果,可以參考國外論壇的解決方案
PathView {
id: view
anchors.fill: parent
focus: true
model: monthModel
property int wheelIndex:- 1;
currentIndex: 0;
MouseArea {
anchors.fill: parent
preventStealing: true;
propagateComposedEvents: true
Timer {
id:wheelTimer
interval: 200;
running: false;
repeat: false
onTriggered: {
view.wheelIndex = -1;
}
}
onWheel: {
wheelTimer.start();
if (view.wheelIndex === -1) {
view.wheelIndex = view.currentIndex;
}
if (wheel.angleDelta.y > 0) {
view.wheelIndex++
if (view.wheelIndex > view.model.count) {
view.wheelIndex = 0;
}
view.currentIndex = view.wheelIndex;
} else {
view.wheelIndex--;
if (view.wheelIndex < 0) {
view.wheelIndex = view.model.count - 1;
}
view.currentIndex = view.wheelIndex;
}
}
}