來自 Qt(main.cpp) 的 QML 視圖

Question

我在 QML 中更改視圖/文件時遇到問題。 在 qrc 文件中，我有 main.qml 和 second.qml。 在 main.cpp 中，我通過代碼啟動我的應用程序：

QQuickView view;
view.setSource(QUrl(("qrc:///main.qml")));
view.show();

main.qml 中的按鈕應該將視圖更改為 second.qml，但我不知道以何種方式執行此操作。 我閱讀了有關 qml 的內容，但在任何地方我都找到了示例。

main.qml：

Item {
id: screen; width: 320; height: 480;

signal exitApp()
signal qmlSignal(string addressIP, int portTCP)

Rectangle {
    id: background
    anchors.fill: parent; color: "#ffffff";
    anchors.rightMargin: 0
    anchors.bottomMargin: 0
    anchors.leftMargin: 0
    anchors.topMargin: 0

    Button {
        id: loginBtn
        text: qsTr("RUN")
        anchors.right: parent.right
        anchors.rightMargin: 100
        anchors.left: parent.left
        anchors.leftMargin: 100
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 170
        anchors.top: tcpRow.bottom
        anchors.topMargin: 10
        onClicked: qmlSignal(addressIPTextField.text, parseInt(portTCPTextField.text))
     }
 }
    Row {
        id: tcpRow
        x: 8
        width: 309
        height: 100
        anchors.top: ipRow.bottom
        anchors.topMargin: 10
        anchors.horizontalCenter: parent.horizontalCenter

        Label {
            id: portTCPLabel
            height: 20
            text: qsTr("Port TCP")
            anchors.left: parent.left
            anchors.leftMargin: 10
            anchors.right: portTCPTextField.left
            anchors.rightMargin: 10
            anchors.verticalCenter: parent.verticalCenter
        }
 }}

Answer 1

您可以使用StackView在多個“屏幕”之間導航。 要調整現有代碼以使用StackView ，將每個屏幕移動到其自己的 QML 文件中可能更容易。 例如，將background項目移動到LoginScreen.qml ：

Rectangle {
    id: background

    // ...

    Button {
        onClicked: {
            qmlSignal(addressIPTextField.text, parseInt(portTCPTextField.text));
            StackView.view.push("qrc:/second.qml");
        }
    }
}

在這里，我們使用StackView的附加view屬性來訪問視圖，然后將第二個屏幕推送到它上面。

然后，在main.qml ：

Window {
     width: // ...
     height: // ...

     StackView {
         initialItem: LoginScreen {}
     }
}