QtQuick Grid，鼠标事件不会传播到相邻的鼠标区域答案

【问题标题】：QtQuick Grid, mouse events no propagating over adjacent mouse areasQtQuick Grid，鼠标事件不会传播到相邻的鼠标区域
【发布时间】：2019-08-09 13:29:08
【问题描述】：

我编写了这个简单的 qml 应用程序，它允许在网格上绘制像素：

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Grid {
        id: grid
        anchors.fill: parent
        rows: 32
        columns: 64

        Repeater {
            model: grid.columns * grid.rows;
            delegate: delegateGridImage
        }
    }

    Component {
        id: delegateGridImage

        Item {
            id: gridItem
            property int currentColumn: index % grid.columns
            property int currentRow: Math.floor(index / grid.rows);

            // Resize to screen size
            width: grid.width / grid.columns
            height: grid.height / grid.rows

            Rectangle {
                id: pixel
                anchors.fill: parent
                property bool pixel_state: true
                color: if (pixel_state == true ) { "white" } else { "black" }

                MouseArea {
                    anchors.fill: parent
                    hoverEnabled: true
                    propagateComposedEvents: true
                    acceptedButtons: Qt.LeftButton | Qt.RightButton
                    onEntered: console.log(index)
                    onPressed: pixel.pixel_state ^= true

                }

            }
        }
    }
}

这很好用：

我希望能够通过单击鼠标来绘制多个像素。

我已经尝试过 onEntered 事件，但它只监听活动鼠标区域，直到释放单击按钮。有没有办法不阻止来自其他鼠标区域的事件？

【问题讨论】：

标签： qt qml qt5 qtquick2

【解决方案1】：

你可以使用一个全局的MouseArea，通过Grid的childAt(...)减去当前光标下的项。

Window {
    ... // remove the MouseArea of pixel

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

        property bool pixel_activate: true

        onPressed: {
            var child = grid.childAt(mouse.x, mouse.y)
            child.pixel_state ^= true
            pixel_activate = child.pixel_state
        }

        onPositionChanged: {
            if (!pressed) return;
            var child = grid.childAt(mouse.x, mouse.y)
            child.pixel_state = pixel_activate
        }
    }
}

您只需决定按住按钮后要执行的操作（目前它执行第一个操作激活/停用和所有后续操作）。还请查看signals pressed 和positionChanged 传递的MouseEvent，以便区分按下的键。

【讨论】：

【解决方案2】：

Lasall 的解决方案效果很好。这是最终结果：

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Grid {
        id: grid
        anchors.fill: parent
        rows: 32
        columns: 64

        Repeater {
            model: grid.columns * grid.rows;
            delegate: delegateGridImage
        }
    }

    Component {
        id: delegateGridImage

        Item {
            id: gridItem
            property int currentColumn: index % grid.columns
            property int currentRow: Math.floor(index / grid.rows);

            property bool pixel_state: false

            // Resize to screen size
            width: grid.width / grid.columns
            height: grid.height / grid.rows

            Rectangle {
                id: pixel
                anchors.fill: parent

                color: if (gridItem.pixel_state == true ) { "white" } else { "black" }
            }

        }
    }

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

        property bool pixel_activate: true

        onPressed: {
            var child = grid.childAt(mouse.x, mouse.y)
            child.pixel_state ^= true
            pixel_activate = child.pixel_state
        }

        onPositionChanged: {
            if (!pressed) return;
            var child = grid.childAt(mouse.x, mouse.y)
            child.pixel_state = pixel_activate
        }
    }
}

【讨论】：