Состояния 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 не ограничивается выполнением изменений значений свойств. Он также может:

• Запустить сценарий с помощью StateChangeScript
• Переопределить существующий обработчик сигнала для объекта с помощью PropertyChanges
• Изменить родителя Item с помощью ParentChange
• Изменить значения якорей с помощью AnchorChanges

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

Каждый компонент, основанный на Item, имеет свойство state и состояние по умолчанию. Состояние по умолчанию — это пустая строка ("") и содержит все начальные значения свойств элемента. Состояние по умолчанию полезно для управления значениями свойств перед изменением состояний. Установка свойства state в пустую строку загрузит состояние по умолчанию.

Свойство when

Для удобства тип State имеет свойство when, которое может привязываться к выражениям, чтобы изменять состояние всякий раз, когда связанное выражение оценивается как true. Свойство when вернет состояние обратно к состоянию по умолчанию, когда выражение оценивается как false.

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

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

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

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

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

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

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

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