Qt Quick 상태

관련 유형

많은 사용자 인터페이스 디자인은 상태 기반이며, 인터페이스는 현재 상태에 따라 구성이 달라집니다. 예를 들어 교통 신호는 상태에 따라 플래그나 조명을 구성합니다. 신호의 stop 상태에서는 빨간색 표시등이 켜지고 노란색과 녹색 표시등은 꺼집니다. caution 상태에서는 노란색 표시등이 켜지고 다른 표시등은 꺼집니다.

QML에서 상태는 State 유형에 정의된 속성 구성의 집합입니다. 예를 들어 다양한 구성이 가능합니다:

• 일부 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 { target: signal; color: "green"}
            PropertyChanges { target: flag; state: "FLAG_DOWN"}
        },
        State {
            name: "CRITICAL"
            PropertyChanges { target: signal; color: "red"}
            PropertyChanges { target: 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"
        }
    }
}

상태 유형은 속성 값에 대한 수정 작업에만 국한되지 않습니다. 다음과 같은 작업도 가능합니다:

• 다음을 사용하여 일부 스크립트 실행 StateChangeScript
• 다음을 사용하여 개체에 대한 기존 신호 처리기를 재정의합니다. PropertyChanges
• 다음을 사용하여 Item 부모 변경 ParentChange
• 다음을 사용하여 앵커 값 수정 AnchorChanges

기본 상태

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

when 속성

편의를 위해 State 유형에는 표현식에 바인딩하여 바인딩된 표현식이 true 로 평가될 때마다 상태를 변경할 수 있는 when 속성이 있습니다. when 속성은 표현식이 false로 평가되면 상태를 다시 기본 상태로 되돌립니다.

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

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

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

상태 변경 애니메이션

상태 변경은 갑작스러운 값 변경을 유도합니다. Transition 유형을 사용하면 상태 변경 중에 더 부드럽게 변경할 수 있습니다. 트랜지션에서는 애니메이션과 보간 동작을 정의할 수 있습니다. 애니메이션 및 전환 문서에 상태 애니메이션 만들기에 대한 자세한 정보가 나와 있습니다.

애니메이션 예시에서는 기본 상태 집합을 선언하고 그 사이에 애니메이션 전환을 적용하는 방법을 보여줍니다.

Qt Quick 상태와 함께 동작 사용에서는 동작을 사용하여 상태 변경에 애니메이션을 적용할 때 흔히 발생하는 문제를 설명합니다.

상태 빨리 감기

트랜지션이 상태 변경에 애니메이션을 올바르게 적용하려면 엔진에서 상태를 빨리 감고 되감기(즉, 내부적으로 상태를 설정하고 설정 해제)한 후 최종적으로 적용해야 할 때가 있습니다. 그 과정은 다음과 같습니다:

1. 상태를 빨리 감아 전체 최종 값 집합을 확인합니다.
2. 상태가 되감기됩니다.
3. 상태가 전환과 함께 완전히 적용됩니다.

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

상태 빨리 감기는 구현 세부 사항으로 간주해야 하며 이후 버전에서 변경될 수 있습니다.