Тип QML Flipable

Обеспечивает поверхность, которая может быть перевернута. Подробнее...

• Список всех членов, включая унаследованные члены

Свойства

• back : Элемент
• front : Элемент
• сторона : перечисление

Подробное описание

Flipable — это элемент, который может быть визуально «перевернут» между его передней и задней сторонами, как карта. Его можно использовать вместе с Rotation, State и Transition, чтобы создать эффект переворачивания.

Свойства front и back используются для хранения элементов, которые отображаются соответственно на передней и задней сторонах элемента flipable.

Пример использования

Следующий пример демонстрирует элемент Flipable, который переворачивается всякий раз, когда по нему щелкают, вращаясь вокруг оси y.

Этот элемент flipable имеет flipped логическое свойство, которое переключается всякий раз, когда щелкают по MouseArea внутри элемента flipable. Когда flipped истинно, элемент изменяется на состояние «задняя сторона»; в этом состоянии angle элемента Rotation изменяется на 180 градусов, чтобы создать эффект переворачивания. Когда flipped ложно, элемент возвращается к исходному состоянию, в котором значение angle равно 0.

import QtQuick 2.0

Flipable {
    id: flipable
    width: 240
    height: 240

    property bool flipped: false

    front: Image { source: "front.png"; anchors.centerIn: parent }
    back: Image { source: "back.png"; anchors.centerIn: parent }

    transform: Rotation {
        id: rotation
        origin.x: flipable.width/2
        origin.y: flipable.height/2
        axis.x: 0; axis.y: 1; axis.z: 0     // set axis.y to 1 to rotate around y-axis
        angle: 0    // the default angle
    }

    states: State {
        name: "back"
        PropertyChanges { target: rotation; angle: 180 }
        when: flipable.flipped
    }

    transitions: Transition {
        NumberAnimation { target: rotation; property: "angle"; duration: 4000 }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: flipable.flipped = !flipable.flipped
    }
}

Transition создает анимацию, которая изменяет угол в течение четырех секунд. Когда элемент меняет состояние с «задней» на исходное, NumberAnimation анимирует угол между его старым и новым значениями.

См. Состояния Qt Quick для получения подробностей о изменениях состояний и состояния по умолчанию, а также Анимация и переходы в Qt Quick для получения дополнительной информации о работе анимаций в переходах.

См. также Элементы пользовательского интерфейса: Пример Flipable.

Документация по свойствам

Передняя и задняя стороны элемента flipable.

сторона : перечисление

Сторона Flipable, которая в данный момент видна. Возможные значения — Flipable.Front и Flipable.Back.