Stack view not working in the intended way

Harikrishnan P

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

sierdzio

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.

sierdzio

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.

Eeli K

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

Harikrishnan P

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

Harikrishnan P

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

sierdzio

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() }

GrecKo

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

J.Hilk

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

Harikrishnan P

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