这个例子是用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
}
}