Rectangle QML Type

Dessine un rectangle rempli, avec une bordure facultative. En savoir plus…

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

Propriétés

• antialiasing : bool
• border
  • border.color : color
  • border.pixelAligned : bool
  • border.width : int
• bottomLeftRadius : real (since 6.7)
• bottomRightRadius : real (since 6.7)
• color : color
• gradient : var
• radius : real
• topLeftRadius : real (since 6.7)
• topRightRadius : real (since 6.7)

Description détaillée

Les éléments rectangulaires servent à remplir des zones avec une couleur unie ou des dégradés, et/ou à créer une bordure rectangulaire.

Apparence

Chaque élément « Rectangle » est coloré soit avec une couleur de remplissage unie, spécifiée à l’aide de la propriété « color », soit avec un dégradé, défini à l’aide d’un type de dégradé et configuré à l’aide de la propriété « gradient ». Si une couleur et un dégradé sont tous deux spécifiés, c’est le dégradé qui est utilisé.

Vous pouvez ajouter une bordure facultative à un rectangle, avec sa propre couleur et son épaisseur, en définissant les propriétés ` border.color ` et ` border.width `. Définissez la couleur sur « transparent » pour tracer une bordure sans couleur de remplissage.

Vous pouvez également créer des rectangles arrondis à l’aide de la propriété radius. Comme cela introduit des bords courbes aux coins d’un rectangle, il peut être judicieux de définir la propriété Item::antialiasing pour améliorer son apparence. Pour définir les rayons individuellement pour différents coins, vous pouvez utiliser les propriétés topLeftRadius, topRightRadius, bottomLeftRadius et bottomRightRadius.

Exemple d'utilisation

L'exemple suivant illustre les effets de certaines propriétés courantes sur un élément Rectangle, utilisé ici pour créer un carré :

import QtQuick

Rectangle {
    width: 100
    height: 100
    color: "red"
    border.color: "black"
    border.width: 5
    radius: 10
}

Performances

L'utilisation de la propriété ` Item::antialiasing ` améliore l'apparence d'un rectangle arrondi au détriment des performances de rendu. Il est recommandé de désactiver cette propriété pour les rectangles en mouvement et de ne l'activer que lorsqu'ils sont immobiles.

Voir également Image.

Documentation sur les propriétés

antialiasing : bool

Permet de déterminer si le rectangle doit utiliser l'anticrénelage ou non. L'anticrénelage fournit des informations sur l'impact de cette propriété sur les performances.

La valeur par défaut est « true » pour les rectangles dotés d'un rayon, et « false » dans le cas contraire.

border group

La largeur et la couleur utilisées pour tracer le contour du rectangle.

Une largeur de 1 crée une ligne fine. Pour ne pas afficher de ligne, utilisez une largeur de 0 ou une couleur transparente.

La bordure est affichée à l'intérieur des limites du rectangle.

Si la propriété « pixelAligned » est définie sur « true » (valeur par défaut), la largeur de la bordure affichée est arrondie à un nombre entier de pixels, après mise à l'échelle en fonction du rapport de pixels de l'appareil. Définir la propriété « pixelAligned » sur « false » autorise les largeurs de bordure fractionnaires, ce qui peut s'avérer utile lorsque la fonction « antialiasing » est activée.

bottomLeftRadius : real [since 6.7]

Cette propriété définit le rayon utilisé pour tracer le coin inférieur gauche.

Si `bottomLeftRadius` n'est pas défini, la valeur ` radius ` sera utilisée à la place. Si `bottomLeftRadius` est égal à zéro, le coin sera pointu.

Cette propriété a été introduite dans Qt 6.7.

Voir également radius, topLeftRadius, topRightRadius et bottomRightRadius.

bottomRightRadius : real [since 6.7]

Cette propriété définit le rayon utilisé pour dessiner le coin inférieur droit.

