Состояния Qt Quick

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

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

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

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

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

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

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

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

Компонент с предупреждением signal может иметь два состояния: NORMAL и CRITICAL состояние. Предположим, что в состоянии NORMAL цвет сигнала должен быть green, а предупреждение flag — скрыто. В то же время в состоянии CRITICAL цвет сигнала должен быть 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 с состояниями описывает распространенную проблему при использовании поведений для анимации изменений состояний.

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

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

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

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

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