Qt クイックデモ - 時計

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

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アプリケーションも参照してください 。

©2024 The Qt Company Ltd. 本書に含まれる文書の著作権は、それぞれの所有者に帰属します。本書で提供されるドキュメントは、Free Software Foundation が発行したGNU Free Documentation License version 1.3に基づいてライセンスされています。 Qtおよびそれぞれのロゴは、フィンランドおよびその他の国におけるThe Qt Company Ltd.の商標です。その他すべての商標は、それぞれの所有者に帰属します。