Qt Quick 데모 - 시계

ListView 유형을 사용하여 ListModel 에서 생성된 데이터를 표시하고 SpringAnimation 유형을 사용하여 이미지에 애니메이션을 적용하는 것을 보여주는 QML 시계 애플리케이션입니다.

시계는 ListView 유형을 사용하여 ListModel 에서 생성된 데이터를 표시하는 것을 보여줍니다. 모델에서 사용하는 델리게이트는 Clock.qml 파일에 지정된 사용자 정의 QML 유형으로 지정됩니다.

JavaScript 메서드는 서로 다른 시간대의 여러 도시에서 현재 시간을 가져오는 데 사용되며, QML 유형은 애니메이션 시계 바늘이 있는 시계 페이스에 시간을 표시하는 데 사용됩니다.

예제 실행하기

에서 예제를 실행하려면 Qt Creator에서 Welcome 모드를 열고 Examples 에서 예제를 선택합니다. 자세한 내용은 예제 빌드 및 실행하기를 참조하세요.

목록 모델에서 생성된 데이터 표시

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(협정 세계시)에서 양수 또는 음수 오프셋으로 시간대를 지정하는 데 사용합니다.

시계 사용자 정의 유형은 목록 항목의 시각적 모양을 정의하는 ListView 의 delegate 로 사용됩니다.

이미지 유형을 사용하여 사용자가 보기를 밀어서 왼쪽 또는 오른쪽에 더 많은 시계를 볼 수 있는지 여부를 나타내는 화살표를 표시합니다:

    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에서는 JavaScript Date 객체의 메서드를 사용하여 현재 시간을 UTC로 가져오고 올바른 시간대로 조정하는 timeChanged() 함수를 정의합니다:

    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 유형 내의 이미지 유형을 사용하여 아날로그 시계 페이스에 시간을 표시합니다. 낮과 밤 시간대에는 서로 다른 이미지가 사용됩니다:

    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 }

이미지 유형에 적용된 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 애플리케이션도참조하세요 .

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