QML MouseArea：如何将鼠标事件传播到其他鼠标区域？

Question

我有一个复杂的对话框，其中包含许多布局复杂的控件。我需要添加一个光标标记：在此对话框上方绘制的垂直线应该跟随鼠标光标。我不明白如何实现这一点。简化示例代码：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
    visible: true
    width: 640
    height: 480

    Button {
        anchors.centerIn: parent
        width: 100
        height: 50
        text: "Button"
        highlighted:  hovered
    }

    Rectangle {
        id: cursorMarker
        width: 1
        color: "black"
        anchors.top: parent.top
        anchors.bottom: parent.bottom
    }

    MouseArea {
        anchors.fill: parent
        hoverEnabled: true

        onPositionChanged: {
            cursorMarker.x = mouse.x
        }

    }
}

在此示例中，MouseArea 位于按钮上方并拦截所有鼠标消息。因此，当鼠标光标移动到按钮上方时，该按钮不会突出显示。如果 MouseArea 位于按钮下方，则当鼠标移到按钮上时光标标记的位置不正确。但我需要两者：光标标记正确定位在整个对话框上方并且按钮正常工作。如何解决这个问题？

Answer 1

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
visible: true
width: 640
height: 480

property int mousePosX : 0
property int mousePosY : 0

Button {
    anchors.centerIn: parent
    width: 100
    height: 50
    text: "Button"
    // Test if the mouse is within the Button
    highlighted:  mousePosX > x && mousePosX > y && mousePosX < x + width && mousePosY < y + height
}

Rectangle {
    id: cursorMarker
    x: mousePosX
    width: 1
    color: "black"
    anchors.top: parent.top
    anchors.bottom: parent.bottom
}

MouseArea {
    id: mouse
    anchors.fill: parent
    hoverEnabled: true

    onPositionChanged: {
        mousePosX = mouse.x
        mousePosY = mouse.y
    }
}
}

我建议如下（不完全是你要问的，而是另一种实现相同方法的方法）：

将鼠标位置存储在一些变量中。
然后检查当前鼠标位置是否在按钮对象内（通过查看它是否位于该按钮的边界框内）

QML MouseArea：如何将鼠标事件传播到其他鼠标区域？

QML MouseArea: how to propagate mouse events to other mouse areas?

qt

qml

qtquick2