Qt Quick Demo - Uhren

Eine QML-Uhrenanwendung, die die Verwendung eines ListView -Typs zur Anzeige von Daten, die von einem ListModel erzeugt wurden, und eines SpringAnimation -Typs zur Animation von Bildern demonstriert.

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 spezifiziert wird.

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

Ausführen des Beispiels

Zum Ausführen des Beispiels von Qt Creatorzu starten, öffnen Sie den Modus Welcome und wählen Sie das Beispiel unter Examples aus. Weitere Informationen finden Sie unter Erstellen und Ausführen eines Beispiels.

Anzeigen von Daten, die von Listenmodellen erzeugt wurden

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

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

Wir verwenden einen ListView Typ, um eine Liste der Elemente anzuzeigen, die von einem ListModel Typ 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 eine Sammlung von Rollendefinitionen anstelle von Eigenschaften enthalten. Rollen definieren sowohl, wie auf die Daten zugegriffen wird, als auch, wie die Daten selbst aussehen.

Für jedes Listenelement verwenden wir die Rolle cityName, um den Namen einer Stadt anzugeben, und die Rolle timeShift, um eine Zeitzone als positive oder negative Abweichung von der UTC (koordinierte Weltzeit) anzugeben.

Der benutzerdefinierte Typ Clock wird als ListView's delegate verwendet und definiert das visuelle Erscheinungsbild der Listenelemente.

Wir verwenden einen Bildtyp, um Pfeile anzuzeigen, die angeben, ob der Benutzer die Ansicht verschieben kann, um mehr Uhren auf der linken oder rechten Seite zu sehen:

    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 Funktion timeChanged(), in der wir Methoden des JavaScript-Objekts Date verwenden, um die aktuelle Zeit 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 Timer Typ, um die Zeit in Intervallen von 100 Millisekunden zu aktualisieren:

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

Wir verwenden Bildtypen innerhalb eines Item Typs, um die Zeit auf einem analogen Ziffernblatt anzuzeigen. Für die Tages- und Nachtzeit 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 Rotation -Transformation, die auf Image-Typen angewendet wird, bietet eine Möglichkeit, die Uhrzeiger zu drehen. Die Eigenschaft origin legt den Punkt fest, der relativ zum übergeordneten Element fixiert bleibt, während sich der Rest des Elements dreht. Die Eigenschaft angle bestimmt den Winkel, in dem die Zeiger im Uhrzeigersinn gedreht werden.

        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 eine SpringAnimation anzuwenden, wenn sich die Uhrzeit ändert. Die Eigenschaften spring und damping ermöglichen die federähnliche Bewegung der Uhrzeiger, und ein modulus vom Typ 360 sorgt dafür, dass sich die Zielwerte der Animation in einem vollen Kreis drehen.

Wir verwenden einen Text -Typ, um den Namen der Stadt unter 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.

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