SafeArea QML Type (Uncreatable)

Bietet Zugriff auf die Eigenschaften des sicheren Bereichs des Elements oder Fensters. Mehr...

Hinweis: Dies ist ein nicht erstellbarer Typ. Er kann in QML nicht instanziiert werden.

• 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

Ausführliche Beschreibung

Der Typ „SafeArea“ liefert Informationen zu den Bereichen eines Elements oder Fensters, in denen der Inhalt möglicherweise von anderen UI-Elementen, wie z. B. Systemtitelleisten oder Statusleisten, überdeckt wird.

Diese Informationen können genutzt werden, um untergeordnete Elemente eines Elements innerhalb des sicheren Bereichs des Elements anzuordnen, während gleichzeitig eine Hintergrundfarbe oder ein Hintergrundeffekt das gesamte Element einnehmen 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 beziehen sich auf das Element, an das sie angehängt sind. Wenn ein übergeordnetes Element seine untergeordneten Elemente innerhalb der „SafeArea“-Ränder angeordnet hat, meldet jedes untergeordnete Element mit einer eigenen angehängten „SafeArea“ Ränder von Null, es sei denn, es wurden „ additional margins “ hinzugefügt.

Zusätzliche Ränder

Manchmal umfasst das Layout eines Elements untergeordnete Elemente, die sich gegenseitig überlappen, beispielsweise in einem Fenster mit einer halbtransparenten Kopfzeile, bei der der restliche Fensterinhalt unterhalb der Kopfzeile fließt.

In diesem Szenario kann das Element die Position und Größe der Kopfzeile über die Eigenschaft „ additionalMargins “ an die untergeordneten Elemente weitergeben.

Die zusätzlichen Ränder werden zu den Rändern hinzugefügt, die das Element bereits aus seiner übergeordneten Hierarchie übernimmt (einschließlich Systemränder wie Titelleisten oder Statusleisten), und untergeordnete 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 das Kopfzeilenelement am oberen Rand des Fensters positioniert, was möglicherweise zu einer Überlappung mit bestehenden Rändern des sicheren Bereichs des Fensters führen kann. Um dies zu berücksichtigen, fügen wir nur zusätzliche Ränder für den Teil der Kopfzeile hinzu, der über die Ränder des sicheren Bereichs des Fensters hinausragt.

Steuerelemente

Das Anwenden von Rändern des sicheren Bereichs auf ein Steuerelement ist unkompliziert, da das Steuerelement bereits Eigenschaften bietet, um dem Inhaltselement des Steuerelements einen Innenabstand hinzuzufügen.

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

Eigenschaftsdokumentation

additionalMargins group

Diese Eigenschaft enthält die zusätzlichen Sicherheitsabstände für das Element.

Die zusätzlichen Ränder für den Sicherheitsbereich dürfen nicht negativ sein und werden automatisch auf 0 begrenzt.

Die resultierenden Sicherheitsabstände des Elements ergeben sich aus der Summe der geerbten Abstände (z. B. von Titelleisten oder der Statusleiste) und der auf das Element angewendeten zusätzlichen Abstände.

Siehe auch „ margins “.

margins group

Diese Eigenschaft enthält die Sicherheitsabstände relativ zum angehängten Element.

Siehe auch „ additionalMargins “.