Stackview Push and Pop destroys and creates a new page

Question

I have many pages and when a button is clicked I make transitions between these pages with a StackView, push and pop. And in these pages when corresponding buttons are clicked I make these buttons red. However, when I pop and re-opened the same page with a push, button is no longer red. So that makes me think that pop and push destroys and creates a new page which is the opposite what is written in docs:

This means that any item pushed onto a StackView will never be destroyed by the StackView; only items that StackView creates from Components or URLs are destroyed by the StackView.

Here is the code for stackview:

Window{
   id:main
   property bool isAbsOffRoad: false
   StackView{
      id:contentFrame
      initialItem:Qt.resolvedUrl("qrc:/MainPage.qml")
      Connections{
         target:contentFrame.currentItem
         onBackButtonPressed:{
            contentFrame.pop() }
         }}

And then here is how I push:

Item {
   id:backgroundItem
   LeftButtons{
      id:buttonSettings
      MultiPointTouchArea{
         onPressed{
            contentFrame.push("qrc:/SettingsPage.qml")}
}}

I cannot see a reason why the page doesn't preserves it's state when popped and pushed back. What might be the reason?

Another question is: I get a

QML Connections: Cannot assign to non-existent property "onBackButtonPressed".

However, back buttons work. Why I get that error?

JarMan JarMan · Accepted Answer · 2021-05-10T15:01:20

The documentation you quote gives you the answer.

This means that any item pushed onto a StackView will never be destroyed by the StackView; only items that StackView creates from Components ->or URLs<- are destroyed by the StackView.

If a StackView creates an item from a URL, it will have ownership of it, and therefore feel free to destroy it.

Your code shows this:

initialItem:Qt.resolvedUrl("qrc:/MainPage.qml")

So you're giving the StackView a URL to your QML. If you don't want it to do that, try doing something like this instead:

initialItem: MainPage {}

That way, the StackView will be given a fully constructed item, and it won't try to destroy it.

For your second question, I'm guessing that your MainPage.qml does not define that signal. You could create that signal in MainPage just to remove the warning, or you can try adding the ignoreUnknownSignals property to your Connections object.

UPDATE:

You can still use push and pop. You just have to provide a created instance of your item, not just the item type. You could try something like this, for example:

    component SomePage: Rectangle {
        signal clicked()
        MouseArea {
            anchors.fill: parent
            onClicked: parent.clicked()
        }
        
        Component.onCompleted: {
            console.log("Created: " + color);
        }
        Component.onDestruction: {
            console.log("Destroyed: " + color);
        }
    }

    SomePage {
        id: bluePage
        color: "blue"
        visible: false
        onClicked: contentFrame.push(redPage)
    }

    SomePage {
        id: redPage
        color: "red"
        visible: false
        onClicked: contentFrame.pop();
    }

    StackView {
        id: contentFrame
        anchors.fill: parent
        initialItem: bluePage
    }

Stackview Push and Pop destroys and creates a new page

1 Answers