qml中MouseArea重叠时事件响应问题

关注

原创最新推荐文章于 2024-04-27 12:10:43 发布 2.5k 阅读 AI 写同款· GEO 优化 ›

AI权益加码！Claude Code、Cursor等20+工具免费用！购周边限时加赠Coding Plan Lite，畅享主流AI工具！学习进阶更高效！阅读详情

先看Qt帮助文档中的例子：
搜索propagateComposedEvents
可以看到该例子：

import QtQuick 2.0

Rectangle {
    color: "yellow"
    width: 100; height: 100

    MouseArea {
        anchors.fill: parent
        onClicked: console.log("clicked yellow")
    }

    Rectangle {
        color: "blue"
        width: 50; height: 50

        MouseArea {
            anchors.fill: parent
            propagateComposedEvents: true
            onClicked: {
                console.log("clicked blue")
                mouse.accepted = false
            }
        }
    }
}

鼠标点击了两次，第一次是点击的小矩形，第三次是大矩形。
运行效果：
在这里插入图片描述
可以看到，小矩形的鼠标点击事件传递给了大矩形的MouseArea，大矩形也响应了。第二次点击大矩形，鼠标点击事件没有传递给小矩形（点击的是未重叠部分）。
查看propagateComposedEvents的帮助文档，qt文档中说，propagateComposedEvents的默认值是false，也就是默认不传递鼠标事件。
只有当propagateComposedEvents: true同时mouse.accepted = false时，鼠标事件才传递给下层的MouseArea，备注：前提是上层的鼠标事件有处理函数，但是又需要传递给下层的时，才同时设置这两个参数。
那么我们来看一下mouse.accepted的作用是什么。
当mouse.accepted = false时，告诉下层说：你就当我没处理鼠标的这个事件。
当mouse.accepted = true时，告诉下层说：你就当我已经处理鼠标的这个事件，这个事件，你就不要再管了。

在霍亚飞等人编著的《Qt编程入门》这本书的第134页有这样一段话：

当MouseArea与其他MouseArea项目重叠时，可以设置propagateComposedEvents属性为true时来传播clicked、doubleClicked和pressAndHold等事件。但是只有在MouseArea没有接收这个事件的时候，它们才可以继续向下传播。也就是说，当事件已经在一个MouseArea中进行处理，则需要在其他事件处理器中设置mouse.accepted = false，这样事件才能继续传播。

再举个例子：

import QtQuick 2.0

Rectangle {

	color: "yellow"
	anchors.fill: parent

	MouseArea {
	  anchors.fill: parent
	  onClicked: console.log("clicked yellow")

	  onDoubleClicked: {
		  console.log("double clicked yellow")
		  mouse.accepted = false
	  }
	}

	Rectangle {
	  color: "blue"
	  width: 50; height: 50

	  MouseArea {
		  anchors.fill: parent
		  propagateComposedEvents: true
//              onClicked: {
//                  console.log("clicked blue")
//                  mouse.accepted = false
//              }

		  onDoubleClicked: {
			  console.log("double clicked blue")
			  mouse.accepted = false
		  }
	  }
	}
}

把这个文件保存成test.qml，再用qmlscene进行运行。
运行结果：
当鼠标单击小矩形时，输出：

qml: clicked yellow

当鼠标双击小矩形时，输出：

qml: clicked yellow
qml: double clicked blue
qml: double clicked yellow

也就是说小矩形的鼠标双击事件传递给了下层的MouseArea，单击事件却没有传递给下层。
另外：鼠标双击时，会先有个鼠标点击事件，再有鼠标双击事件。

参考：
https://blog.csdn.net/xi__q/article/details/52199676
https://www.cnblogs.com/SaveDictator/articles/7411894.html
https://www.cnblogs.com/savedictator/articles/7954148.html

收录于

QML学习之路

本内容遵循 CC 4.0 BY-SA 版权协议

QML鼠标事件传递（鼠标穿透）有时候，我们的MouseArea区域重叠了，这时候默认是最上层的MouseArea接收鼠标事件，而我们可能需要底层也能接收这个事件。虽然可以关联两个MouseArea的信号，但是这种操作局限性比较大，耦合性太强，某个MouseArea并不能被外部所见等等。在Qt Widgets中可以通过setAttribute(Qt::WA_TransparentForMouseEvents,true... 阅读详情

qml中MouseArea重叠时事件响应问题

相关推荐