Qt Quick States

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

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

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

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

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

Объекты, не являющиеся объектами типа Item, могут использовать состояния через тип 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 загрузчика, будет устанавливать эти свойства несколько раз (для применения, отката и повторного применения), что может быть достаточно затратно.

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