Glossaire des termes QML Positionneurs et mises en page

Types visuels

Le type Rectangle

Pour les visuels les plus simples, Qt Quick propose un type Rectangle pour dessiner des rectangles. Ces rectangles peuvent être colorés à l'aide d'une couleur ou d'un dégradé vertical. Le type Rectangle peut également dessiner des bordures sur le rectangle.

Pour dessiner des formes personnalisées autres que des rectangles, consultez le type Canvas ou affichez une image pré-rendue à 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"
    }
}

Le type Image

Qt Quick fournit un type Image qui peut être utilisé pour afficher des images. Le type Image possède une propriété source dont la valeur peut être une URL locale ou distante, ou l'URL d'un fichier image intégré dans un fichier ressource 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. BorderImage dessine une image avec une échelle de grille, adaptée aux images utilisées comme bordures. AnimatedImage joue des images .gif et .mng animées. AnimatedSprite et SpriteSequence jouent des animations composées de plusieurs images stockées de manière adjacente dans un format d'image non animé.

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

Propriétés visuelles partagées

Tous les éléments visuels fournis par Qt Quick sont basés sur le type d'élément, qui fournit un ensemble commun d'attributs pour les éléments visuels, y compris les attributs d'opacité et de transformation.

Opacité et visibilité

Les types d'objets QML fournis par Qt Quick ont un support intégré pour opacity. L'opacité peut être animée pour permettre des transitions en douceur vers ou depuis un état transparent. La visibilité peut également être gérée avec la propriété visible de manière plus efficace, 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"
        }
    }
}

Transformations

Qt Quick Les types d'images sont dotés d'un support intégré pour les transformations. Si vous souhaitez faire pivoter ou mettre à l'échelle votre contenu visuel, vous pouvez définir la propriété Item::rotation ou Item::scale. Celles-ci peuvent également être animées.

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

Pour des transformations plus complexes, voir 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.