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 миллисекунд.