QML 튜토리얼 3 - 상태와 전환

이 장에서는 상태와 전환을 도입하여 이 예제를 좀 더 동적으로 만들겠습니다.

텍스트가 화면 하단으로 이동하고 회전하며 클릭 시 빨간색으로 바뀌기를 원합니다.

다음은 QML 코드입니다:

import QtQuick

Rectangle {
    id: page
    width: 320; height: 480
    color: "lightgray"

    Text {
        id: helloText
        text: "Hello world!"
        y: 30
        anchors.horizontalCenter: page.horizontalCenter
        font.pointSize: 24; font.bold: true

        MouseArea { id: mouseArea; anchors.fill: parent }

        states: State {
            name: "down"; when: mouseArea.pressed == true
            PropertyChanges {
                helloText {
                    y: 160
                    rotation: 180
                    color: "red"
                }
            }
        }

        transitions: Transition {
            from: ""; to: "down"; reversible: true
            ParallelAnimation {
                NumberAnimation { properties: "y,rotation"; duration: 500; easing.type: Easing.InOutQuad }
                ColorAnimation { duration: 500 }
            }
        }
    }

    Grid {
        id: colorPicker
        x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4
        rows: 2; columns: 3; spacing: 3

        Cell { cellColor: "red"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "green"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "blue"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "black"; onClicked: helloText.color = cellColor }
    }
}

워크스루

        states: State {
            name: "down"; when: mouseArea.pressed == true
            PropertyChanges {
                helloText {
                    y: 160
                    rotation: 180
                    color: "red"
                }
            }
        }

먼저 텍스트 유형에 대한 새로운 다운 상태를 만듭니다. 이 상태는 MouseArea 을 누르면 활성화되고 손을 떼면 비활성화됩니다.

다운 상태에는 암시적 기본 상태 (QML에서 처음에 정의된 항목)에서 변경된 일련의 프로퍼티가 포함됩니다. 구체적으로 텍스트의 y 속성을 160, 회전은 180, color 을 빨간색으로 설정했습니다.

        transitions: Transition {
            from: ""; to: "down"; reversible: true
            ParallelAnimation {
                NumberAnimation { properties: "y,rotation"; duration: 500; easing.type: Easing.InOutQuad }
                ColorAnimation { duration: 500 }
            }
        }

텍스트가 바로 하단에 표시되는 것이 아니라 부드럽게 이동하기를 원하기 때문에 두 상태 사이에 전환을 추가합니다.

from 와 to 는 전환이 실행될 상태를 정의합니다. 이 경우 기본 상태에서 아래 상태로 전환하고 싶습니다.

다운 상태에서 기본 상태로 다시 변경할 때 동일한 전환이 역으로 실행되기를 원하므로 reversible 을 true 으로 설정합니다. 이는 두 전환을 별도로 작성하는 것과 같습니다.

ParallelAnimation 유형은 두 가지 유형의 애니메이션(숫자 및 색상)이 동시에 시작되도록 합니다. 대신 SequentialAnimation 을 사용하여 차례로 실행할 수도 있습니다.

상태 및 전환에 대한 자세한 내용은 Qt Quick 상태 및 상태 및 전환 예시를 참조하세요.

QML 튜토리얼 2 - 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.