image - 如何在鼠标悬停 QML 上突出显示图像

Question

我是 QML 的新手，我正在尝试突出显示鼠标悬停上的图像。我有一排电影图像，如下所示：

这是我的图像编号 4（泰山）的代码：

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'
       MouseArea{
           id:area
           width:parent.width
           height: parent.height
           hoverEnabled: true
           anchors.fill:parent
           onClicked:tarzan.forceActiveFocus()
       }

我尝试了不同的方法，但没有任何反应。有任何想法吗？帮助将不胜感激。

Answer 1

如果您使用的是 qt quick 2.15 版，有两种方法可以做到这一点

import QtQuick 2.15

您可以使用类似这样的 HoverHandler 对象

Image{
       id: tarzan
       fillMode: Image.PreserveAspectFit
       anchors.fill: parent
       source:'qrc:tarzan.jpg'
       HoverHandler{
          onHoveredChanged: {
              if(hovered){
                  tarzan.scale = 1.2
              }
              else{
                  tarzan.scale = 1
              }
          }

      }

如果您使用 qtquick 低于 2.15 的任何内容，那么您的 mousearea 对象应该看起来像这样

然后它会是这样的鼠标区号

MouseArea{
           id:area
           width:parent.width
           height: parent.height
           hoverEnabled: true
           anchors.fill:parent
           onContainsMouseChanged: {
              if(containsMouse){
                  tarzan.scale = 1.2
              }
              else{
                  tarzan.scale = 1
              }
          }
           onClicked:tarzan.forceActiveFocus()
       }