Тип QML Flipable

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

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

Свойства

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

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

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
    }
}

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

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

См. также UI компоненты: Пример Flipable.

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

back : Элемент

Лицевая и обратная стороны flipable.

front : Элемент

Лицевая и обратная стороны flipable.

side : перечисление

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