Qt Quick States

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

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

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

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

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

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

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

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

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

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

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

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