QML: Simple Multi page app

zeroalpha

Is this the best way to run a multi page app?

This example has 2 pages that the user can navigate between

main.qml which hosts the 2 pages

import QtQuick
import QtQuick.Controls

ApplicationWindow {
    id: mainWindow
    visible: true
    width: 640
    height: 480
    title: "Main Window"

    StackView {
        id: stack
        width: parent.width
        height: parent.height
        initialItem: Qt.resolvedUrl("page2.qml")
    }

    Component.onCompleted: {
        stack.replace("page2.qml")
    }

}

page2.qml

import QtQuick
import QtQuick.Controls

Item {
    width: 640
    height: 480

    Rectangle {
        anchors.fill: parent
        color: "red"
    }

    Button {
        id: clicky
        text: "Go to the Blue page"
        anchors.centerIn: parent
        onClicked: {
            stack.replace("page3.qml")
        }
    }

}

page3.qml

import QtQuick
import QtQuick.Controls

Item {
    width: 640
    height: 480

    Rectangle {
        anchors.fill: parent
        color: "blue"
    }

    Button {
        id: clicky2
        text: "Go back to the Red page"
        anchors.centerIn: parent
        onClicked: {
            stack.replace("page2.qml")
        }
    }

}