Page QML Type▲
-
Import Statement: import QtQuick.Controls 2.4
-
Since: Qt 5.7
-
Inherits: Control
-
Group: Page is part of qtquickcontrols2-containers, qtquickcontrols2-focusscopes
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.1
ApplicationWindow
{
visible
:
true
StackView
{
anchors.fill
:
parent
initialItem
:
Page {
header
:
ToolBar
{
// ...
}
}
}
footer
:
TabBar {
// ...
}
}
See Also▲
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.
Unlike contentData, contentChildren does not include non-visual QML objects.
See Also▲
See also Item::children, contentData
contentData : list<Object>▲
This property holds the list of content data.
The list contains all objects that have been declared in QML as children of the container.
Unlike contentChildren, contentData does include non-visual QML objects.
See Also▲
See also Item::data, contentChildren
[since QtQuick.Controls 2.1 (Qt 5.8)] contentHeight : real▲
This property holds the content height. It is used for calculating the total implicit height of the page.
This property was introduced in QtQuick.Controls 2.1 (Qt 5.8).
See Also▲
See also contentWidth
[since QtQuick.Controls 2.1 (Qt 5.8)] contentWidth : real▲
This property holds the content width. It is used for calculating the total implicit width of the page.
This property was introduced in QtQuick.Controls 2.1 (Qt 5.8).
See Also▲
See also contentHeight
footer : Item▲
Assigning a ToolBar, TabBar, or DialogButtonBox as a page footer automatically sets the respective ToolBar::position, TabBar::position, or DialogButtonBox::position property to Footer.
See Also▲
See also header, 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.
Assigning a ToolBar, TabBar, or DialogButtonBox as a page header automatically sets the respective ToolBar::position, TabBar::position, or DialogButtonBox::position property to Header.
See Also▲
See also footer, ApplicationWindow::header
title : string▲
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"
)
}
}
}