c++ - QML 在 Click 上更改视图

Question

我正在和我的团队一起做一个项目。我的工作是为嵌入式系统创建一个带有 QML 和 C++ 的 Gui。

我为每个查看一个 qml 文件。

但现在我想在它们之间导航。这意味着当我单击按钮时，视图应该切换。每个视图都有一个后退按钮，所以我可以回到我的主视图。

这在qml中可能吗？如果不是我必须用 C++ 解决它

Answer 1

您可以创建一个派生自QDeclarativeViewC++ 的类并使用：

void setSource ( const QUrl & url )

更改当前显示的 qml 文件。当单击按钮时，您可以多次调用此方法。

---

还有一个仅使用 QML 的解决方案。看一下Loader元素：

 import QtQuick 1.0
 Item {
   width: 200; height: 200

   Loader { id: pageLoader }

   MouseArea {
     anchors.fill: parent
     onClicked: pageLoader.source = "Page1.qml"
   }
 }

Answer 2

另一种选择是拥有一个主 qml，您可以在其中实例化这些 qml 视图，并使用状态在它们之间进行更改。

Main {
  View1{id:viewid1}
  View2{id:viewid2}
  View3{id:viewid3}
  states: [
    State {
        name: ""
    },
    State {
        name: "view1"
        PropertyChanges {target: viewid1; state: "focused"}
    },
    State {
        name: "view2"
        PropertyChanges {target: viewid2; state: "focused"}
     ...
    }
  ]
}

这些选项与已经提出的选项之间的区别在于，这个选项是永久性的，而另一个选项每次都会向您的 QML 收费（这意味着解析和实例化......）。

Answer 3

再举一个例子

import QtQuick 2.1
import QtQuick.Controls 1.1
import QtQuick.Window 2.1

ApplicationWindow {
    title: qsTr("My super app")
    width: 640
    height: 480

    Button {
        id: settingsButton
        x: 370
        y: 0
        text: qsTr("Settings")
        /* just change `visible` property by click */
        onClicked: {
            statusView.visible     = false
            settingsView.visible   = true
        }
    }

    Button {
        id: statusButton
        x: 171
        y: 0
        text: "Status"
        /* toggle */
        onClicked: {
            statusView.visible     = true
            settingsView.visible   = false
        }
    }

    Item {
        /* use id for access */
        id: statusView
        x: 0
        y: 50
        width: 640
        height: 430
        /* visible: true */

        Text {
            anchors.centerIn: parent
            text: "status"
        }
    }

    Item {
        id: settingsView
        x: 0
        y: 50
        width: 640
        height: 430
        /* invisible */
        visible: false

        Text {
            anchors.centerIn: parent
            text: "settings"
        }
    }
}