QML: 鼠标区域按下和悬停

Question

QML: 鼠标区域按下和悬停

5

我正在开发一个应用程序，需要一个小功能：我必须能够将一个对象拖到另一个对象上，并且其中至少一个对象应该注意到它们相交了。因此，问题在于其中一个项必须接受 onEntered 信号事件，即使鼠标从外部按下也是如此。

例如：

import QtQuick 1.0

Rectangle{
    id: base
    width: 500
    height: 500
    MouseArea{ //Even without this mousearea I don't get what i want.
        anchors.fill: parent
        //onPressed:{console.log("big")}
    }

    Rectangle{
       id: t
       width: 100
       height: 100
       color: "red"
       MouseArea{
          anchors.fill: parent
          hoverEnabled: true
          onPressed:{console.log("little-press")}
          onEntered:{console.log("little-enter")}
          drag.target: t
       }
     }
}

我希望的是在红色正方形区域外按下鼠标按钮并移动它，但不释放该按钮。当鼠标经过红色矩形时，我希望发出onEntered信号。我不明白为什么没有发出信号，因为onEntered只关心鼠标是否在mouseArea内，而不关心按钮。

有任何想法吗？

非常感谢。

- excalibur1491

2个回答

0

对于 hover，只需尝试一下即可。

    Rectangle {
    width: 150; height: 150
    color: 'transparent'
    
    MouseArea { 
        anchors.fill: parent; hoverEnabled: true
        onEntered: parent.color = 'yellow'
        onExited: parent.color = 'black' 
    }
}

对于pressed，添加onPressed:。

- S At

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Amit Tomar · Accepted Answer

您的代码无法正常工作，因为当一个鼠标区域在另一个上方时，鼠标事件只会被位于顶部的那个鼠标区域捕获（除非您已经修改了窃取属性等）。因此，您底部矩形的属性（如hover等）将无法工作，因为所有这些事件都将被顶部矩形捕获。

相反，请尝试使用以下方法：

import QtQuick 1.0

Rectangle
{
    id: topParent
    width: 500
    height: 500
    color: "grey"


    Rectangle
    {
        id: redRectangle
        color: "red"
        width:  80
        height: 80

        onXChanged:
        {
            if(   redRectangle.x  > greenRectangle.x - redRectangle.width
                  && redRectangle.x  < greenRectangle.x + greenRectangle.width
                  && redRectangle.y  > greenRectangle.y - redRectangle.height
                  && redRectangle.y  < greenRectangle.y + greenRectangle.height

               )

            {
                console.log ( "Red Over Green" )
            }
        }

        MouseArea
        {
          anchors.fill: parent
          drag.target: redRectangle
          drag.axis: Drag.XandYAxis
          drag.minimumX: 0
          drag.maximumX: topParent.width
          drag.minimumY: 0
          drag.maximumY: topParent.height
          onPressed: redRectangle.z = greenRectangle.z + 1
        }
    }

    Rectangle
    {
        id: greenRectangle
        color: "green"
        width: 180
        height: 180

        onXChanged:
        {
            if(   greenRectangle.x  > redRectangle.x - greenRectangle.width
                  && greenRectangle.x  < redRectangle.x + redRectangle.width
                  && greenRectangle.y  > redRectangle.y - greenRectangle.height
                  && greenRectangle.y  < redRectangle.y + redRectangle.height

               )


            {
                console.log ( "Green Over Red" )
            }
        }

        MouseArea
        {
          anchors.fill: parent
          drag.target: greenRectangle
          drag.axis: Drag.XandYAxis
          drag.minimumX: 0
          drag.maximumX: topParent.width
          drag.minimumY: 0
          drag.maximumY: topParent.height
          onPressed: greenRectangle.z = redRectangle.z + 1
        }
    }
}

我已经打印消息的地方，你也可以发信号。