Состояния Qt Quick

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

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

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

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

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

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

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

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

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