StackView Example

README.md

stackview_example.qml

import QtQuick 2.0
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.0


ApplicationWindow {
    title: "My StackView"

    width: 400
    height: 300

    /*!
        Start by tailoring your Component
        
        This could come from another file, in this case
        I'm simply using a Rectangle and some text.
    */
    Component {
        id: view

        Rectangle {

            property alias name: tex.text

            Text {
                id: tex
                anchors.centerIn: parent
            }
        }
    }

    ColumnLayout {
        anchors.fill: parent

        RowLayout {
            height: 30
            Layout.fillWidth: true

            Button {
                text: "Previous"

                /*! To "pop" means to discard the current Component */
                onClicked: stack.pop()
            }

            Button {
                text: "Next"

                /*! To "push" means to add the next Component */
                onClicked: stack.push({
                    item: view,
                    properties: {
                        "color": "steelblue",
                        "name": "An awesome name"
                    }
                })
            }
        }

        /*! Finally, don't forget to set an initial component */
        StackView {
            id: stack
            Layout.fillWidth: true
            Layout.fillHeight: true

            initialItem: Rectangle {
                color: "brown"
            }
        }
    }

}