SafeArea QML Type

Permet d'accéder aux propriétés de la zone de sécurité de l'élément ou de la fenêtre. Plus d'informations...

• Liste de tous les membres, y compris les membres hérités

Propriétés

• 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

Description détaillée

Le type attaché SafeArea fournit des informations sur les zones d'un élément ou d'une fenêtre où le contenu risque d'être recouvert par d'autres éléments de l'interface utilisateur, tels que les barres de titre ou d'état du système.

Ces informations peuvent être utilisées pour disposer les enfants d'un élément dans la zone de sécurité de l'élément, tout en permettant à une couleur d'arrière-plan ou à un effet de s'étendre sur l'ensemble de l'élément.

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

Les marges de la zone de sécurité sont relatives à l'élément auquel elles s'attachent. Si un élément ancêtre a disposé ses enfants dans les marges de la zone de sécurité, tout élément descendant auquel est attachée sa propre zone de sécurité affichera des marges nulles, à moins que additional margins n'ait été ajouté.

Marges supplémentaires

Parfois, la disposition d'un élément implique des éléments enfants qui se chevauchent, par exemple dans une fenêtre avec un en-tête semi-transparent, où le reste du contenu de la fenêtre passe sous l'en-tête.

Dans ce cas, l'élément peut refléter la position et la taille de l'en-tête aux éléments enfants via la propriété additionalMargins.

Les marges supplémentaires seront ajoutées à toutes les marges que l'élément reprend déjà de sa hiérarchie parentale (y compris les marges du système, telles que les barres de titre ou d'état), et les éléments enfants refléteront les marges combinées en conséquence.

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

Dans l'exemple ci-dessus, l'élément d'en-tête est positionné en haut de la fenêtre, ce qui peut potentiellement empiéter sur les marges existantes de la zone de sécurité provenant de la fenêtre. Pour en tenir compte, nous n'ajoutons des marges supplémentaires que pour la partie de l'en-tête qui dépasse les marges de sécurité de la fenêtre.

Contrôles

L'application des marges de sécurité à un contrôle est simple, car le contrôle offre déjà des propriétés permettant d'ajouter du rembourrage à l'élément de contenu du contrôle.

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

Documentation sur les propriétés

additionalMargins group

Cette propriété contient les marges de sécurité supplémentaires pour l'élément.

Les marges de sécurité supplémentaires ne peuvent pas être négatives et seront automatiquement ramenées à 0.

Les marges de sécurité résultantes de l'élément sont la somme des marges héritées (par exemple de la barre de titre ou de la barre d'état) et des marges supplémentaires appliquées à l'élément.

Voir aussi margins.

margins group

Cette propriété contient les marges de la zone de sécurité, par rapport à l'élément joint.

Voir aussi additionalMargins.