View QML Changes on Click

Question

I am working on a project with my team. My task is to create Gui with QML and C ++ for the embedded system.

I have for every view qml file.

But now I want to move between them. This means that when I click the "Button" button, the view should switch. Each view will have a back button, so I can return to the main view.

Is this possible in qml? If not, I have to solve it using C ++

Answer 1

You can create a class derived from QDeclarativeView in C ++ and use:

 void setSource ( const QUrl & url ) 

to change the displayed qml file. You can call this method several times when the button is pressed.

There is also a solution using only QML. Take a look at the Loader element:

  import QtQuick 1.0 Item { width: 200; height: 200 Loader { id: pageLoader } MouseArea { anchors.fill: parent onClicked: pageLoader.source = "Page1.qml" } } 

Answer 2

Another option is to have a basic qml in which you create these qml views and you change them using states.

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

The difference between these parameters and the one already presented is that it is constant, and the other one charges your QML each time (which means parsing and instantiating ...).

Answer 3

One more example

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