Состояния Qt Quick

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

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

• Выполнить сценарий с помощью Сценария изменения состояния
• Переопределить обработчик сигнала для объекта с помощью Изменений свойств
• Изменить родителя Item с помощью Изменения родителя
• Изменить значения якорей с помощью Изменений якорей

Состояние по умолчанию

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

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