Navigation

Lets make a quick addition to ourSplashView:

Rectangle {    anchors.fill: parent    color: "#f4c842"    Text {        anchors.centerIn: parent        text: "Splash View"    }}

This just adds the name of the view to the screen, so when we start moving between views, we know which one we are looking at. With that done, copy the content of SplashView into all the other new views, updating the text in each to reflect the name of the view, for example, in DashboardView, the text could say “Dashboard View”.

The first piece of navigation we want to do is when the MasterView has finished loading and we’re ready for action, load the DashboardView. We achieve this using one of the QML component slots we’ve just seen—Component.onCompleted().

Add the following line to the rootWindowcomponent inMasterView:

Component.onCompleted: contentFrame.replace("qrc:/views/DashboardView.qml");

Now when you build and run, as soon as the MasterView has finished loading, it switches the child view toDashboardView...