SafeArea QML Type

Ermöglicht den Zugriff auf die Eigenschaften des sicheren Bereichs des Objekts oder Fensters. Mehr...

• Liste aller Mitglieder, einschließlich geerbter Mitglieder

Eigenschaften

• additionalMargins
  • additionalMargins.bottom : real
  • additionalMargins.left : real
  • additionalMargins.right : real
  • additionalMargins.top : real
• margins
  • margins.bottom : real
  • margins.left : real
  • margins.right : real
  • margins.top : real

Detaillierte Beschreibung

Der angehängte Typ SafeArea liefert Informationen über die Bereiche eines Elements oder Fensters, in denen die Gefahr besteht, dass der Inhalt von anderen UI-Elementen überlagert wird, z. B. von Systemtitelleisten oder Statusleisten.

Diese Informationen können verwendet werden, um die untergeordneten Elemente eines Elements innerhalb des sicheren Bereichs des Elements anzuordnen, während eine Hintergrundfarbe oder ein Effekt das gesamte Element umspannen kann.

Rectangle { id: parentItem gradient: Gradient.SunnyMorning anchors.fill: parent Rectangle { id: childItem gradient: Gradient.DustyGrass anchors { fill: parent topMargin: parent.SafeArea.margins.top leftMargin: parent.SafeArea.margins.left rightMargin: parent.SafeArea.margins.right bottomMargin: parent.SafeArea.margins.bottom } } }

Die SafeArea-Ränder sind relativ zu dem Element, dem sie zugeordnet sind. Wenn ein Vorgängerobjekt seine Unterobjekte innerhalb der Ränder des sicheren Bereichs angeordnet hat, weisen alle Nachfolgeobjekte, denen ein eigener SafeArea-Bereich zugeordnet ist, keine Ränder auf, es sei denn, es wurde additional margins hinzugefügt.

Zusätzliche Ränder

Manchmal umfasst das Layout eines Artikels untergeordnete Artikel, die sich gegenseitig überlappen, z. B. in einem Fenster mit einer halbtransparenten Kopfzeile, wobei der restliche Fensterinhalt unterhalb der Kopfzeile verläuft.

In diesem Fall kann der Artikel die Position und Größe der Kopfzeile über die Eigenschaft additionalMargins an die untergeordneten Artikel weitergeben.

Die zusätzlichen Ränder werden zu allen Rändern hinzugefügt, die das Element bereits von seiner übergeordneten Hierarchie übernommen hat (einschließlich Systemrändern wie Titelleisten oder Statusleisten), und die untergeordneten Elemente spiegeln die kombinierten Ränder entsprechend wider.

Rectangle { id: parentItem gradient: Gradient.SunnyMorning anchors.fill: parent Rectangle { id: headerItem width: parent.width height: 80 gradient: Gradient.WinterNeva z: 1 } Item { id: contentItem anchors.fill: parent z: 0 SafeArea.additionalMargins.top: headerItem.height - parent.SafeArea.margins.top Rectangle { id: childItem gradient: Gradient.DustyGrass anchors { fill: parent topMargin: parent.SafeArea.margins.top leftMargin: parent.SafeArea.margins.left rightMargin: parent.SafeArea.margins.right bottomMargin: parent.SafeArea.margins.bottom } } } }

Im obigen Beispiel ist die Kopfzeile am oberen Rand des Fensters positioniert, was zu einer Überschneidung mit den Rändern des sicheren Bereichs führen kann, die vom Fenster ausgehen. Um dies zu berücksichtigen, fügen wir nur für den Teil der Kopfzeile zusätzliche Ränder hinzu, der über die Ränder des sicheren Bereichs des Fensters hinausgeht.

Steuerelemente

Die Anwendung von Sicherheitsbereichsrändern auf ein Steuerelement ist einfach, da das Steuerelement bereits Eigenschaften zum Hinzufügen von Auffüllungen zum Inhaltselement des Steuerelements bietet.

Control {
    anchors.fill: parent

    background: Rectangle {
        gradient: Gradient.SunnyMorning
    }

    topPadding: SafeArea.margins.top
    leftPadding: SafeArea.margins.left
    rightPadding: SafeArea.margins.right
    bottomPadding: SafeArea.margins.bottom

    contentItem: Rectangle {
        gradient: Gradient.DustyGrass
    }
}

Eigenschaft Dokumentation