模仿ios的效果
点击item触发push 第二层界面通过动画从右边往左边弹出
然后在最左边向右滑动返回上一层
StackView {
id: stackView
anchors.fill: parent
initialItem: mainView
property real hideX: 0 - width * 0.3
pushEnter: Transition {
XAnimator {
from: width
to: 0
duration: 200
easing.type: Easing.OutCurve
}
}
pushExit: Transition {
XAnimator {
from: 0
to: stackView.hideX
duration: 200
easing.type: Easing.OutCurve
}
}
popEnter: Transition {
XAnimator {
from: stackViewMouseArea.prevItem === null ?
stackView.hideX : stackViewMouseArea.prevItem.x
to: 0
duration: 200
easing.type: Easing.OutCurve
}
}
popExit: Transition {
XAnimator {
from: currentItem.x
to: width
duration: 200
easing.type: Easing.OutCurve
}
}
}
MouseArea {
id: stackViewMouseArea
anchors.fill: parent
enabled: stackView.depth > 1
scrollGestureEnabled: false
// propagateComposedEvents: true
property bool pressValid: false
property bool moveValid: false
property real pressedX
property real currentX
property var prevItem: null
onPressed: {
if( mouseX < 10
&& mouseY > 60
&& stackView.depth > 1 )
{
pressValid = true;
pressedX = mouseX
currentX = stackView.currentItem.x
prevItem = stackView.get(0)
}
else {
mouse.accepted = false
}
}
onPositionChanged: {
if( pressValid && !moveValid ) {
if( mouseX - pressedX > 20 ) {
moveValid = true
}
}
if( moveValid ) {
prevItem.visible = true
var x = mouseX - pressedX + currentX
if( x > stackView.currentItem.width ) {
x = width
}
if( x < 0 ) {
x = 0
}
var p = stackView.currentItem.x / stackView.currentItem.width
stackView.currentItem.x = x
prevItem.x = stackView.hideX - (stackView.hideX * p)
}
}
onReleased: {
if( pressValid ) {
pressValid = false
if( moveValid ) {
moveValid = false
stackView.pop()
}
}
}
}