Back to Qt.io
Contact Us Blog Download Qt
Sur cette page

Qt Quick Démonstration - Horloges

Une application d'horloge QML qui montre comment utiliser un type « ListView » pour afficher des données générées par un type « ListModel » et un type « SpringAnimation » pour animer des images.

Trois horloges analogiques indiquant l'heure à Oslo, Mumbai et Tokyo

La démo « Horloges » montre comment utiliser un type « ListView » pour afficher les données générées par un « ListModel ». Le délégué utilisé par le modèle est défini comme un type QML personnalisé spécifié dans le fichier Clock.qml.

Des méthodes JavaScript sont utilisées pour récupérer l'heure actuelle dans plusieurs villes situées dans différents fuseaux horaires, et des types QML sont utilisés pour afficher l'heure sur un cadran d'horloge avec des aiguilles animées.

Exécution de l'exemple

Vous pouvez exécuter l'exemple à partir de :

Affichage des données générées par les modèles de liste

Dans le fichier Main.qml, nous utilisons un type Rectangle pour créer la fenêtre principale de l’application :

Rectangle {
    id: root
    width: 640; height: 320
    color: "#646464"

Nous utilisons un type « ListView » pour afficher une liste des éléments fournis par un type « ListModel » :

    ListView {
        id: clockview
        anchors.fill: parent
        orientation: ListView.Horizontal
        cacheBuffer: 2000
        snapMode: ListView.SnapOneItem
        highlightRangeMode: ListView.ApplyRange

        delegate: Clock {
            required city
            required shift
        }
        model: ListModel {
            ListElement { city: "New York"; shift: -4 }
            ListElement { city: "London"; shift: 0 }
            ListElement { city: "Oslo"; shift: 1 }
            ListElement { city: "Mumbai"; shift: 5.5 }
            ListElement { city: "Tokyo"; shift: 9 }
            ListElement { city: "Brisbane"; shift: 10 }
            ListElement { city: "Los Angeles"; shift: -8 }
        }
    }

Les éléments de liste sont définis comme les autres types QML, à l’exception qu’ils contiennent un ensemble de définitions de rôles au lieu de propriétés. Les rôles définissent à la fois la manière dont les données sont accessibles et incluent les données elles-mêmes.

Pour chaque élément de la liste, nous utilisons le rôle « cityName » pour spécifier le nom d’une ville et le rôle « timeShift » pour spécifier un fuseau horaire sous forme de décalage positif ou négatif par rapport à l’UTC (temps universel coordonné).

Le type personnalisé « Clock » est utilisé comme « delegate » du rôle « ListView », définissant l’apparence visuelle des éléments de la liste.

Nous utilisons un type « Image » pour afficher des flèches indiquant si les utilisateurs peuvent faire défiler la vue vers la gauche ou vers la droite pour voir davantage d’horloges :

    Image {
        anchors.left: parent.left
        anchors.bottom: parent.bottom
        anchors.margins: 10
        source: "images/arrow.png"
        rotation: -90
        opacity: clockview.atXBeginning ? 0 : 0.5
        Behavior on opacity { NumberAnimation { duration: 500 } }
    }

    Image {
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.margins: 10
        source: "images/arrow.png"
        rotation: 90
        opacity: clockview.atXEnd ? 0 : 0.5
        Behavior on opacity { NumberAnimation { duration: 500 } }
    }
}

Nous utilisons la propriété « opacity » pour masquer les flèches lorsque la vue de liste se trouve au début ou à la fin de l’axe x.

Dans Clock.qml, nous définissons une fonction ` timeChanged() ` dans laquelle nous utilisons des méthodes de l'objet JavaScript ` Date ` pour récupérer l'heure actuelle en UTC et l'ajuster au fuseau horaire correct :

    function timeChanged() {
        var date = new Date;
        hours = internationalTime ? date.getUTCHours() + Math.floor(clock.shift) : date.getHours()
        night = ( hours < 7 || hours > 19 )
        minutes = internationalTime ? date.getUTCMinutes() + ((clock.shift % 1) * 60) : date.getMinutes()
        seconds = date.getUTCSeconds();
    }

Nous utilisons un type « Timer » pour mettre à jour l’heure à des intervalles de 100 millisecondes :

    Timer {
        interval: 100; running: true; repeat: true;
        onTriggered: clock.timeChanged()
    }

Nous utilisons des types `Image` au sein d’un type ` Item ` pour afficher l’heure sur le cadran d’une horloge analogique. Des images différentes sont utilisées pour les heures de jour et de nuit :

    Item {
        anchors.centerIn: parent
        width: 200; height: 240

        Image { id: background; source: "images/clock.png"; visible: clock.night == false }
        Image { source: "images/clock-night.png"; visible: clock.night == true }

Une transformation de type « Rotation » appliquée à des types « Image » permet de faire pivoter les aiguilles de l’horloge. La propriété « origin » contient le point qui reste fixe par rapport au parent tandis que le reste de l’élément pivote. La propriété « angle » détermine l’angle de rotation des aiguilles en degrés dans le sens des aiguilles d’une montre.

        Image {
            x: 92.5; y: 27
            source: "images/hour.png"
            transform: Rotation {
                id: hourRotation
                origin.x: 7.5; origin.y: 73;
                angle: (clock.hours * 30) + (clock.minutes * 0.5)
                Behavior on angle {
                    SpringAnimation { spring: 2; damping: 0.2; modulus: 360 }
                }
            }
        }

        Image {
            x: 93.5; y: 17
            source: "images/minute.png"
            transform: Rotation {
                id: minuteRotation
                origin.x: 6.5; origin.y: 83;
                angle: clock.minutes * 6
                Behavior on angle {
                    SpringAnimation { spring: 2; damping: 0.2; modulus: 360 }
                }
            }
        }

        Image {
            x: 97.5; y: 20
            source: "images/second.png"
            transform: Rotation {
                id: secondRotation
                origin.x: 2.5; origin.y: 80;
                angle: clock.seconds * 6
                Behavior on angle {
                    SpringAnimation { spring: 2; damping: 0.2; modulus: 360 }
                }
            }
        }

        Image {
            anchors.centerIn: background; source: "images/center.png"
        }

Nous utilisons un type « Behavior » sur la propriété « angle » pour appliquer une rotation « SpringAnimation » lorsque l’heure change. Les propriétés « spring » et « damping » permettent le mouvement élastique des aiguilles de l’horloge, et une « modulus » de « 360 » fait en sorte que les valeurs cibles de l’animation effectuent une boucle complète.

Nous utilisons un type Text pour afficher le nom de la ville sous l’horloge :

        Text {
            id: cityLabel
            y: 210; anchors.horizontalCenter: parent.horizontalCenter
            color: "white"
            font.family: "Helvetica"
            font.bold: true; font.pixelSize: 16
            style: Text.Raised; styleColor: "black"
            text: clock.city
        }

Exemple de projet sur code.qt.io

Voir également Applications QML.

© 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.