Rectangle QML Type

Peint un rectangle rempli avec une bordure optionnelle. Plus d'informations...

• 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 Rectangle sont utilisés pour remplir des zones avec une couleur unie ou des dégradés, et/ou pour fournir une bordure rectangulaire.

Apparence

Chaque élément Rectangle est peint à l'aide d'une couleur de remplissage unie, spécifiée à l'aide de la propriété color, ou d'un dégradé, défini à l'aide d'un type de dégradé et défini à l'aide de la propriété gradient. Si une couleur et un dégradé sont spécifiés, c'est le dégradé qui est utilisé.

Vous pouvez ajouter une bordure optionnelle à 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 peindre une bordure sans couleur de remplissage.

Vous pouvez également créer des rectangles arrondis en utilisant la propriété radius. Étant donné que cette méthode introduit des bords incurvés dans les coins d'un rectangle, il peut être utile de définir la propriété Item::antialiasing pour améliorer l'apparence du rectangle. Pour définir les rayons individuellement pour les différents coins, vous pouvez utiliser les propriétés topLeftRadius, topRightRadius, bottomLeftRadius et bottomRightRadius.

Exemple d'utilisation

L'exemple suivant montre les effets de certaines propriétés communes sur un élément Rectangle, qui dans ce cas est utilisé pour créer un carré :

import QtQuick

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

Performance

L'utilisation de la propriété Item::antialiasing améliore l'apparence d'un rectangle arrondi au détriment des performances de rendu. Vous devriez envisager 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

Utilisée pour décider si le rectangle doit utiliser l'anticrénelage ou non. L'anticrénelage fournit des informations sur les implications de cette propriété en termes de performances.

La valeur par défaut est true (vrai) pour les rectangles ayant un rayon, et false (faux) dans les autres cas.

border group

La largeur et la couleur utilisées pour dessiner la bordure du rectangle.

Une largeur de 1 crée une ligne fine. Pour qu'il n'y ait pas de ligne, utilisez une largeur de 0 ou une couleur transparente.

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

Si pixelAligned est true (valeur par défaut), la largeur de la bordure rendue est arrondie à un nombre entier de pixels, après mise à l'échelle du ratio de pixels du périphérique. La définition de pixelAligned à false permet des largeurs de bordures fractionnaires, ce qui peut être souhaitable lorsque antialiasing est activé.

bottomLeftRadius : real [since 6.7]

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

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

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

Voir aussi 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, radius sera utilisé à la place. Si bottomRightRadius est égal à zéro, le coin sera net.

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

Voir aussi 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 montre des rectangles dont les couleurs sont spécifiées à l'aide de la notation hexadécimale et de la notation des couleurs nommées :

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

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

Si un dégradé et une couleur sont spécifiés, le dégradé sera utilisé.

Voir également gradient.

gradient : var

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

Cette propriété permet de construire de simples dégradés verticaux ou horizontaux. D'autres dégradés peuvent être créés en ajoutant 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" }
    }
}

La propriété accepte également les préréglages de dégradé de QGradient::Preset. Notez toutefois que, Rectangle ne prenant en charge que les dégradés verticaux ou horizontaux simples, tout préréglage dont l'angle n'est pas pris en charge sera remplacé par 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 spécifiés, le dégradé sera utilisé.

Voir également Gradient et color.

radius : real

Cette propriété définit le rayon de l'angle utilisé pour dessiner un rectangle arrondi.

Si le rayon est différent de zéro, le rectangle sera peint comme un rectangle arrondi, sinon il sera peint comme un rectangle normal. Il est également possible de définir des rayons d'angle individuels (voir ci-dessous). Ces valeurs sont prioritaires sur le rayon. Si elles ne sont pas définies (en leur attribuant la valeur undefined), radius sera utilisé à 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, radius sera utilisé à la place. Si topLeftRadius est égal à zéro, le coin sera net.

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

Voir aussi 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, radius sera utilisé à la place. Si topRightRadius est égal à zéro, le coin sera net.

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

Voir aussi radius, topLeftRadius, bottomLeftRadius, et bottomRightRadius.