상태와 함께 Qt Quick 동작 사용

상태와 함께 동작 사용

경우에 따라 상태 변경으로 인한 프로퍼티 변경에 애니메이션을 적용하기 위해 비헤이비어를 사용할 수 있습니다. 이 방법은 일부 상황에서는 잘 작동하지만 다른 상황에서는 예기치 않은 동작이 발생할 수 있습니다.

다음은 이 문제를 보여주는 예시입니다:

import QtQuick 2.0

Rectangle {
    width: 400
    height: 400

    Rectangle {
        id: coloredRect
        width: 100
        height: 100
        anchors.centerIn: parent

        color: "red"
        Behavior on color {
            ColorAnimation {}
        }

        MouseArea {
            id: mouser
            anchors.fill: parent
            hoverEnabled: true
        }

        states: State {
            name: "GreenState"
            when: mouser.containsMouse

            PropertyChanges {
                target: coloredRect
                color: "green"
            }
        }
    }
}

컬러 사각형 안팎으로 마우스를 빠르게 반복적으로 움직여 이 예제를 테스트해 보면 컬러 사각형이 시간이 지남에 따라 녹색으로 안정되고 완전한 빨간색으로 돌아가지 않는 것을 볼 수 있습니다. 이것은 우리가 원했던 것이 아닙니다! 이 문제는 색상 변화에 애니메이션을 적용하기 위해 비헤이비어를 사용했고, 마우스가 MouseArea 에 들어가거나 나갈 때 상태 변화가 트리거되어 쉽게 중단되기 때문에 발생합니다.

문제를 좀 더 공식적으로 설명하자면, 상태와 동작을 함께 사용하면 예기치 않은 동작이 발생할 수 있습니다:

특히 명시적으로 정의된 상태에서 암시적 기본 상태로 다시 이동할 때 프로퍼티 변경에 애니메이션을 적용하는 데 Behavior가 사용됩니다.
이 동작이 중단되어 명시적으로 정의된 상태로 (재)진입할 수 있는 경우.

이 문제는 명시적으로 정의된 상태로 들어가기 직전의 애플리케이션의 "스냅샷" 상태인 QML에 대한 기본 상태가 정의되는 방식 때문에 발생합니다. 이 경우 녹색에서 다시 빨간색으로 애니메이션을 진행하던 중 애니메이션을 중단하여 "GreenState"로 돌아가는 경우 기본 상태에는 애니메이션 중간 형태의 색상이 포함됩니다.

향후 버전의 QML에서는 이 상황을 더 우아하게 처리할 수 있지만, 현재 이 문제를 피하기 위해 애플리케이션을 재작업할 수 있는 몇 가지 방법이 있습니다.

1. 동작이 아닌 전환을 사용하여 변경 사항을 애니메이션으로 처리합니다.

import QtQuick 2.0

Rectangle {
    width: 400
    height: 400

    Rectangle {
        id: coloredRect
        width: 100
        height: 100
        anchors.centerIn: parent

        color: "red"

        MouseArea {
            id: mouser
            anchors.fill: parent
            hoverEnabled: true
        }

        states: State {
            name: "GreenState"
            when: mouser.containsMouse

            PropertyChanges {
                target: coloredRect
                color: "green"
            }
        }

        transitions: Transition {
            ColorAnimation {}
        }
    }
}

2. 상태 대신 조건부 바인딩을 사용하여 속성 값을 변경합니다.

import QtQuick 2.0

Rectangle {
    width: 400
    height: 400

    Rectangle {
        id: coloredRect
        width: 100
        height: 100
        anchors.centerIn: parent

        color: mouser.containsMouse ? "green" : "red"
        Behavior on color {
            ColorAnimation {}
        }

        MouseArea {
            id: mouser
            anchors.fill: parent
            hoverEnabled: true
        }
    }
}

3. 암시적 기본 상태 대신 명시적으로 정의된 상태만 사용하세요.

import QtQuick 2.0

Rectangle {
    width: 400
    height: 400

    Rectangle {
        id: coloredRect
        width: 100
        height: 100
        anchors.centerIn: parent

        Behavior on color {
            ColorAnimation {}
        }

        MouseArea {
            id: mouser
            anchors.fill: parent
            hoverEnabled: true
        }

        states: [
        State {
            name: "GreenState"
            when: mouser.containsMouse

            PropertyChanges {
                target: coloredRect
                color: "green"
            }
        },
        State {
            name: "RedState"
            when: !mouser.containsMouse

            PropertyChanges {
                target: coloredRect
                color: "red"
            }
        }]
    }
}

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