20200604-01 PathView mouse drag 實現鼠標拖動 安卓設置時間效果，循環

前言

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 }

    }
}

要點說明：

1. path 屬性決定了顯示元素的移動位置和效果，這部分具體看官方幫助
2. 要支持鼠標按住拖動效果，顯示的文本是否在 PathView 範圍內
3. 按鍵切換查看幫助文檔　focus: true; Keys.onLeftPressed: decrementCurrentIndex(); Keys.onRightPressed: incrementCurrentIndex() 在 pathview 中添加類似這樣的效果就可以了
4. 定義在　PathAttribute 的屬性，在委託項直接可以使用
5. 如果要實現鼠標滑輪滾動的效果，可以參考國外論壇的解決方案

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;
	    }
	}
}