Состояния Qt Quick

Связанные типы

Многие пользовательские интерфейсы основаны на состояниях; интерфейсы имеют конфигурации, которые отличаются в зависимости от текущего состояния. Например, светофор настраивает свои сигналы или лампы в зависимости от состояния. В состоянии stop загорается красный свет, а желтый и зеленый гаснут. В состоянии caution загорается желтый свет, а другие гаснут.

В QML состояния — это набор конфигураций свойств, определённых в типе Состояние. Например, различные конфигурации могут:

• Показывать некоторые элементы пользовательского интерфейса и скрывать другие
• Представлять различные доступные действия пользователю
• Запускать, останавливать или приостанавливать анимации
• Выполнять сценарий, необходимый в новом состоянии
• Изменять значение свойства для определенного элемента
• Показывать другой вид или экран

Все объекты, основанные на Item, имеют свойство state, и могут указывать дополнительные состояния, добавляя новые объекты State в свойство states элемента. Каждое состояние внутри компонента имеет уникальное name, пустая строка — по умолчанию. Чтобы изменить текущее состояние элемента, установите свойство state в имя состояния.

Объекты, отличные от Item, могут использовать состояния через тип Группа состояний.

Создание состояний

Чтобы создать состояние, добавьте объект Состояние в свойство states элемента, которое содержит список состояний для этого элемента.

Компонент предупреждения signal может иметь два состояния, NORMAL и состояние CRITICAL. Предположим, что в состоянии NORMAL значение color сигнала должно быть green, а предупреждение flag — скрыто. В то же время, в состоянии CRITICAL значение color должно быть red, а флаг — up. Мы можем моделировать состояния с помощью типа State и конфигураций цвета и флага с помощью типа PropertyChanges.

Rectangle {
    id: signal
    width: 200; height: 200
    state: "NORMAL"

    states: [
        State {
            name: "NORMAL"
            PropertyChanges { target: signal; color: "green"}
            PropertyChanges { target: flag; state: "FLAG_DOWN"}
        },
        State {
            name: "CRITICAL"
            PropertyChanges { target: signal; color: "red"}
            PropertyChanges { target: flag; state: "FLAG_UP"}
        }
    ]
}

Тип PropertyChanges изменит значения свойств объектов. Объекты ссылаются через их id. Объекты вне компонента также ссылаются с помощью свойства id, как показано в примере изменения свойства внешнего объекта flag.

Кроме того, состояние может измениться путем присвоения свойства state соответствующего сигнала состояния. Переключение состояний может быть в типе MouseArea, присваивая разное состояние всякий раз, когда сигнал получает щелчок мыши.

Rectangle {
    id: signalswitch
    width: 75; height: 75
    color: "blue"

    MouseArea {
        anchors.fill: parent
        onClicked: {
            if (signal.state == "NORMAL")
                signal.state = "CRITICAL"
            else
                signal.state = "NORMAL"
        }
    }
}

Тип State не ограничен выполнением модификаций значений свойств. Он также может:

• Выполнить сценарий с помощью Сценарий изменения состояния
• Переопределить существующий обработчик сигналов для объекта с помощью PropertyChanges
• Изменить родительский элемент Item с помощью ParentChange
• Изменить значения якорей с помощью AnchorChanges

Состояние по умолчанию

Каждый компонент, основанный на Item, имеет свойство state и состояние по умолчанию. Состояние по умолчанию — пустая строка ("") и содержит все начальные значения свойств элемента. Состояние по умолчанию полезно для управления значениями свойств до изменения состояния. Установка свойства state в пустую строку загрузит состояние по умолчанию.

Свойство when

Для удобства тип Состояние имеет свойство when, которое может быть привязано к выражениям для изменения состояния всякий раз, когда привязанное выражение вычисляет true. Свойство when вернет состояние к состоянию по умолчанию, когда выражение вычисляет ложь.

Rectangle {
    id: bell
    width: 75; height: 75
    color: "yellow"

    states: State {
                name: "RINGING"
                when: (signal.state == "CRITICAL")
                PropertyChanges {target: speaker; play: "RING!"}
            }
}

Компонент bell изменится на состояние RINGING всякий раз, когда signal.state имеет значение CRITICAL.

Анимирование изменений состояния

Изменения состояния вызывают внезапные изменения значений. Тип Transition позволяет плавно изменять значения при изменении состояния. В переходах можно определять анимации и поведение интерполяции. Статья Анимация и переходы содержит более подробную информацию о создании анимаций состояния.

Пример Анимация демонстрирует, как объявить базовый набор состояний и применить анимированные переходы между ними.

Использование Qt Quick Behaviors с состояниями объясняет распространенную проблему при использовании Behaviors для анимации изменений состояния.

Быстрое продвижение состояния

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

1. Состояние быстро продвигается для определения полного набора конечных значений.
2. Состояние откатывается.
3. Состояние полностью применяется с переходами.

В некоторых случаях это может привести к нежелательному поведению. Например, состояние, изменяющее модель представления или sourceComponent загрузчика, установит эти свойства несколько раз (для применения, отката и повторного применения), что может быть относительно дорогостоящим.

Быстрое продвижение состояния следует рассматривать как деталь реализации, и оно может измениться в будущих версиях.