1.说明
在QML中提供了一个控件Flipable,这个控件提供了两个属性,一个是front,另一个是back,分别用于展现正面和反面的界面状态,在实际中可以对这两个属性进行单独样式的设计,这样就可以实现在一个控件上的正反面设计不同的效果,同时结合动画更改控件的翻转角度,即可交替展现控件的正反面。
效果展示:
flipable控件效果
2. 主要代码
import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Controls 2.0
import QtQuick.Dialogs 1.1
ApplicationWindow {
id:root
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Flipable {
id: flipable
width: 240
height: 300
anchors.centerIn: parent
property bool flipped : false
front: Rectangle {
anchors.fill: parent;
gradient: Gradient {
GradientStop { position: 0.0; color: "lightsteelblue" }
GradientStop { position: 1.0; color: "blue" }
}
Text {
anchors.centerIn: parent
text: "front page..."
font.pointSize: 20
}
}
back: Rectangle {
anchors.fill: parent;
gradient: Gradient {
GradientStop { position: 0.0; color: "red" }
GradientStop { position: 1.0; color: "blue" }
}
Text {
anchors.centerIn: parent
text: "back page..."
font.pointSize: 20
}
}
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"
when: flipable.flipped
PropertyChanges {
target: rotation
angle: 180
}
}
]
transitions: Transition {
NumberAnimation {
target: rotation
properties: "angle"
duration: 500
}
}
MouseArea {
anchors.fill: parent
onClicked: {
flipable.flipped =!flipable.flipped
}
}
}
}