Тип QML Flipable

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

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

Свойства

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

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

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

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

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

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

Этот элемент Flipable имеет flipped булево свойство, которое переключается всякий раз, когда нажата область 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 States, а информацию об анимациях в рамках переходов см. в разделе Анимация и переходы в Qt Quick.

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

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

front : Элемент

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

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

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