Qt Quick Démo - Horloges
Une application d'horloge QML qui démontre l'utilisation d'un type ListView pour afficher des données générées par un ListModel et d'un type SpringAnimation pour animer des images.
Clocks démontre l'utilisation d'un type ListView pour afficher des données générées par un type ListModel. Le délégué utilisé par le modèle est spécifié comme un type QML personnalisé qui est spécifié dans le fichier Clock.qml.
Des méthodes JavaScript sont utilisées pour obtenir 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
Pour exécuter l'exemple à partir de Qt Creatorouvrez le mode Welcome et sélectionnez l'exemple à partir de Examples. Pour plus d'informations, voir Qt Creator: Tutoriel : Construire et exécuter.
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 d'é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, sauf qu'ils contiennent une collection de définitions de rôles au lieu de propriétés. Les rôles définissent les modalités d'accès aux données et incluent les données elles-mêmes.
Pour chaque élément de 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 la forme d'un décalage positif ou négatif par rapport à l'UTC (temps universel coordonné).
Le type personnalisé Clock est utilisé comme ListView's delegate, définissant l'aspect visuel des éléments de la liste.
Nous utilisons un type Image pour afficher des flèches qui indiquent si les utilisateurs peuvent faire basculer la vue pour voir plus d'horloges à gauche ou à droite :
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 liste est située au début ou à la fin de l'axe des x.
Dans Clock.qml, nous définissons une fonction timeChanged() dans laquelle nous utilisons les méthodes de l'objet JavaScript Date pour récupérer l'heure actuelle en UTC et l'ajuster au bon fuseau horaire :
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 d'images à l'intérieur d'un type Item pour afficher l'heure sur un cadran d'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 Rotation appliquée aux types Image permet de faire pivoter les aiguilles de l'horloge. La propriété origin définit le point qui reste fixe par rapport au parent lorsque 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 un type SpringAnimation lorsque l'heure change. Les propriétés spring et damping permettent aux aiguilles de l'horloge de bouger comme un ressort, et une propriété modulus ou 360 permet aux valeurs cibles de l'animation d'effectuer un tour complet.
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 }
Voir aussi 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.
