Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

basic transition



  • Hi
    Being new to QML I would like some advice on transitions.
    My main window is defined as

    import QtQuick 2.10
    import appButton 1.0
    
    Item {
        width: Constants.width
        height: Constants.height
    
        Screen01 {
            id: homeScreen
        }
    
        Connections {
            target: homeScreen
    
            onAppActivated:{
                console.log("Activated " + appName)
                homeScreen.destroy(1000)
            }
        }
    }
    

    Screen01 is a 'home' screen' with a series of button like items.
    When one of these items is clicked I want to fade the buttons and then display the appropriate page for the button clicked.
    Currently after 1 second the 'homeScreen' is destroyed as expected; but without a fade. I believe that it is now destroyed - I would like to be able to return to this screen.

    Is this where I need OpacityAnimator?
    Or are there any other tips?

    Thanks



  • hi,

    @GrahamLa said in basic transition:

    Or are there any other tips?

    You can use StackView and add transitions

     Component{
    id:
     Page1 {
            id: homeScreen
        }
    }
    
    Button{
     onClicked:{stackview.push(homeScreen)}
    }
    
       StackView {
            id: stackview
    
            anchors{
                top:menuLayout.bottom
                left:parent.left
                right:parent.right
                bottom:parent.bottom
            }
    
            pushEnter: Transition {
                PropertyAnimation {
                    property: "opacity"
                    from: 0
                    to:1
                    duration: 1000
                }
            }
            pushExit: Transition {
                PropertyAnimation {
                    property: "opacity"
                    from: 1
                    to:0
                    duration: 1000
                }
            }
            popEnter: Transition {
                PropertyAnimation {
                    property: "opacity"
                    from: 0
                    to:1
                    duration: 1000
                }
            }
            popExit: Transition {
                PropertyAnimation {
                    property: "opacity"
                    from: 1
                    to:0
                    duration: 2000
                }
            }
        }
    


  • @LeLev
    Thanks
    I have tried this with code below but it does not work as expected

    • Initially I just want to view the 2 buttons ( the view shown)

    • Pressing either button should result in the corresponding view being displayed.
      I keep getting the error - QML StackView: push: nothing to push

    • When either button is pressed the button bar should disappear (there will be a back button on the 2 screens

    I would be grateful if you would take a look at my code and make suggestions as to how I can make it work

    Thanks

    Code - Stacks.qml

    import QtQuick 2.10
    import Stacks 1.0
    import QtQuick.Controls 2.3
    
    Item {
        width: Constants.width
        height: Constants.height
    
        StackView
        {
            id: stack
            anchors.fill: parent
        }
    
        Screen01
        {
            id: view1
        }
        Screen02
        {
            id: view2
        }
    
        Row
        {
            spacing: 10
            Button
            {
                text: "view 1"
                onClicked: stack.push(view1)
            }
            Button
            {
                text: "view 2"
                onClicked: stack.push(view2)
            }
        }
    
    }
    

    Screen01.ui.qml

    import QtQuick 2.10
    import Stacks 1.0
    
    
    Rectangle {
        width: Constants.width
        height: Constants.height
    
        color: "blue"
        Text {
            id: screen1
            text: qsTr("Screen 1")
            anchors.rightMargin: -48
            anchors.bottomMargin: 35
            anchors.leftMargin: 48
            anchors.topMargin: -35
            anchors.fill: parent
        }
    
    
    }
    

    Screen02.ui.qml

    /import QtQuick 2.10
    import Stacks 1.0
    
    Rectangle {
    
        width: Constants.width
        height: Constants.height
        color: "red"
        Text {
            id: text2
            text: qsTr("Screen 2")
             anchors.fill: parent
        }
    }
    
    


  • @GrahamLa Hi,
    In your Code - Stacks.qml you are creating Screen01 and Screen02 directly, wrap them into a Component to create/add them later to your StackView with push()

    Component{
    id:view1
      Screen1{
      }
    }
    ...
    stack.push(view1)
    

Log in to reply