Back to Qt.io
Contact Us Blog Download Qt
이 페이지에서

Qt Quick 데모 - 시계

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

오슬로, 뭄바이, 도쿄의 시간을 표시하는 아날로그 시계 세 개

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

자바스크립트 메서드를 사용하여 서로 다른 시간대에 속한 여러 도시의 현재 시간을 가져오고, QML 타입을 사용하여 시계 바늘이 움직이는 시계판에 시간을 표시합니다.

예제 실행

다음 위치에서 예제를 실행할 수 있습니다.

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

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

List 요소는 속성 대신 역할 정의 모음을 포함한다는 점을 제외하면 다른 QML 유형과 마찬가지로 정의됩니다. 역할은 데이터에 접근하는 방법을 정의할 뿐만 아니라 데이터 자체도 포함합니다.

각 목록 요소에 대해, ` cityName ` 역할을 사용하여 도시 이름을 지정하고, ` timeShift ` 역할을 사용하여 UTC(협정 세계시)를 기준으로 한 양수 또는 음수의 오프셋으로 시간대를 지정합니다.

' ListView'의 ' delegate'로는 'Clock' 사용자 정의 유형이 사용되며, 이는 목록 항목의 시각적 모양을 정의합니다.

사용자가 뷰를 휙 넘겨 왼쪽이나 오른쪽에서 더 많은 시계를 볼 수 있는지 여부를 나타내는 화살표를 표시하기 위해 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 속성은 시계 바늘이 스프링처럼 움직이도록 하며, 360 의 modulus 을 설정하면 애니메이션 대상 값이 한 바퀴를 돌고 다시 시작됩니다.

시계 아래에 도시 이름을 표시하기 위해 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.