20200604-01 PathView mouse drag 实现鼠标拖动安卓设置时间效果，循环

太过爱你忘了你带给我的痛 2023-02-15 03:36 12阅读 0赞

## 前言 ##

pathView 与 ListView 等具备类似的效果，不过区别是 pathview 可以根据 path 定义的路径进行循环的运行

![动画效果][20200604115141275.gif_pic_center]

## 代码 ##

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

[20200604115141275.gif_pic_center]: https://img-blog.csdnimg.cn/20200604115141275.gif#pic_center