QML change views on Click

Question

i'm working on a project with my team. My job is to create a Gui with QML and C++ for an Embedded System.

I have for each View a qml file.

But now i want to navigate between them. This mean when i'm clicking on a Button, the view should switch. Every View will have a back button, so i could go back to my Main View.

Is this possible in qml? If not i have to solve it with c++

Answer 1

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

void setSource ( const QUrl & url )

to change the qml file that is currently displayed. You can than call this method multiple times when a button is clicked.

---

There is also a solution using QML only. 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 main qml where you instantiate those qml views, and you change between 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 option and the one already presented is that this one is permanent, and the other charges your QML every time (which means parsing and instantiation...).

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