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

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

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

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

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

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

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

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