StackView

Our child views will be presented via a StackView component, which provides a stack-based navigation model with built-in history. New views (and views in this context means pretty much any QML) are pushed onto the stack when they are to be displayed and can be popped off the stack in order to go back to the previous view. We won’t need to use the history capabilities, but they are a very useful feature.

To gain access to the component, we first need to reference the module, so add the import to MasterView:

import QtQuick.Controls 2.2

With that done, let’s replace our Text element containing our welcome message with a StackView:

StackView {
    id: contentFrame
    initialItem: "qrc:/views/SplashView.qml"
}

We assign the component a unique identifier contentFrame so that we can reference it elsewhere in the QML, and we specify which child view we want to load by default—the new SplashView.

Next, edit SplashView. Update the QtQuick module version to 2.9 so that it matches MasterView (do this for all further QML files if not explicitly stated). This is not strictly necessary, but it's a good practice to avoid inconsistencies across views. There is generally not much in the way of breaking changes in minor releases of Qt, but the same code on two views referencing different versions of QtQuick may exhibit different behavior that can cause problems.

All we’ll do with this view, for now, is to make a rectangle 400 pixels wide by 200 pixels high, which has a “vibrant” background color so that we can see that it has loaded:

import QtQuick 2.9

Rectangle {
 width: 400
 height: 200
 color: "#f4c842"
}

Colors can be specified using hexadecimal RGB values as we did here, or named SVG colors. I generally find hex easier as I can never remember the names of the colors!

Now run the application, and you should see that the welcome message no longer displays and instead, you are presented with a glorious orange-yellow rectangle, which is our SplashView.