QML - Stackview - REPLACE transition

TMJJ001 · wrote on 3 May 2020, 16:21

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?)

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

I have two issues.

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.
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

gaess · wrote on 3 May 2020, 19:09

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.