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 поведений с состояниями объясняет распространённую проблему при использовании поведений для анимации изменений состояния.

Быстрое прокручивание состояния

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

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

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

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