QtQuick Grid鼠标事件无法在相邻MouseArea间传递问题咨询

你遇到的问题是QML中MouseArea的默认行为导致的：当鼠标按下某个MouseArea后，它会捕获鼠标事件，后续的鼠标移动事件只会发送给这个MouseArea，其他MouseArea的onEntered就不会触发了。下面提供一个简单可行的解决方案，同时修正你代码里的一个小bug：

步骤1：添加全局鼠标状态跟踪 #

在Window根元素里添加一个属性记录左键是否按下，同时添加一个全屏的MouseArea来全局监听鼠标按键状态（确保即使鼠标不在网格项上也能跟踪）：

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Pixel Painter")
    // 全局记录鼠标左键是否处于按下状态
    property bool isLeftMousePressed: false

    // 全屏MouseArea用于全局监听鼠标按键
    MouseArea {
        anchors.fill: parent
        mouseTracking: true // 开启鼠标跟踪，即使不按键也能捕获移动
        onPressed: {
            if (mouse.button === Qt.LeftButton) {
                isLeftMousePressed = true
            }
        }
        onReleased: {
            if (mouse.button === Qt.LeftButton) {
                isLeftMousePressed = false
            }
        }
    }

    // 原有的Grid代码...
}

步骤2：修改网格项的MouseArea逻辑 #

在每个网格项的MouseArea中，新增onEntered事件的判断：当鼠标左键处于按下状态时，自动切换像素状态。同时修正你代码里的行计算错误（原来的currentRow计算用了grid.rows，应该是grid.columns）：

Component {
    id: delegateGridImage
    Item {
        id: gridItem
        property int currentColumn: index % grid.columns
        // 修正行计算错误：用columns而不是rows
        property int currentRow: Math.floor(index / grid.columns);
        width: grid.width / grid.columns
        height: grid.height / grid.rows

        Rectangle {
            id: pixel
            anchors.fill: parent
            property bool pixel_state: true
            color: pixel_state ? "white" : "black"

            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                propagateComposedEvents: true
                acceptedButtons: Qt.LeftButton | Qt.RightButton

                // 点击切换像素状态，同时更新全局按键状态
                onPressed: {
                    pixel.pixel_state ^= true
                    if (mouse.button === Qt.LeftButton) {
                        isLeftMousePressed = true
                    }
                }
                onReleased: {
                    if (mouse.button === Qt.LeftButton) {
                        isLeftMousePressed = false
                    }
                }
                // 鼠标进入时，如果左键按下，自动切换像素
                onEntered: {
                    if (isLeftMousePressed) {
                        pixel.pixel_state ^= true
                    }
                }
            }
        }
    }
}

原理说明 #

1. 全局鼠标跟踪：通过全屏MouseArea开启mouseTracking，确保我们能始终捕获鼠标按键的状态，不受单个网格项MouseArea的事件捕获限制。
2. onEntered触发逻辑：当鼠标按住左键移动时，每个经过的网格项MouseArea会触发onEntered事件，此时检查全局的isLeftMousePressed状态，为true就切换像素颜色。
3. 修正行计算：原来的行计算错误会导致网格项的位置错乱，改成index / grid.columns后，才能正确计算每个项所在的行。

这样修改后，你按住鼠标左键在网格上移动，就能连续绘制/擦除像素了，右键点击依然可以单独切换单个像素的状态。

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