Flickable和Flipable

1. 弹动效果Flickable

    QML中提供了一个Flickable元素，它可以将其子项目设置在一个可以拖曳和弹动的界面上，使得子项目的视图可以滚动。Flickable不会自动剪裁它的内容，如果不是将它用作全屏项目，可以将clip属性设置为true来隐藏超出区域的内容。

import QtQuick 2.4
//小视图显示大图片，拖动查看图片
Flickable {
    anchors.left: parent.left
    anchors.top: parent.top
    width: 100; height: 100
    contentWidth: image.width; contentHeight: image.height
    
    Image {id: image; source: "1.jpg"}
}

   只在一个区域中显示Flickable元素，设置clip属性，让其不在指定区域外显示。

import QtQuick 2.4
//小视图显示大图片，拖动查看图片
Rectangle {
    width: 500; height: 500
    color: "black"
    Flickable {
        anchors.centerIn: parent
        width: 100; height: 100
        contentWidth: image.width; contentHeight: image.height
        clip: true

        Image {id: image; source: "1.jpg"}
    }
}

    Flickable中显示滚动条，通过visibleArea属性实现，这个属性分为visibleArea.xPosition、visibleAea.widthRatio、visibleArea.yPosition和visibleArea.heightRatio，这些都是只读属性，描述当前可视区域的位置和大小。大小被定义为当前可视窗口占整个视图的百分比，从0.0~1.0。页面位置一般是从0.0到1.0减去大小比。例如yPosition的范围是0.0~1.0-heightRatio。然而，内容可以拖曳到正常的范围之外，所以页面位置也可能在正常范围之外。

import QtQuick 2.4
//小视图显示大图片，拖动查看图片
Rectangle {
    width: 500; height: 500
//    color: "black"
    Flickable {
        id: flickable
        width: 100; height: 300
//        anchors.centerIn: parent
        contentWidth: image.width; contentHeight: image.height
        clip: true

        Image {id: image; source: "1.jpg"}
    }

    Rectangle {
        id: scrollbar
        anchors.right: flickable.right
        y: flickable.visibleArea.yPosition * flickable.height
        width: 10
        height: flickable.visibleArea.heightRatio * flickable.height
        color: "black"
    }
}

    禁用拖动弹动功能：interactive = false

   Qt中有例子（scrollbar example）--滚动条

2. 翻转效果Flipable

    Flipable是一个可以明显在其正面和反面之间进行翻转的项目，就像一张卡片。同时使用Rotation、State和Transition等元素来产生翻转效果。front和back分别用来保存要显示在Flipable项目的正面和反面的项目。Flipable有一个flipped布尔值属性，每当在Flipable中的MouseArea上单击鼠标时都会切换该属性的值。当flipped为true时，项目变为back状态，在这个状态，Rotation的angle属性改变为180°来产生一个翻转效果。当flipped为false时，项目恢复到默认状态，这时angle的值为0。

import QtQuick 2.4

Flipable {
    id: flipable
    width: 240; height:240

    property bool flipped: false
    //正面、反面图片资源
    front: Image{source: "1.jpg"; anchors.centerIn: parent}
    back: Image{source: "2.jpg"; 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
        angle: 0
    }
    states: State {
        name: "back"
        PropertyChanges { target: rotation; angle: 180 } //翻转效果
        when: flipable.flipped
    }
    transitions: Transition {
        NumberAnimation {target: rotation; property: "angle"; duration: 800}
    }
    MouseArea {
        anchors.fill: parent
        onClicked: flipable.flipped = !flipable.flipped
    }
}