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

最新推荐文章于 2025-02-22 23:24:32 发布

hp_cpp

最新推荐文章于 2025-02-22 23:24:32 发布

阅读量2.4k

点赞数 4

分类专栏： QML学习之路

本文链接：https://blog.csdn.net/hp_cpp/article/details/97617817

版权

QML学习之路专栏收录该内容

35 篇文章

订阅专栏

本文深入探讨Qt中MouseArea的propagateComposedEvents属性如何影响鼠标事件的传播，特别是在不同大小矩形重叠时，如何通过设置mouse.accepted=false实现事件的逐层传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看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