Back to Qt.io
Contact Us Blog Download Qt
このページでは

Qt Quick デモ - 時計

ListView 型を使用してListModel によって生成されたデータを表示し、SpringAnimation 型を使用して画像をアニメーション表示する方法を示すQML時計アプリケーションです。

オスロ、ムンバイ、東京の時刻を表示する3つのアナログ時計

「Clocks」では、`ListView ` タイプを使用して `ListModel` によって生成されたデータを表示する方法を示しています。モデルで使用されるデリゲートは、`Clock.qml` ファイルで定義されたカスタム QML タイプとして指定されています。

JavaScriptメソッドを使用して、異なるタイムゾーンにある複数の都市の現在時刻を取得し、QML型を使用して、アニメーション化された時計の針を備えた文字盤に時刻を表示します。

例の動作確認

このサンプルは、以下の手順で実行できます。

リストモデルによって生成されたデータの表示

Main.qmlファイルでは、Rectangle 型を使用してアプリケーションのメインウィンドウを作成します：

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

また、`ListModel ` 型から提供される項目のリストを表示するために、`ListView ` 型を使用します：

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

リスト要素は、プロパティの代わりに一連のロール定義を含む点を除き、他の QML タイプと同様に定義されます。ロールは、データへのアクセス方法を定義すると同時に、データそのものも包含します。

各リスト要素について、「cityName 」ロールを使用して都市名を指定し、「timeShift 」ロールを使用して、UTC（協定世界時）からの正または負のオフセットとしてタイムゾーンを指定します。

「Clock」カスタム型は、「ListView 」の「delegate 」として使用され、リスト項目の視覚的な外観を定義します。

Imageタイプを使用して、ユーザーがビューをフリックして左右にさらに多くの時計を表示できるかどうかを示す矢印を表示します。

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

リストビューがx軸の最初または最後に位置している場合は、opacity プロパティを使用して矢印を非表示にします。

Clock.qml では、timeChanged() 関数を定義し、その内部で JavaScript のDate オブジェクトのメソッドを使用して、UTC 形式の現在時刻を取得し、正しいタイムゾーンに合わせて調整しています：

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

Timer 型を使用して、100ミリ秒間隔で時刻を更新します：

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

Item タイプ内でImageタイプを使用し、アナログ時計の文字盤に時刻を表示します。昼間と夜間では異なる画像が使用されます：

    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 }

Image型に適用されたRotation 変換により、時計の針を回転させることができます。origin プロパティは、アイテムの他の部分が回転しても親に対して固定されたままの点を保持します。angle プロパティは、針を時計回りに回転させる角度（度単位）を決定します。

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

angle プロパティにBehavior タイプを使用することで、時刻が変更された際にSpringAnimation を適用します。spring およびdamping プロパティにより、時計の針にバネのような動きが与えられ、modulus を360 に設定することで、アニメーションのターゲット値が1周した時点で元の値に戻るようになります。

時計の下に都市名を表示するために、Text 型を使用します：

        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
        }

サンプルプロジェクト @ code.qt.io

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