Page QML Type
A control that makes it convenient to add a header and footer to a page. More...
| Import Statement: | import QtQuick.Controls 2.0 |
| Since: | Qt 5.7 |
| Inherits: |
Properties
- contentChildren : list<Item>
- contentData : list<Object>
- footer : Item
- header : Item
- title : string
Detailed Description
Page is a container control which makes it convenient to add a header and footer item to a page.

The following example snippet illustrates how to use a page-specific toolbar header and an application-wide tabbar footer.
import QtQuick.Controls 2.0 ApplicationWindow { visible: true StackView { anchors.fill: parent initialItem: Page { header: ToolBar { // ... } } } footer: TabBar { // ... } }
See also ApplicationWindow and Container Controls.
Property Documentation
contentChildren : list<Item> |
This property holds the list of content children.
The list contains all items that have been declared in QML as children of the page.
Note: Unlike contentData, contentChildren does not include non-visual QML objects.
See also Item::children and contentData.
This property holds the list of content data.
The list contains all objects that have been declared in QML as children of the container.
Note: Unlike contentChildren, contentData does include non-visual QML objects.
See also Item::data and contentChildren.
footer : Item |
This property holds the page footer item. The footer item is positioned to the bottom, and resized to the width of the page. The default value is null.
Note: Assigning a ToolBar or TabBar as a page footer sets the respective ToolBar::position or TabBar::position property automatically to Footer.
See also header and ApplicationWindow::footer.
header : Item |
This property holds the page header item. The header item is positioned to the top, and resized to the width of the page. The default value is null.
Note: Assigning a ToolBar or TabBar as a page header sets the respective ToolBar::position or TabBar::position property automatically to Header.
See also footer and ApplicationWindow::header.
This property holds the page title.
The title is often displayed at the top of a page to give the user context about the page they are viewing.
ApplicationWindow {
visible: true
width: 400
height: 400
header: Label {
text: view.currentItem.title
horizontalAlignment: Text.AlignHCenter
}
SwipeView {
id: view
anchors.fill: parent
Page {
title: qsTr("Home")
}
Page {
title: qsTr("Discover")
}
Page {
title: qsTr("Activity")
}
}
}