Stack view not working in the intended way



  • My stack view is not working in the intended way. According to documentation when we use pop(componentName2) stack should pop everything except componentName2 and show componentName2. But for my qml code it is just popping the present page only.

    Cannot figure out what is the problem. Please help
    'main.qml with stackview component

    import QtQuick 2.6
    import QtQuick.Window 2.2
    import QtQuick.Controls 1.4
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
        Rectangle{
         width: 300
         height:300
         anchors.centerIn: parent
        MouseArea {
            anchors.fill: parent
            onClicked: {
                console.log(qsTr('Clicked on background. Text: "' + textEdit.text + '"'))
            }
        }
        }
        StackView{
            id:stack
            initialItem:"qrc:/One.qml"
    //        Component{
    //            id:firstPage
    //            One{
    
    //            }
    //        }
    //        Component{
    //            id:second
    //            Two{
    
    //            }
    //        }
    //        Component{
    //            id:third
    //            Three{
    
    //            }
    //        }
        }
    
    
    }
    
    

    One.qml

    import QtQuick 2.0
    
    import QtQuick.Window 2.0
    
    Item {
        visible: true
        width: 640
        height: 480
        Rectangle{
         width: 300
         height:300
         anchors.centerIn: parent
         color:"red"
        MouseArea {
            anchors.fill: parent
            onClicked:stack.push("qrc:/Two.qml")
        }
        }
    
    }
    
    

    Two.qml

    import QtQuick 2.0
    import QtQuick.Window 2.0
    
    Item {
        visible: true
        width: 640
        height: 480
        Rectangle{
         width: 300
         height:300
         anchors.centerIn: parent
         color:"orange"
        MouseArea {
            anchors.fill: parent
            onClicked:stack.push("qrc:/Three.qml")
            onPressAndHold: stack.pop("qrc:/One.qml")
        }
        }
    
    }
    
    

    Three.qml

    import QtQuick 2.0
    
    import QtQuick.Window 2.0
    
    Item {
        visible: true
        width: 640
        height: 480
        Rectangle{
         width: 300
         height:300
         anchors.centerIn: parent
         color:"green"
        MouseArea {
            anchors.fill: parent
            onClicked:stack.pop("qrc:/One.qml")
        }
        }
    
    }
    
    

    When I click the Mouse area in Three.qml I intend to go back to One.qml but it is going back to Second.qml........ I require popping of the component..... Please help


  • Moderators

    You need to specify the component reference (id) of a component which is added to your StackView. Passing a whole QML file is meaningless to the StackView, because it does not know which component to pop.


  • Moderators

    Consider emitting some signal like finished() or something, from all your components, and then handling the push/ pop operations from your main.qml. Then you can properly pop depending on which signal is emitted.



  • @Harikrishnan-P Add console.log debuggin to each MouseArea's event handlers and see what they do and in which order.



  • @sierdzio I tried using component in stack view in main.qml. But still it is not working......



  • @sierdzio I tried your suggestions, still not getting. Is there anything I am doing wrong
    main.qml

    import QtQuick 2.6
    import QtQuick.Window 2.2
    import QtQuick.Controls 1.4
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
        Rectangle{
         width: 300
         height:300
         anchors.centerIn: parent
        MouseArea {
            anchors.fill: parent
            onClicked: {
                console.log(qsTr('Clicked on background. Text: "' + textEdit.text + '"'))
            }
        }
        }
        StackView{
            id:stack
            initialItem:firstPage
    
            Component{
                id:firstPage
                One{
                    onOneCompleted: stack.push(second)
                }
    
            }
            Component{
                id:second
                Two{
                    onTwoCompleted: stack.push(third)
                }
            }
            Component{
                id:third
                Three{
                    onThreeCompleted: stack.pop(firstPage)
                }
            }
        }
    
    
    }
    
    

    One.qml

    import QtQuick 2.0
    
    import QtQuick.Window 2.0
    
    Item {
        id:first
        visible: true
        width: 640
        height: 480
        signal oneCompleted()
        signal completed
        Rectangle{
         width: 300
         height:300
         anchors.centerIn: parent
         color:"red"
        MouseArea {
            anchors.fill: parent
            onClicked:{console.log("pushing second page"); first.oneCompleted()}
        }
        }
    
    }
    
    

    Two.qml

    import QtQuick 2.0
    import QtQuick.Window 2.0
    
    Item {
        id:itemTwo
        visible: true
        width: 640
        height: 480
        signal twoCompleted()
        Rectangle{
         width: 300
         height:300
         anchors.centerIn: parent
         color:"orange"
        MouseArea {
            anchors.fill: parent
            onClicked:{console.log("Pushing third page");itemTwo.twoCompleted()}
            onPressAndHold: stack.pop("qrc:/One.qml")
        }
        }
    
    }
    
    

    Three.qml

    import QtQuick 2.0
    
    import QtQuick.Window 2.0
    
    Item {
        id:itemThree
        visible: true
        width: 640
        height: 480
        signal threeCompleted()
        Rectangle{
         width: 300
         height:300
         anchors.centerIn: parent
         color:"green"
        MouseArea {
            anchors.fill: parent
            onClicked:itemThree.threeCompleted()
        }
        }
    
    }
    
    

    Still when I click the mouse area in Three.qml, it is just popping to Two.qml component.


  • Moderators

    Code looks ok, perhaps you have discovered a bug in Qt.

    As a workaround, you can pop twice in onThreeCompleted:

    onThreeCompleted: { stack.pop(); stack.pop() }
    


  • You can pop to the first page of a StackView by doing stack.pop(null).

    When popping using an id, you need the actual page, not the id of the Component. You could push multiple One.qml instances on the stack, it can't guess on which one you want to pop.

    You can get it inside the page and somehow pass it to the other pages

    • You could have a firstPage property in Two and Three and chain it it oneCompleted and twoCompleted, make First emit first.oneCompleted(first) for example.
    • You could also store it in main.qml by creating a new property (maybe in stack) and doing in First: stack.returnPage = first and then in Three: stack.pop(stack.returnPage)

    You could also do stack.pop(stack.get(0))
    Alternatively, you could find in the stack the page you want to go back to. I sometimes do it by assigning an objectName to my pages :

    var targetPage = stack.find(function(item, index) {
          return item.objectName === "my-first-page";
    });
    stack.pop(targetPage);
    


  • @Harikrishnan-P
    you could try the following:

    onOneCompleted: {
        stack.pop()
        stack.push(second)
    }
    

    that way you always remove the current page before you show the new one.



  • @GrecKo and @J-Hilk Thank you for answering. I finally solved using stack.get(index) command to find the elements pushed onto the stack. This helped me finding the right page to pop up.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.