为了在鼠标悬停在 QML 图像上时突出显示图像,您可以使用 MouseArea
组件捕获鼠标事件并更改图像的样式
import QtQuick 2.12
import QtQuick.Window 2.12
Window {
visible: true
width: 640
height: 480
title: qsTr("Image Hover Effect")
Image {
id: image
source: "your_image.png"
width: 150
height: 150
anchors.centerIn: parent
// 默认边框颜色和宽度
border.color: "transparent"
border.width: 2
MouseArea {
anchors.fill: parent
hoverEnabled: true
onEntered: { // 鼠标进入时
image.border.color = "orange" // 改变边框颜色
}
onExited: { // 鼠标离开时
image.border.color = "transparent" // 恢复默认边框颜色
}
}
}
}
将 "your_image.png" 替换为您要使用的实际图像路径。这个示例在鼠标悬停在图像上时,显示一个橙色边框以突出显示图像。当鼠标离开时,边框颜色恢复为透明。您可以根据需要修改边框颜色、宽度等属性以实现自定义效果。
领取专属 10元无门槛券
手把手带您无忧上云