Verwendung von „ Qt Quick “-Verhalten mit Zuständen

Verwendung von Verhaltensweisen mit Zuständen

In manchen Fällen möchten Sie möglicherweise ein „Behavior“ verwenden, um eine durch einen Zustandswechsel verursachte Eigenschaftsänderung zu animieren. Während dies in manchen Situationen gut funktioniert, kann es in anderen Fällen zu unerwartetem Verhalten führen.

Hier ist ein Beispiel, das das Problem veranschaulicht:

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"
            }
        }
    }
}

Wenn Sie das Beispiel testen, indem Sie die Maus schnell und wiederholt in das farbige Rechteck hinein- und wieder herausbewegen, zeigt sich, dass das farbige Rechteck im Laufe der Zeit eine grüne Farbe annimmt und nie wieder vollständig rot wird. Das ist nicht das, was wir wollten! Das Problem tritt auf, weil wir ein „Behavior“ verwendet haben, um die Farbänderung zu animieren, und unser Zustandswechsel dadurch ausgelöst wird, dass die Maus in den „ MouseArea “ ein- oder aus ihm herausfährt – was leicht unterbrochen werden kann.

Um das Problem formeller zu formulieren: Die gemeinsame Verwendung von Zuständen und Verhaltensweisen kann zu unerwartetem Verhalten führen, wenn:

• ein „Behavior“ verwendet wird, um eine Eigenschaftsänderung zu animieren, insbesondere beim Übergang von einem explizit definierten Zustand zurück in den impliziten Basiszustand; und
• dieses „Behavior“ unterbrochen werden kann, um (erneut) in einen explizit definierten Zustand zu wechseln.

Das Problem tritt aufgrund der Art und Weise auf, wie der Basiszustand in QML definiert ist: als „Snapshot“-Zustand der Anwendung unmittelbar vor dem Eintritt in einen explizit definierten Zustand. Befinden wir uns in diesem Fall gerade in einer Animation von Grün zurück zu Rot und unterbrechen die Animation, um zum „GreenState“ zurückzukehren, enthält der Basiszustand die Farbe in ihrer Zwischenform, wie sie mitten in der Animation vorliegt.

Zwar sollten zukünftige Versionen von QML in der Lage sein, diese Situation eleganter zu handhaben, doch gibt es derzeit mehrere Möglichkeiten, Ihre Anwendung so umzugestalten, dass dieses Problem vermieden wird.

1. Verwenden Sie einen Übergang, um die Änderung zu animieren, anstatt ein „Behavior“.

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. Verwenden Sie eine bedingte Bindung, um den Eigenschaftswert zu ändern, anstatt einen Zustand.

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. Verwenden Sie nur explizit definierte Zustände anstelle eines impliziten Basiszustands.

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"
            }
        }]
    }
}