Glossaire des termes QML Positionneurs et mises en page

Types visuels

Le type Rectangle

Pour les éléments visuels les plus basiques, Qt Quick fournit un type « Rectangle » permettant de dessiner des rectangles. Ces rectangles peuvent être colorés avec une couleur unie ou un dégradé vertical. Le type « Rectangle » permet également de tracer des bordures autour du rectangle.

Pour dessiner des formes personnalisées autres que des rectangles, consultez le type ` Canvas ` ou affichez une image pré-rendu à l’aide du type ` Image `.

import QtQuick

Item {

    width: 320
    height: 480

    Rectangle {
        color: "#272822"
        width: 320
        height: 480
    }

    // This element displays a rectangle with a gradient and a border
    Rectangle {
        x: 160
        y: 20
        width: 100
        height: 100
        radius: 8 // This gives rounded corners to the Rectangle
        gradient: Gradient { // This sets a vertical gradient fill
            GradientStop { position: 0.0; color: "aqua" }
            GradientStop { position: 1.0; color: "teal" }
        }
        border { width: 3; color: "white" } // This sets a 3px wide black border to be drawn
    }

    // This rectangle is a plain color with no border
    Rectangle {
        x: 40
        y: 20
        width: 100
        height: 100
        color: "red"
    }
}

Carré et rectangle arrondi avec remplissage dégradé

Le type Image

Qt Quick fournit un type « Image » qui peut être utilisé pour afficher des images. Le type « Image » dispose d’une propriété « source » dont la valeur peut être une URL distante ou locale, ou l’URL d’un fichier image intégré dans un fichier de ressources compilé.

// This element displays an image. Because the source is online, it may take some time to fetch
Image {
    x: 40
    y: 20
    width: 61
    height: 73
    source: "http://codereview.qt-project.org/static/logo_qt.png"
}

Pour les images plus complexes, il existe d’autres types similaires à ` Image`. Le type ` BorderImage ` dessine une image avec mise à l’échelle par grille, ce qui convient aux images utilisées comme bordures. Le type ` AnimatedImage ` lit les images animées au format .gif et .mng. Les types ` AnimatedSprite ` et ` SpriteSequence ` lisent les animations composées de plusieurs images stockées côte à côte dans un format d’image non animé.

Pour l'affichage de fichiers vidéo et de données de caméra, consultez le Qt Multimedia module.

Propriétés visuelles partagées

Tous les éléments visuels fournis par Qt Quick reposent sur le type « Item », qui fournit un ensemble commun d’attributs pour les éléments visuels, notamment les attributs d’opacité et de transformation.

Opacité et visibilité

Les types d’objets QML fournis par Qt Quick prennent en charge nativement l’ opacity. L’opacité peut être animée pour permettre des transitions fluides vers ou depuis un état transparent. La visibilité peut également être gérée plus efficacement à l’aide de la propriété visible, mais au prix de l’impossibilité de l’animer.

import QtQuick

Item {

    width: 320
    height: 480

    Rectangle {
        color: "#272822"
        width: 320
        height: 480
    }

    Item {
        x: 20
        y: 270
        width: 200
        height: 200
        MouseArea {
            anchors.fill: parent
            onClicked: topRect.visible = !topRect.visible
        }
        Rectangle {
            x: 20
            y: 20
            width: 100
            height: 100
            color: "red"
        }
        Rectangle {
            id: topRect
            opacity: 0.5

            x: 100
            y: 100
            width: 100
            height: 100
            color: "blue"
        }
    }
}

Carrés rouges et bleus qui se chevauchent, illustrant le mélange d'opacité

Les

Qt Quick sont nativement prises en charge pour les transformations. Si vous souhaitez faire pivoter ou mettre à l'échelle votre contenu visuel, vous pouvez définir les propriétés Item::rotation ou Item::scale. Celles-ci peuvent également faire l'objet d'animations.

import QtQuick

Item {

    width: 320
    height: 480

    Rectangle {
        color: "#272822"
        width: 320
        height: 480
    }

    Rectangle {
        rotation: 45 // This rotates the Rectangle by 45 degrees
        x: 20
        y: 160
        width: 100
        height: 100
        color: "blue"
    }
    Rectangle {
        scale: 0.8 // This scales the Rectangle down to 80% size
        x: 160
        y: 160
        width: 100
        height: 100
        color: "green"
    }
}

Carré bleu tourné de 45 degrés et petit carré vert

Pour des transformations plus complexes, consultez la propriété ` Item::transform `.

Glossaire des termes QML Positionneurs et mises en page

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.