Qt Quick 상태

관련 유형

많은 사용자 인터페이스 설계는 상태 기반이며, 인터페이스는 현재 상태에 따라 다른 구성을 가집니다. 예를 들어, 교통 신호등은 상태에 따라 깃발이나 조명의 구성을 변경합니다. 신호등의 ' stop ' 상태에서는 빨간불이 켜지고 노란불과 초록불은 꺼집니다. ‘ caution ’ 상태에서는 노란 불이 켜지고 다른 불들은 꺼집니다.

‘ State ’ 상태에서는 빨간 불이 켜지고, 노란 불과 초록 불은 꺼집니다. QML에서 상태는 ‘ ’ 유형에 정의된 속성 구성의 집합입니다. 서로 다른 구성은 예를 들어 다음과 같을 수 있습니다:

• 일부 UI 구성 요소를 표시하고 다른 구성 요소는 숨기기
• 사용자에게 다양한 사용 가능한 동작을 제시
• 애니메이션 시작, 중지 또는 일시 정지
• 새로운 상태에서 필요한 스크립트를 실행
• 특정 항목의 속성 값을 변경
• 다른 뷰나 화면을 표시합니다

모든 ` Item` 기반 객체에는 ` state ` 속성이 있으며, 항목의 ` states ` 속성에 새로운 ` State ` 객체를 추가하여 추가 상태를 지정할 수 있습니다. 컴포넌트 내의 각 상태에는 고유한 ` name`가 있으며, 기본값은 빈 문자열입니다. 항목의 현재 상태를 변경하려면 ` state ` 속성을 해당 상태의 이름으로 설정하십시오.

항목이 아닌 객체는 StateGroup 타입을 통해 상태를 사용할 수 있습니다.

상태 생성

상태를 생성하려면, 해당 항목의 상태 목록을 보관하는 states 속성에 State 객체를 추가하십시오.

signal 컴포넌트에는 NORMAL 상태와 CRITICAL 상태, 두 가지 상태가 있을 수 있습니다. NORMAL 상태에서 신호의 color 값이 green 이어야 하고, 경고 flag 가 꺼져 있다고 가정해 봅시다. 한편, CRITICAL 상태에서는 color 값이 red 이어야 하고, 깃발은 up 상태여야 합니다. State 타입을 사용하여 상태를 모델링하고, PropertyChanges 타입을 사용하여 색상 및 깃발 구성을 모델링할 수 있습니다.

Rectangle {
    id: signal
    width: 200; height: 200
    state: "NORMAL"

    states: [
        State {
            name: "NORMAL"
            PropertyChanges { signal.color: "green"}
            PropertyChanges { flag.state: "FLAG_DOWN"}
        },
        State {
            name: "CRITICAL"
            PropertyChanges { signal.color: "red"}
            PropertyChanges { flag.state: "FLAG_UP"}
        }
    ]
}

PropertyChanges 유형은 객체 속성의 값을 변경합니다. 객체는 ID를 통해 참조됩니다. 컴포넌트 외부의 객체도 id 속성을 사용하여 참조되며, 이는 외부 flag 객체에 대한 속성 변경 예시에서 확인할 수 있습니다.

또한, ` state ` 속성에 적절한 신호 상태를 할당함으로써 상태가 변경될 수 있습니다. 예를 들어, ` MouseArea ` 유형 내에서 신호가 마우스 클릭을 수신할 때마다 다른 상태를 할당하여 상태를 전환할 수 있습니다.

Rectangle {
    id: signalswitch
    width: 75; height: 75
    color: "blue"

    MouseArea {
        anchors.fill: parent
        onClicked: {
            if (signal.state == "NORMAL")
                signal.state = "CRITICAL"
            else
                signal.state = "NORMAL"
        }
    }
}

State 타입은 속성 값을 수정하는 데만 국한되지 않습니다. 또한 다음과 같은 작업도 수행할 수 있습니다:

• 다음과 같이 스크립트를 실행할 수 있습니다. StateChangeScript
• 다음과 같이 객체의 기존 신호 핸들러를 재정의 PropertyChanges
• Item 의 부모 객체를 변경하거나 ParentChange
• 다음과 같이 앵커 값 수정하기 AnchorChanges

기본 상태

모든 Item 기반 컴포넌트에는 ` state ` 속성과 기본 상태가 있습니다. 기본 상태는 빈 문자열("")이며, 항목의 모든 초기 속성 값을 포함합니다. 기본 상태는 상태가 변경되기 전 속성 값을 관리하는 데 유용합니다. ` state ` 속성을 빈 문자열로 설정하면 기본 상태가 로드됩니다.

when 속성

편의상, ` State ` 유형에는 ` when ` 속성이 있으며, 이 속성은 표현식과 바인딩되어 바인딩된 표현식의 평가 결과가 ` true`일 때마다 상태를 변경할 수 있습니다. 표현식의 평가 결과가 `false`일 경우, ` when ` 속성은 상태를 기본 상태로 되돌립니다.

Rectangle {
    id: bell
    width: 75; height: 75
    color: "yellow"

    states: State {
                name: "RINGING"
                when: (signal.state == "CRITICAL")
                PropertyChanges {speaker.play: "RING!"}
            }
}

bell 컴포넌트는 signal.state 가 CRITICAL 일 때마다 RINGING 상태로 변경됩니다.

상태 변경 애니메이션

상태 변경은 갑작스러운 값 변화를 유발합니다. ` Transition ` 유형을 사용하면 상태 변경 시 더 부드러운 변화를 구현할 수 있습니다. 전환 과정에서 애니메이션 및 보간 동작을 정의할 수 있습니다. 상태 애니메이션 생성에 대한 자세한 내용은 ‘애니메이션 및 전환’ 문서를 참조하십시오.

'애니메이션' 예제는 기본적인 상태 집합을 선언하고, 상태 간에 애니메이션 전환을 적용하는 방법을 보여줍니다.

'상태와 함께 Qt Quick 동작 사용하기'에서는 동작(Behaviors)을 사용하여 상태 변화를 애니메이션 처리할 때 발생하는 일반적인 문제를 설명합니다.

상태 빨리 감기

Transition이 상태 변경을 올바르게 애니메이션화하기 위해서는, 상태가 최종적으로 적용되기 전에 엔진이 해당 상태를 빠르게 건너뛰거나 되감아야 할(즉, 내부적으로 상태를 설정하거나 해제해야 할) 경우가 있습니다. 이 과정은 다음과 같습니다:

1. 상태를 빠르게 진행시켜 최종 값의 전체 집합을 결정합니다.
2. 상태를 되감습니다.
3. 상태가 트랜지션과 함께 완전히 적용됩니다.

경우에 따라 이는 의도하지 않은 동작을 유발할 수 있습니다. 예를 들어, 뷰의 모델이나 로더의 sourceComponent를 변경하는 상태는 이러한 속성을 여러 번(적용, 되감기, 다시 적용 순서대로) 설정하게 되며, 이는 상대적으로 많은 자원을 소모할 수 있습니다.

상태 패스트 포워딩은 구현 세부 사항으로 간주되어야 하며, 향후 버전에서 변경될 수 있습니다.