Pane QML Type

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

• 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