Тип QML Flipable

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

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

Свойства

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

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

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

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

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

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

У этого элемента flipable есть свойство flipped типа boolean, которое переключается всякий раз, когда щелкают по MouseArea внутри flipable. Когда flipped имеет значение true, элемент переходит в состояние "back"; в этом состоянии angle элемента Rotation изменяется на 180 градусов, чтобы создать эффект переворота. Когда flipped имеет значение false, элемент возвращается в исходное состояние, в котором значение 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 создаёт анимацию, которая изменяет угол в течение четырёх секунд. Когда элемент изменяется между состояниями "back" и исходным, NumberAnimation анимирует угол между его старыми и новыми значениями.

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

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

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

back : Элемент

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

front : Элемент

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

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

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