QML 翻转效果

这个例子是用QML做的基于GridView的代理翻转效果(Flipable)

完整项目链接https://download.csdn.net/download/Xavier52/13082892

核心代码

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.12
Window {
    id: root
    visible: true
    width: 960
    height: 480

    GridView {
        id: gridView
        anchors.verticalCenter: parent.verticalCenter
        width: 960
        height: 400
        cellWidth: 200
        cellHeight: 150
        currentIndex: gridIndex
        flow: GridView.FlowTopToBottom
        highlightMoveDuration: 200
        model: 100
        delegate: Flipable {
            id: flip
            width: 190
            height: 140

            front: Rectangle {
                id: gridItem
                width: 190
                height: 140
                color: gridView.currentIndex === index ? "yellow" : (index%2 === 0 ? "red" : "blue")
                Text {
                    font.pixelSize: 30
                    color: "#000000"
                    text: index
                }
            }
            back: Rectangle {width: 120;height: 120;color: "#000000"}
            transform: Rotation {//transform转换类型
                id: rotation
                origin.x: flip.width/2
                origin.y: flip.height/2
                axis.x:0
                axis.y: flip.height
                axis.z:0
                angle: 0
            }
            states: State {
                name: "back"
                when: root.flipped != 0
                PropertyChanges {
                    target: rotation;angle:root.flipped === 1 ? 45 : -45    //这里是设置翻转角度
                }
            }
            transitions: Transition{
                NumberAnimation{
                    target: rotation
                    property: "angle"
                    duration: 350
                    easing.type: Easing.OutCubic
                }
            }
        }
    }

    property int gridIndex: 0
    property int flipped: 0
    onGridIndexChanged: {
        if (gridIndex <= 0) gridIndex = 0
        if (gridIndex >= (gridView.count-1)) gridIndex = gridView.count - 1
    }
｝