QML中如何实现鼠标悬停时高亮图片的效果？

核心问题说明 #

你当前的代码仅开启了MouseArea的悬停属性，但没有绑定悬停状态对应的视觉变化规则，因此无法触发高亮效果。

可行实现方案 #

方案1：叠加半透明白色遮罩实现高亮（兼容性最好） #

在Image组件同级加一个矩形遮罩，默认完全透明，悬停时显示半透明白色达到高亮效果，完整代码如下：

Rectangle{
   id:rect4
   width: parent.width/5-row.spacing/5
   height:parent.height
   color:'transparent'
   Image{
       id: tarzan
       fillMode: Image.PreserveAspectFit
       anchors.fill: parent
       source:'qrc:tarzan.jpg'
   }
   // 新增悬停高亮遮罩
   Rectangle {
       anchors.fill: parent
       color: "#80FFFFFF" // 半透明白色，可调整透明度修改高亮强度
       visible: area.containsMouse // 悬停时才显示
   }
   MouseArea{
       id:area
       hoverEnabled: true
       anchors.fill:parent
       onClicked:tarzan.forceActiveFocus()
   }
}

方案2：调整图片亮度实现高亮（效果更自然） #

借助QtGraphicalEffects模块的亮度调整效果，悬停时提高图片亮度：
首先要在文件头部导入模块：

import QtGraphicalEffects 1.15 // 版本号和你使用的Qt版本匹配即可

然后修改组件代码：

Rectangle{
   id:rect4
   width: parent.width/5-row.spacing/5
   height:parent.height
   color:'transparent'
   Image{
       id: tarzan
       fillMode: Image.PreserveAspectFit
       anchors.fill: parent
       source:'qrc:tarzan.jpg'
       visible: false // 原图像隐藏，交给效果组件渲染
   }
   BrightnessContrast {
       anchors.fill: tarzan
       source: tarzan
       brightness: area.containsMouse ? 0.2 : 0 // 悬停时亮度+0.2，可自定义数值
       contrast: area.containsMouse ? 0.1 : 0 // 可配合调整对比度提升效果
   }
   MouseArea{
       id:area
       hoverEnabled: true
       anchors.fill:parent
       onClicked:tarzan.forceActiveFocus()
   }
}

补充说明 #

• 如果想要实现平滑的高亮切换效果，只需要给变化的属性加Behavior动画即可。
• 如果需要批量实现多张海报的高亮效果，可以把这段逻辑封装成自定义的PosterImage组件，减少代码冗余。

内容的提问来源于stack exchange，提问作者irena