PageStack QML Type

A stack of Page items that is used for inter-Page navigation. Pages on the stack can be popped, and new Pages can be pushed. The page on top of the stack is the visible one. More...

• List of all members, including inherited members

Properties

• currentPage : Item
• data : list<Object>
• depth : int

Methods

• clear()
• pop()
• push(, )

Detailed Description

PageStack should be used inside a MainView in order to automatically add a header and toolbar to control the stack. The PageStack will automatically set the header title to the title of the Page that is currently on top of the stack, and the tools of the toolbar to the tools of the Page on top of the stack. When more than one Pages are on the stack, the toolbar will automatically feature a back-button that pop the stack when triggered.

The anchors of the PageStack are set to fill its parent by default. To use left/right/top/bottom anchors, explicitly set anchors.fill of the PageStack to undefined:

import QtQuick 2.4
import Lomiri.Components 1.3

MainView {
    width: units.gu(40)
    height: units.gu(71)

    PageStack {
        id: mainStack
        anchors {
            fill: undefined // unset the default to make the other anchors work
            left: parent.left
            right: parent.right
            top: parent.top
            bottom: rect.top
        }
    }

    Rectangle {
        id: rect
        color: LomiriColors.red
        anchors {
            left: parent.left
            right: parent.right
            bottom: parent.bottom
        }
        height: units.gu(10)
    }

    Component.onCompleted: mainStack.push(Qt.resolvedUrl("MyPage.qml"))
}

Pages that are defined inside the PageStack must initially set their visibility to false to avoid the pages occluding the PageStack before they are pushed. When pushing a Page, its visibility is automatically updated.

Example:

import QtQuick 2.4
import Lomiri.Components 1.3
import Lomiri.Components.ListItems 1.3 as ListItem

MainView {
    width: units.gu(48)
    height: units.gu(60)

    PageStack {
        id: pageStack
        Component.onCompleted: push(page0)

        Page {
            id: page0
            title: i18n.tr("Root page")
            visible: false

            Column {
                anchors.fill: parent
                ListItem.Standard {
                    text: i18n.tr("Page one")
                    onClicked: pageStack.push(page1, {color: LomiriColors.orange})
                    progression: true
                }
                ListItem.Standard {
                    text: i18n.tr("External page")
                    onClicked: pageStack.push(Qt.resolvedUrl("MyCustomPage.qml"))
                    progression: true
                }
            }
        }

        Page {
            title: "Rectangle"
            id: page1
            visible: false
            property alias color: rectangle.color
            Rectangle {
                id: rectangle
                anchors {
                    fill: parent
                    margins: units.gu(5)
                }
            }
        }
    }
}

As shown in the example above, the push() function can take an Item, Component or URL as input.

Property Documentation

Method Documentation