Qt Quick デモ - 時計

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

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

JavaScriptのメソッドを使って、異なるタイムゾーンにあるいくつかの都市の現在時刻を取得し、QML型を使って、時計の針がアニメーションする時計の文字盤に時刻を表示しています。

例の実行

からサンプルを実行するには Qt Creatorからサンプルを実行するには、Welcome モードを開き、Examples からサンプルを選択します。詳しくは、Building and Running an Exampleをご覧ください。

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

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

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

また、ListView 型を使って、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 }
        }
    }

リスト要素は他の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 } }
    }
}

opacity プロパティを使って、リスト・ビューがx軸の先頭または末尾にあるときに矢印を非表示にしています。

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 は、アニメーションのターゲット値を一周させます。

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 Applicationsも参照してください 。

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