Back to Qt.io
Contact Us Blog Download Qt
Auf dieser Seite

Qt Quick Demo – Uhren

Eine QML-Uhr-Anwendung, die die Verwendung eines „ ListView “-Typs zur Anzeige von Daten demonstriert, die von einem „ ListModel “-Typ generiert werden, sowie eines „ SpringAnimation “-Typs zur Animation von Bildern.

Drei analoge Uhren, die die Uhrzeit in Oslo, Mumbai und Tokio anzeigen

„Clocks“ demonstriert die Verwendung eines „ ListView “-Typs zur Anzeige von Daten, die von einem „ ListModel “ generiert werden. Der vom Modell verwendete Delegat wird als benutzerdefinierter QML-Typ angegeben, der in der Datei „Clock.qml“ definiert ist.

JavaScript-Methoden werden verwendet, um die aktuelle Uhrzeit in mehreren Städten in verschiedenen Zeitzonen abzurufen, und QML-Typen werden verwendet, um die Uhrzeit auf einem Zifferblatt mit animierten Uhrzeigern anzuzeigen.

Ausführen des Beispiels

Sie können das Beispiel wie folgt ausführen:

Anzeigen von Daten, die von Listenmodellen generiert wurden

In der Datei „Main.qml“ verwenden wir einen Typ vom Typ „ Rectangle “, um das Hauptfenster der Anwendung zu erstellen:

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

Wir verwenden den Typ „ ListView “, um eine Liste der Elemente anzuzeigen, die vom Typ „ ListModel “ bereitgestellt werden:

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

Listenelemente werden wie andere QML-Typen definiert, mit dem Unterschied, dass sie anstelle von Eigenschaften eine Sammlung von Rollendefinitionen enthalten. Rollen definieren sowohl den Zugriff auf die Daten als auch die Daten selbst.

Für jedes Listenelement verwenden wir die Rolle „ cityName “, um den Namen einer Stadt anzugeben, und die Rolle „ timeShift “, um eine Zeitzone als positiven oder negativen Versatz gegenüber der UTC (koordinierte Weltzeit) anzugeben.

Der benutzerdefinierte Typ „Clock“ wird als „ delegate “ der Rolle „ ListView “ verwendet und definiert das visuelle Erscheinungsbild der Listenelemente.

Wir verwenden einen Bildtyp, um Pfeile anzuzeigen, die angeben, ob Benutzer die Ansicht wischen können, um links oder rechts weitere Uhren anzuzeigen:

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

Wir verwenden die Eigenschaft „ opacity “, um die Pfeile auszublenden, wenn sich die Listenansicht am Anfang oder am Ende der x-Achse befindet.

In „Clock.qml“ definieren wir eine „ timeChanged() “-Funktion, in der wir Methoden des JavaScript-Objekts „ Date “ verwenden, um die aktuelle Uhrzeit in UTC abzurufen und sie an die richtige Zeitzone anzupassen:

    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();
    }

Wir verwenden einen Typ „ Timer “, um die Uhrzeit in Intervallen von 100 Millisekunden zu aktualisieren:

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

Innerhalb eines „ Item “-Typs verwenden wir „Image“-Typen, um die Uhrzeit auf einem analogen Zifferblatt anzuzeigen. Für Tages- und Nachtstunden werden unterschiedliche Bilder verwendet:

    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 }

Eine auf „Image“-Typen angewendete „ Rotation “-Transformation ermöglicht es, die Zeiger der Uhr zu drehen. Die Eigenschaft „ origin “ enthält den Punkt, der relativ zum übergeordneten Element fest bleibt, während sich der Rest des Elements dreht. Die Eigenschaft „ angle “ bestimmt den Drehwinkel der Zeiger in Grad im Uhrzeigersinn.

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

Wir verwenden einen „ Behavior “-Typ für die Eigenschaft „ angle “, um bei einer Zeitänderung eine „ SpringAnimation “ anzuwenden. Die Eigenschaften „ spring “ und „ damping “ ermöglichen die federartige Bewegung der Uhrzeiger, und ein „ modulus “ von „ 360 “ sorgt dafür, dass die Zielwerte der Animation nach einem vollständigen Kreis wieder von vorne beginnen.

Wir verwenden den Typ „ Text “, um den Namen der Stadt unterhalb der Uhr anzuzeigen:

        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
        }

Beispielprojekt @ code.qt.io

Siehe auch QML-Anwendungen.

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