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:

Control

Properties

  • contentChildren : list
  • contentData : list
  • 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.


    [default] 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.

    Note: Unlike contentChildren, contentData does include non-visual QML objects.

    See also Item::data and contentChildren.


    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.


    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")
              }
          }
      }