SafeArea QML Type (Uncreatable)

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

Remarque : il s'agit d'un type non créable. Il ne peut pas être instancié en QML.

• 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 associé SafeArea fournit des informations sur les zones d'un élément (Item) ou d'une fenêtre (Window) où le contenu risque d'être masqué par d'autres éléments de l'interface utilisateur, tels que les barres de titre ou les barres d'état du système.

Ces informations peuvent être utilisées pour positionner les éléments enfants d’un élément au sein de la zone de sécurité de ce dernier, tout en permettant à une couleur ou à un effet d’arrière-plan 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 SafeArea sont relatives à l’élément auquel elles sont associées. Si un élément ancêtre a positionné ses enfants à l’intérieur des marges de sa zone de sécurité, tout élément descendant doté de sa propre SafeArea indiquera des marges nulles, à moins que des propriétés « additional margins » n’aient été ajoutées.

Marges supplémentaires

Il arrive parfois que la mise en page d’un élément implique des éléments enfants qui se chevauchent, par exemple dans une fenêtre dotée d’un en-tête semi-transparent, où le reste du contenu de la fenêtre s’affiche sous l’en-tête.

Dans ce cas de figure, l’élément peut répercuter la position et la taille de l’en-tête sur ses éléments enfants via la propriété « additionalMargins ».

Ces marges supplémentaires s’ajouteront à toutes les marges que l’élément hérite déjà de sa hiérarchie parentale (y compris les marges système, telles que les barres de titre ou les barres 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 chevaucher les marges de la zone de sécurité existantes provenant de la fenêtre. Pour tenir compte de cela, nous n’ajoutons des marges supplémentaires que pour la partie de l’en-tête qui s’étend au-delà des marges de la zone de sécurité de la fenêtre.

Contrôles

L’application de marges de zone de sécurité à un contrôle est simple, car le contrôle dispose déjà de propriétés permettant d’ajouter un remplissage à 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 des propriétés

additionalMargins group

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

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

Les marges de zone de sécurité finales de l’élément correspondent à la somme des marges héritées (par exemple, des barres de titre ou de la barre d’état) et des marges supplémentaires appliquées à l’élément.

Voir également margins.

margins group

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

Voir également additionalMargins.