Flipable QML Type

뒤집을 수 있는 표면을 제공합니다. 더 보기...

• 상속된 멤버를 포함한 모든 멤버 목록

속성

• back : Item
• front : Item
• side : enumeration

상세 설명

Flipable은 카드처럼 앞면과 뒷면을 시각적으로 "뒤집을" 수 있는 항목입니다. 이 항목은 Rotation, State 및 Transition 유형과 함께 사용하여 뒤집기 효과를 연출할 수 있습니다.

front 및 back 속성은 플립 가능한 아이템의 앞면과 뒷면에 각각 표시될 항목을 저장하는 데 사용됩니다.

사용 예

다음 예제는 클릭할 때마다 y축을 중심으로 회전하며 뒤집히는 Flipable 항목을 보여줍니다.

이 플립 가능한 항목에는 flipped 라는 부울 속성이 있으며, 플립 가능한 항목 내의 MouseArea 이 클릭될 때마다 이 속성이 토글됩니다. flipped 가 true인 경우, 항목은 “back” 상태로 변경됩니다. 이 상태에서 Rotation 항목의 angle 값이 180도로 변경되어 뒤집기 효과가 나타납니다. flipped 가 false인 경우, 항목은 angle 값이 0인 기본 상태로 되돌아갑니다.

import QtQuick

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 는 4초에 걸쳐 각도를 변경하는 애니메이션을 생성합니다. 항목이 "back" 상태와 기본 상태 사이를 전환할 때, NumberAnimation 는 이전 값과 새 값 사이의 각도 변화를 애니메이션으로 표현합니다.

상태 변경 및 기본 상태에 대한 자세한 내용은 'Qt Quick States'를, 전환 내에서 애니메이션이 작동하는 방식에 대한 자세한 내용은 ' Qt Quick 의 애니메이션 및 전환'을 참조하십시오.

‘UI 컴포넌트: Flipable 예제’도 참조하십시오 .

속성 문서

뒤집을 수 있는 물건의 앞면과 뒷면.

side : enumeration [read-only]

현재 표시되고 있는 Flipable의 면. 가능한 값은 Flipable.Front 및 Flipable.Back 입니다.