Состояния свойств и переходы в QML

Qt Quick позволяет определять состояния — конфигурации свойств, в которых значение свойства может меняться в зависимости от различных состояний. Например, кнопка может иметь два состояни: кнопка нажата и кнопка отпущена. Для каждого из этих двух состояний мы можем определить свою конфигурацию свойств:

import QtQuick

Window {
    width: 300
    height: 200
    visible: true
    title: "METANIT.COM"

    Rectangle {
        id:led
        anchors.centerIn: parent
        width: 100
        height: 100
        radius: 50
        color: "green"
        state: "OFF"

        MouseArea {
            anchors.fill: parent
            onPressed: led.state = "ON"
            onReleased: led.state = "OFF"
        }
        // состояния
        states: [
            State {
                name: "ON"
                PropertyChanges { target: led; color: "red"}
            },
            State {
                name: "OFF"
                PropertyChanges { target: led; color: "green"}
            }
        ]
    }
}

Здесь определен элемент Rectangle, внутри которого определена область MouseArea. При нажатии на эту область будет происходить переключение состояния элемента Rectangle - между состояниями ON и OFF:

onPressed: led.state = "ON"
onReleased: led.state = "OFF"

Начальное состояние прямоугольника задано через свойство state, и по умолчанию это состояние OFF:

state: "OFF"

С помощью свойства states определяется набор состояний прямоугольника. Каждое состяние представлено типом State и определяет пару свойств - имя состояния и свойство PropertyChanges, которое задает значения свойств для этого состояния.

State {
    name: "ON"
    PropertyChanges { target: led; color: "red"}
}

То есть в данном случае мы сообщаем, что в состоянии "ON" свойство "color" элемента "led" будет иметь значение "red". (то есть элемент окрасится в красный цвет).

Таким образом, при нажатии Rectangle перейдет в новое состояние, при котором его цвет изменится на красный:

Переходы

Для организации переходов между значениями свойств, заданных с помощью состояний, применяется тип Transition. Для настройки перехода этот тип предоставляет ряд свойств:

• animations: список анимаций, которые выполняются при переходе

• enabled: применяется ли данный объект перехода (если равно true, то применяется)

• from: из какого состояния выполняется переход

• reversible: указывает, следует ли выполнять обратный переход, если условие перехода изменится

• running: хранит булевое значение, которое указывает, выполняется ли переход

• to: в какое состояние выполняется переход

Так, изменим предыдущий пример, применив переходы между состояниями:

import QtQuick

Window {
    width: 250
    height: 200
    visible: true
    title: "METANIT.COM"

    Rectangle {
        id:led
        anchors.centerIn: parent
        width: 100
        height: 100
        radius: 50
        color: "green"
        state: "OFF"

        MouseArea {
            anchors.fill: parent
            onPressed: led.state = "ON"
            onReleased: led.state = "OFF"
        }
        // состояния
        states: [
            State {
                name: "ON"
                PropertyChanges { target: led; color: "red"}
            },
            State {
                name: "OFF"
                PropertyChanges { target: led; color: "green"}
            }
        ]
        // переходы
        transitions: [
            Transition {
                from: "ON"
                to: "OFF"
                ColorAnimation { target: led; duration: 500}
            },
            Transition {
                from: "OFF"
                to: "ON"
                ColorAnimation { target: led; duration: 500}
            }
        ]
    }
}

Здесь определено два перехода - от состояния ON к состоянию OFF и обратно. В обоих случаях выполняется анимация ColorAnimation, которая анимирует цвет в пределах 500 миллисекунд.