QML类型说明-Flipable

Flipable

ImportStatement:   import QtQuick 2.2

Inherits:      Item

 

Properties

back : Item

front : Item

side :enumeration

 

DetailedDescription

Flipable是能够像卡片一样前后翻转的可视组件。它能和Rotation、State和Transition组件一起使用，产生翻转效果。front和back属性分别保存Flipable的正面和背面。

 

ExampleUsage

下面的例子展示了当鼠标按下时使用延Y轴旋转的方式翻转。例子中有个flipped的布尔属性，用来在鼠标点击后切换翻转状态。当它为真，组件改变为"back"状态，旋转角度为180度。当它为假，组件为默认状态，角度值为0。

importQtQuick 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创建了4秒改变角度的动画。当状态在"back"和默认状态之间变化时，NumberAnimation动画处理angle属性值从旧值变成新值。

更多信息参阅States、Animation和Transitions的文档。

 

PropertyDocumentation

back : Item

flipable的后面的组件

 

front : Item

flipable的前面的组件

 

side :enumeration

Flipable当前可见的面，属性值为Flipable.Front或Flipable.Back。