qtqmlqtquickcontrols2stackview

QML StackView : Changing replaceEnter/Exit animation dynamically


Is there anyway to change the replaceEnter/Exit Transition animation dynamically depending on the next QML file to be loaded in the stack view. Situation:

I have a Centre QML file having 4 buttons on the 4 sides of the screen. There are other 4 QML files namely Top, Bottm, Right and Left. On press of top button on the Centre QML the Top qml file should transitioned from top-to-bottom and replace the centre one. Similarly on press of left button on the centre QML the left QML should enter there display area from left to right and replace the centre one.

I tried using replaceEnter/Exit property. But not able to understand how to change it dynamically depending on the next QML to be displayed.


Solution

  • take a look at the doc for infos about customizing transitions for Stackview.

    If you need more than one transition you can define them separately and then assign them just before they are used. Here is an example:

    StackView {
        id: control
    
        pushEnter: topTransition
    
        Transition {
            id: topTransition
            XAnimator {
                from: (control.mirrored ? -1 : 1) * -control.width
                to: 0
                duration: 400
                easing.type: Easing.OutCubic
            }
        }
    
        Transition {
            id: bottomTransition
            XAnimator {
                from: 0
                to: (control.mirrored ? -1 : 1) * control.width
                duration: 400
                easing.type: Easing.OutCubic
            }
        }
    
        Button {
            text: "Push page from bottom"
            onClicked: {
                control.pushEnter = bottomTransition
                control.push(bottomPage)
            }
        }
    }
    

    You will have to explicitly set all push/pop/replace transitions you need before each button click.