Тип QML Flipable

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

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

Свойства

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

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

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

Свойства 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
    }
}

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

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

См. также Примеры пользовательских элементов UI: Flipable.

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

back : Элемент

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

front : Элемент

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

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

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