来自Qt(main.cpp)的QML视图

时间:2015-09-23 16:24:12

标签: qt file view qml

我在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
        }
 }}

1 个答案:

答案 0 :(得分:1)

您可以使用StackView在多个“屏幕”之间导航。要使现有代码适应StackView,可能更容易将每个屏幕移动到自己的QML文件中。例如,将background项移至LoginScreen.qml

Rectangle {
    id: background

    // ...

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

在这里,我们使用view附加的StackView属性来访问视图,然后将第二个屏幕推到它上面。

然后,在main.qml

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

     StackView {
         initialItem: LoginScreen {}
     }
}