Question

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

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

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

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

Answer 1

您可以在C ++中创建一个派生自QDeclarativeView的类，并使用：

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"
        }
    }
}

QML更改Click上的视图

3 个答案: