Qt Quick Demo - Relojes
Una aplicación de reloj QML que demuestra el uso de un tipo ListView para mostrar datos generados por un ListModel y un tipo SpringAnimation para animar imágenes.
Clocks demuestra el uso de un tipo ListView para mostrar datos generados por un ListModel. El delegado utilizado por el modelo se especifica como un tipo QML personalizado que se especifica en el archivo Clock.qml.
Se utilizan métodos JavaScript para obtener la hora actual en varias ciudades de diferentes zonas horarias y tipos QML para mostrar la hora en la esfera de un reloj con manecillas animadas.
Ejecución del ejemplo
Para ejecutar el ejemplo desde Qt Creatorabra el modo Welcome y seleccione el ejemplo de Examples. Para más información, consulte Qt Creator: Tutorial: Construir y ejecutar.
Visualización de los datos generados por los modelos de lista
En el archivo Main.qml, utilizamos un tipo Rectangle para crear la ventana principal de la aplicación:
Rectangle { id: root width: 640; height: 320 color: "#646464"
Utilizamos un tipo ListView para mostrar una lista de los elementos proporcionados por un tipo 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 } } }
Los elementos de lista se definen como otros tipos QML, salvo que contienen una colección de definiciones de roles en lugar de propiedades. Los roles definen cómo se accede a los datos e incluyen los propios datos.
Para cada elemento de lista, utilizamos el rol cityName para especificar el nombre de una ciudad y el rol timeShift para especificar una zona horaria como desplazamiento positivo o negativo de UTC (tiempo universal coordinado).
El tipo personalizado Reloj se utiliza como ListView's delegate, definiendo la apariencia visual de los elementos de la lista.
Utilizamos un tipo Image para mostrar flechas que indican si los usuarios pueden desplazar la vista para ver más relojes a la izquierda o a la derecha:
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 } } } }
Utilizamos la propiedad opacity para ocultar las flechas cuando la vista de lista se encuentra al principio o al final del eje x.
En Clock.qml, definimos una función timeChanged() en la que utilizamos métodos del objeto JavaScript Date para obtener la hora actual en UTC y ajustarla a la zona horaria correcta:
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(); }
Utilizamos un tipo Timer para actualizar la hora a intervalos de 100 milisegundos:
Timer { interval: 100; running: true; repeat: true; onTriggered: clock.timeChanged() }
Utilizamos tipos de imagen dentro de un tipo Item para mostrar la hora en la esfera de un reloj analógico. Se utilizan imágenes diferentes para las horas diurnas y nocturnas:
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 }
Una transformación Rotation aplicada a los tipos Image proporciona una forma de rotar las manecillas del reloj. La propiedad origin mantiene el punto que permanece fijo respecto al padre mientras el resto del elemento rota. La propiedad angle determina el ángulo para rotar las manecillas en grados en el sentido de las agujas del reloj.
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" }
Utilizamos un tipo Behavior en la propiedad angle para aplicar un SpringAnimation cuando cambia la hora. Las propiedades spring y damping permiten el movimiento de resorte de las manecillas del reloj, y una modulus de 360 hace que los valores objetivo de la animación se envuelvan en un círculo completo.
Utilizamos un tipo Text para mostrar el nombre de la ciudad debajo del reloj:
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 }
Ver también Aplicaciones 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.
