CODEWITHSUNDEEP
qtqmlqtquickcontrols2stackview
BikashRDas
BikashRDas

Reputation: 169

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.

Upvotes: 0

Views: 1215

Answers (1)

luffy
luffy

Reputation: 2388

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.

Upvotes: 0

Related Questions