Pane QML Type | Qt Quick Controls 2 5.9

Qt 5.9 | Qt Quick Controls 2 | QML Types | Pane QML Type

Qt 5.9.2 Reference Documentation

# Pane QML Type

Provides a background matching with the application style and theme. More...

Import Statement: | import QtQuick.Controls 2.2
Since: | Qt 5.7
Inherits: | Control
Inherited By: | Frame and ToolBar

- List of all members, including inherited members

## Properties

- contentChildren : list<Item>
- contentData : list<Object>
- contentHeight : real
- contentWidth : real

## Detailed Description

Pane provides a background color that matches with the application style and theme. Pane does not provide a layout of its own, but requires you to position its contents, for instance by creating a RowLayout or a ColumnLayout.

Items declared as children of a Pane are automatically parented to the Pane's contentItem. Items created dynamically need to be explicitly parented to the contentItem.

## Content Sizing

If only a single item is used within a Pane, it will resize to fit the implicit size of its contained item. This makes it particularly suitable for use together with layouts.

      Pane {
          ColumnLayout {
              anchors.fill: parent
              CheckBox { text: qsTr("E-mail") }
              CheckBox { text: qsTr("Calendar") }
              CheckBox { text: qsTr("Contacts") }
          }
      }

Sometimes there might be two items within the pane:

      Pane {
          SwipeView {
              // ...
          }
          PageIndicator {
              anchors.horizontalCenter: parent.horizontalCenter
              anchors.bottom: parent.bottom
          }
      }

In this case, Pane cannot calculate a sensible implicit size. Since we're anchoring the PageIndicator over the SwipeView, we can simply set the content size to the view's implicit size:

      Pane {
          contentWidth: view.implicitWidth
          contentHeight: view.implicitHeight

          SwipeView {
              id: view
              // ...
          }
          PageIndicator {
              anchors.horizontalCenter: parent.horizontalCenter
              anchors.bottom: parent.bottom
          }
       }

See also Customizing Pane 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 pane.

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 pane.

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

See also Item::data and contentChildren.

contentHeight : real

This property holds the content height. It is used for calculating the total implicit height of the pane.

For more information, see Content Sizing.

See also contentWidth.

contentWidth : real

This property holds the content width. It is used for calculating the total implicit width of the pane.

For more information, see Content Sizing.

See also contentHeight.