当弹出navigationStack (或Stackview)时，QML Felgo传递参数到previuos页面

Question

我有一个QML (Felgo)应用程序，我想在弹出时将参数传递到navigationStack堆栈的前一页。当我在Page3.qml中调用pop()时，我想用从myVar传递的'1‘值填充Page2.qml (默认情况下是'0’)的“Page3”属性。示例代码如下所示。我试过那个密码，但不起作用。我做错了什么？谢谢大家。

main.qml

​

​

Page1.qml

​

​

Page2.qml

​

​

Page3.qml

​

​

Answer 1

我创建了以下代码片段，它具有以下特性：

1. Main.qml托管一个ListModel
2. Page1.qml能够在ListView中使用ListModel，因为它看到了，因为Page1.qml被推入了Main.qml的StackView中，并且继承了Main.qml中的所有内容。
3. Page2.qml除了为Page1.qml或Page3.qml提供导航之外，什么也不做
4. Page3.qml提供指向Page2.qml的导航，以及向Main.qml发送信号以更新ListModel
5. Page1.qml、Page2.qml和Page3.qml都发出用Main.qml处理的信号。
6. 提供SVG图形来修饰示例。

下面是代码片段：

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>

你可以在网上试试！