QML Felgo - Pass parameter to previuos page when popping navigationStack (or Stackview)

Question

I have a QML (Felgo) application and I would like to pass parameter to the previous page of the stack in navigationStack when popping. I would like to populate "myVar" property of Page2.qml (which is '0' by default) with the value '1' passed from Page3 when I call pop() in the Page3.qml. The example code is shown below. I tried that code but it doesn't work. What am I doing wrong? Thanks for all.

main.qml

Page1.qml

Page2.qml

Page3.qml

Answer 1

I created the following code snippet that has the following features:

1. Main.qml hosts a ListModel
2. Page1.qml is able to use the ListModel in a ListView since it sees because Page1.qml was pushed into Main.qml's StackView and has inherits access to everything in Main.qml
3. Page2.qml does nothing except provide navigation to either Page1.qml or Page3.qml
4. Page3.qml provides navigation back to Page2.qml as well as emitting a signal to Main.qml receives to update the ListModel
5. Page1.qml, Page2.qml and Page3.qml all emit signals which are handled in Main.qml
6. SVG graphics are supplied to polish the example

Here's the code snippet:

import QtQuick 2.15
import QtQuick.Controls 2.15

Page {
    StackView {
        id: stackView
        anchors.fill: parent
        initialItem: comp1
    }
    ListModel {
        id: listModel
    }
    Component {
        id: comp1
        Page1 {
            onGoForward: stackView.push(comp2)
        }
    }
    Component {
        id: comp2
        Page2 {
            onGoBack: stackView.pop()
            onGoForward: stackView.push(comp3)
        }
    }
    Component {
        id: comp3
        Page3 {
            onGoBack: stackView.pop()
            onNewNumber: number => listModel.append( { number } )
        }
    }
}

//Page1.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

Page {
    signal goForward()
    header: Frame {
        background: Rectangle { color: "#ccc" }
        RowLayout {
            width: parent.width
            AppIconButton {
                icon.source: "shapes-32.svg"
            }
            Text {
                Layout.fillWidth: true
                text: "Page1"
            }
        }
    }
    ListView {
        anchors.fill: parent
        model: listModel
        delegate: Frame {
            width: ListView.view.width
            Text { text: number }
        }
    }
    footer: Frame {
        background: Rectangle { color: "#ccc" }
        RowLayout {
            width: parent.width
            Button {
                text: qsTr("Go Forward")
                onClicked: goForward()
            }
        }
    }
}

//Page2.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

Page {
    signal goForward()
    signal goBack()
    header: Frame {
        background: Rectangle { color: "#ccc" }
        RowLayout {
            width: parent.width
            AppIconButton {
                icon.source: "chevron-left-32.svg"
                onClicked: goBack()
            }
            AppIconButton {
                icon.source: "shapes-32.svg"
            }
            Text {
                Layout.fillWidth: true
                text: "Page2"
            }
        }
    }
    footer: Frame {
        background: Rectangle { color: "#ccc" }
        RowLayout {
            width: parent.width
            Button {
                text: qsTr("Go Forward")
                onClicked: goForward()
            }
        }
    }
}

//Page3.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

Page {
    signal newNumber(var number)
    signal goBack()
    header: Frame {
        background: Rectangle { color: "#ccc" }
        RowLayout {
            width: parent.width
            AppIconButton {
                icon.source: "chevron-left-32.svg"
                onClicked: goBack()
            }
            AppIconButton {
                icon.source: "shapes-32.svg"
            }
            Text {
                Layout.fillWidth: true
                text: "Page3"
            }
        }
    }
    Text {
        id: resultText
        anchors.centerIn: parent
    }
    footer: Frame {
        background: Rectangle { color: "#ccc" }
        RowLayout {
            width: parent.width
            Button {
                text: qsTr("New Number")
                onClicked: {
                   let number = Math.random();
                   resultText.text = number;
                   newNumber(number);
                }
            }
        }
    }
}

//AppIconButton.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

Item {
    property alias icon: btn.icon
    Layout.preferredWidth: 32
    Layout.preferredHeight: 32
    clip: true
    signal clicked()
    Button {
        id: btn
        anchors.centerIn: parent
        background: Item { }
        icon.width: parent.width
        icon.height: parent.height
        onClicked: parent.clicked()
    }
}

//shapes-32.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M8.45 18.367l-.564.855A8.795 8.795 0 1 1 18.832 7h-1.143A7.795 7.795 0 1 0 8.45 18.367zM14 8v6.429l1 1.53V9h14v14h-9.399l.654 1H30V8zm8.982 22h-21l10.544-16zm-10.46-14.177L3.838 29h17.295z"/><path fill="none" d="M0 0h32v32H0z"/></svg>

//chevron-left-32.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M18.793 25l-9-9 9-9h1.414l-9 9 9 9z"/><path fill="none" d="M0 0h32v32H0z"/></svg>

You can Try it Online!