Si bottomRightRadius n'est pas défini, la valeur « radius » sera utilisée à la place. Si bottomRightRadius est égal à zéro, le coin sera pointu.

Cette propriété a été introduite dans Qt 6.7.

Voir également radius, topLeftRadius, topRightRadius et bottomLeftRadius.

color : color

Cette propriété définit la couleur utilisée pour remplir le rectangle.

La couleur par défaut est le blanc.

L'exemple suivant présente des rectangles dont les couleurs sont spécifiées à l'aide de la notation hexadécimale et de la notation par nom de couleur :

Rectangle {
    color: "#00B000"
    width: 80; height: 80
}

Rectangle {
    color: "steelblue"
    y: 100; width: 80; height: 80
}

Si un dégradé et une couleur sont tous deux spécifiés, c'est le dégradé qui sera utilisé.

Voir également gradient.

gradient : var

Le dégradé à utiliser pour remplir le rectangle.

Cette propriété permet de créer des dégradés simples, verticaux ou horizontaux. D’autres dégradés peuvent être obtenus en appliquant une rotation au rectangle.

Rectangle {
    width: 80; height: 80
    color: "lightsteelblue"
}

Rectangle {
    width: 80; height: 80
    gradient: Gradient {
        GradientStop { position: 0.0; color: "lightsteelblue" }
        GradientStop { position: 1.0; color: "blue" }
    }
}

Rectangle {
    width: 80; height: 80
    gradient: Gradient {
        orientation: Gradient.Horizontal
        GradientStop { position: 0.0; color: "lightsteelblue" }
        GradientStop { position: 1.0; color: "blue" }
    }
}

Rectangle {
    width: 80; height: 80
    rotation: 90
    gradient: Gradient {
        GradientStop { position: 0.0; color: "lightsteelblue" }
        GradientStop { position: 1.0; color: "blue" }
    }
}

Cette propriété accepte également les préréglages de dégradés disponibles sur QGradient::Preset. Notez toutefois que, le rectangle ne prenant en charge que les dégradés verticaux ou horizontaux simples, tout préréglage présentant un angle non pris en charge sera converti en la représentation la plus proche.

Rectangle {
    width: 80; height: 80
    gradient: Gradient.NightFade
}

Rectangle {
    width: 80; height: 80
    gradient: "SunnyMorning"
}

Si un dégradé et une couleur sont tous deux spécifiés, c’est le dégradé qui sera utilisé.

Voir également Gradient et color.

radius : real

Cette propriété définit le rayon des coins utilisé pour dessiner un rectangle arrondi.

Si la valeur de radius est différente de zéro, le rectangle sera affiché sous forme de rectangle arrondi ; dans le cas contraire, il sera affiché sous forme de rectangle normal. Il est également possible de définir individuellement les rayons des coins (voir ci-dessous). Ces valeurs prévaudront sur la valeur de radius. Si elles ne sont pas définies (en les définissant sur undefined), la valeur de radius sera utilisée à la place.

Voir également topLeftRadius, topRightRadius, bottomLeftRadius et bottomRightRadius.

topLeftRadius : real [since 6.7]

Cette propriété définit le rayon utilisé pour dessiner le coin supérieur gauche.

Si topLeftRadius n'est pas défini, la valeur « radius » sera utilisée à la place. Si topLeftRadius est égal à zéro, le coin sera pointu.

Cette propriété a été introduite dans Qt 6.7.

Voir également radius, topRightRadius, bottomLeftRadius et bottomRightRadius.

topRightRadius : real [since 6.7]

Cette propriété définit le rayon utilisé pour dessiner le coin supérieur droit.

Si topRightRadius n'est pas défini, la valeur « radius » sera utilisée à la place. Si topRightRadius est égal à zéro, le coin sera pointu.

Cette propriété a été introduite dans Qt 6.7.

Voir également radius, topLeftRadius, bottomLeftRadius et bottomRightRadius.