Тип QML Flipable

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

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

Свойства

• back : Item
• front : Item
• side : перечисление

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

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

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

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

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

Этот элемент flipable имеет flipped булевое свойство, которое переключается при нажатии на MouseArea внутри flipable. Когда flipped истинно, элемент переходит в состояние «back»; в этом состоянии 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 создаёт анимацию, которая изменяет угол за четыре секунды. Когда элемент меняет своё состояние между «back» и исходным, NumberAnimation анимирует угол между его старым и новым значениями.

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

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

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

back : Item

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

front : Item

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

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

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