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 に入ったり出たりすることで状態が変化するため、簡単に中断されてしまいます。

この問題をより具体的に説明すると、ステートとビヘイビアを一緒に使用すると、次のような場合に予期しない動作が発生する可能性があります：

特に、明示的に定義されたステートから暗黙的なベース・ステートに戻るときなどです。
このビヘイビアを中断して、明示的に定義された状態に（再び）入ることができる。

この問題は、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.