Состояния Qt Quick

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

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

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

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

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

Объекты, не являющиеся элементами, могут использовать состояния через тип StateGroup.

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

Чтобы создать состояние, добавьте объект State в свойство 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 не ограничен модификацией значений свойств. Он также может:

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

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

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

Свойство when

Для удобства тип State имеет свойство 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 позволяет плавно изменять значения во время изменений состояний. В переходах можно определить анимации и поведение интерполяции. В статье Анимация и Переходы содержится более подробная информация о создании анимаций состояний.

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

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

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

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

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

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

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