100 lines
2.6 KiB
QML
100 lines
2.6 KiB
QML
|
import QtQuick 2.15
|
|||
|
|
import QtGraphicalEffects 1.15
|
|||
|
|
|
|||
|
|
Item {
|
|||
|
|
id: cardRoot
|
|||
|
|
width: 300
|
|||
|
|
height: 200
|
|||
|
|
|
|||
|
|
property alias content: contentItem.data
|
|||
|
|
property real elevation: 8
|
|||
|
|
property real hoverScale: 1.05
|
|||
|
|
property real pressedScale: 0.95
|
|||
|
|
property bool isDarkMode: false
|
|||
|
|
property color cardColor: isDarkMode ? "#2d2d2d" : "#f5f5f5"
|
|||
|
|
property color shadowColor: isDarkMode ? "#20ffffff" : "#40000000"
|
|||
|
|
property color pressedColor: isDarkMode ? "#20ffffff" : "#40000000"
|
|||
|
|
property var onHoverEnter: undefined
|
|||
|
|
property var onHoverExit: undefined
|
|||
|
|
property var onClicked: undefined
|
|||
|
|
|
|||
|
|
DropShadow {
|
|||
|
|
id: shadow
|
|||
|
|
anchors.fill: card
|
|||
|
|
source: card
|
|||
|
|
horizontalOffset: 0
|
|||
|
|
verticalOffset: elevation
|
|||
|
|
samples: 16
|
|||
|
|
color: shadowColor
|
|||
|
|
scale: card.scale
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Rectangle {
|
|||
|
|
id: card
|
|||
|
|
anchors.fill: parent
|
|||
|
|
radius: 8
|
|||
|
|
color: cardColor
|
|||
|
|
antialiasing: true
|
|||
|
|
|
|||
|
|
// 按压覆盖层
|
|||
|
|
Rectangle {
|
|||
|
|
anchors.fill: parent
|
|||
|
|
radius: parent.radius
|
|||
|
|
color: pressedColor
|
|||
|
|
opacity: mouseArea.pressed ? 0.4 : 0
|
|||
|
|
Behavior on opacity { NumberAnimation { duration: 100 } }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Item {
|
|||
|
|
id: contentItem
|
|||
|
|
anchors.fill: parent
|
|||
|
|
anchors.margins: 16
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
MouseArea {
|
|||
|
|
id: mouseArea
|
|||
|
|
anchors.fill: parent
|
|||
|
|
hoverEnabled: true
|
|||
|
|
|
|||
|
|
onEntered: {
|
|||
|
|
cardRoot.z = 999
|
|||
|
|
if (typeof onHoverEnter === "function") Qt.callLater(onHoverEnter)
|
|||
|
|
}
|
|||
|
|
onExited: {
|
|||
|
|
cardRoot.z = 0
|
|||
|
|
if (typeof onHoverExit === "function") Qt.callLater(onHoverExit)
|
|||
|
|
}
|
|||
|
|
onClicked: {
|
|||
|
|
if (typeof cardRoot.onClicked === "function") Qt.callLater(cardRoot.onClicked)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
states: [
|
|||
|
|
State {
|
|||
|
|
name: "hovered"
|
|||
|
|
when: mouseArea.containsMouse && !mouseArea.pressed
|
|||
|
|
PropertyChanges {
|
|||
|
|
target: card
|
|||
|
|
scale: hoverScale
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
State {
|
|||
|
|
name: "pressed"
|
|||
|
|
when: mouseArea.pressed
|
|||
|
|
PropertyChanges {
|
|||
|
|
target: card
|
|||
|
|
scale: pressedScale
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
transitions: Transition {
|
|||
|
|
PropertyAnimation {
|
|||
|
|
properties: "scale"
|
|||
|
|
duration: 200
|
|||
|
|
easing.type: Easing.OutQuad
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|