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

QML - Stackview - REPLACE transition



  • Dear all,

    I'm quite new to QML. I'm trying to improve myself by building an HMI app.
    To display different qml files, I'm using Stackview. (Maybe there is a better solution?)

    d3d73ef1-c15e-4a03-a97d-b0c67e65ef66-image.png

    I have 4 buttons as you can see on above pictures. Every button displays another qml file.

    I have two issues.

    1. When Opening a different QML file, it swipes in to the display. I don't want it to swipe in, I just want it to pop up.
    2. I'm only able to open the qml files in a certain order.

    First, Although I have written the following code, the qml still swipes into the screen.

     workspace_stacked_view{
            initialItem: Qt.resolvedUrl("qrc:/pages/HomePage.qml")
    
            delegate:{
                StackViewDelegate:{
                    function transitionFinished(properties)
                    {
                        properties.exitItem.opacity = 1
                    }
                    replaceTransition: StackViewTransition:{
                        PropertyAnimation: {
                            target: replaceEnter
                            property: "opacity"
                            from: 0
                            to: 1
                        }
                        PropertyAnimation: {
                            target: replaceExit
                            property: "opacity"
                            from: 1
                            to: 0
                        }
                    }
                }
            }
        }
    

    When I run this, I get the error :

    ReferenceError: replaceEnter is not defined
    

    I have changed this also to:

    delegate:{
                StackViewDelegate:{
                    function transitionFinished(properties)
                    {
                        properties.exitItem.opacity = 1
                    }
                    replaceTransition: StackViewTransition:{
                        PropertyAnimation: {
                            target: EnterItem
                            property: "opacity"
                            from: 0
                            to: 1
                        }
                        PropertyAnimation: {
                            target: exitItem
                            property: "opacity"
                            from: 1
                            to: 0
                        }
                    }
                }
            }
        }
    
    

    But I stil get the same issue.

    ReferenceError: exitItem is not defined
    

    I have absolutely no Idea why I get this error

    Second, So from the information read of qt, I thought when the first qml stackview component is open and I call the third one, this will open when I call it with the replace parameter. It seams not, I'm only able to cal 1 --> 2 --> 3 --> 1 ...

    What am I doing wrong here?

    Below the .qml file.

    import QtQuick 2.4
    import QtQml 2.2
    import QtQuick.Controls 1.4
    import "qrc:/pages/"                // import qml file from different resource folder
    
    Main_screenForm {
    
        readonly property int currentPage:backendQml.page
        button2_pushed.visible:true
        button3_pushed.visible:false
        button4_pushed.visible:false
        button5_pushed.visible:false
    
        onCurrentPageChanged: {
            pagechanger(backendQml.page);
        }
    
        mouse {
            onClicked: console.info("pushed mouse")
        }
    
        function pagechanger(n)
        {
            if(n < 5)
            {
                switch(n){
                    case 1: button2_pushed.visible=true
                            button3_pushed.visible=false
                            button4_pushed.visible=false
                            button5_pushed.visible=false
                            workspace_stacked_view.replace(Qt.resolvedUrl("qrc:/pages/HomePage.qml"));break;
                    case 2: button2_pushed.visible=false
                            button3_pushed.visible=true
                            button4_pushed.visible=false
                            button5_pushed.visible=false
                            workspace_stacked_view.replace(Qt.resolvedUrl("qrc:/pages/SettingPage.qml"));break;
                    case 3: button2_pushed.visible=false
                            button3_pushed.visible=false
                            button4_pushed.visible=true
                            button5_pushed.visible=false
                            workspace_stacked_view.replace(Qt.resolvedUrl("qrc:/pages/DiagnosePage.qml"));break;
                    case 4: button2_pushed.visible=false
                            button3_pushed.visible=false
                            button4_pushed.visible=false
                            button5_pushed.visible=true;break;
                }
            }
        }
        pushbutton2{
            onClicked: {
                console.info("touch pushbutton2 clicked");
                pagechanger(1);
            }
        }
        pushbutton3{
            onClicked: {
                console.info("touch pushbutton3 clicked");
                pagechanger(2);
            }
        }
        pushbutton4{
            onClicked: {
                console.info("touch pushbutton4 clicked");
                pagechanger(3);
            }
        }
        pushbutton5{
            onClicked: {
                console.info("touch pushbutton5 clicked");
                pagechanger(4);
            }
        }
    
    
        workspace_stacked_view{
            initialItem: Qt.resolvedUrl("qrc:/pages/HomePage.qml")
    
            delegate:{
                StackViewDelegate:{
                    function transitionFinished(properties)
                    {
                        properties.exitItem.opacity = 1
                    }
                    replaceTransition: StackViewTransition:{
                        PropertyAnimation: {
                            target: replaceEnter
                            property: "opacity"
                            from: 0
                            to: 1
                        }
                        PropertyAnimation: {
                            target: replaceExit
                            property: "opacity"
                            from: 1
                            to: 0
                        }
                    }
                }
            }
        }
        Component{
            id:homepage
            HomePage{
            //anchors.fill:parent
            }
        }
        Component{
            id:settingpage
            SettingPage{
            //anchors.fill:parent
            }
        }
         Component{
            id:diagnosepage
            DiagnosePage{
            //anchors.fill:parent
          }
    
        }
    }
    

    I hope somebody is ale to point me in the wright direction.
    Thanks in advance,
    Kind regards,
    TMJJ



  • If you just want to display different qml components on the same area, have a look at the loader qml type. You can set the src for the loader component when hitting the button. For some types (like a dialog) you will have to also call visible = true or open() in the loaded item. You can access a src in the loader with loaderName.item.
    Check out the example in the documentation:
    https://doc.qt.io/qt-5/qml-qtquick-loader.html#details
    After setting the source like in the example, you can set properties in the loaded qml with pageloader.item.<PROPERTY NAME>. replace <PROPERTY NAME> with the name of the property in your qml file.