这是我的QML代码:
Rectangle
{
.....
Rectangle
{
....height and width is smaller than parent
MouseArea
{
id: mouseArea2
anchors.fill: parent
hoverEnabled: true
onEntered:
{
console.log("enter 2")
}
}
}
MouseArea
{
id: mouseArea1
anchors.fill: parent
hoverEnabled: true
onEntered:
{
console.log("enter 1")
}
}
}
只有mouseArea1
生效。如果删除mouseArea1
,则mouseArea2
生效。所以我认为鼠标事件必须由mouseArea1
处理,并且不能传递给mouseArea2
。
我搜索了文档以找出哪个属性可以防止这种行为,但没有找到。那么,如何让mouseArea1
和mouseArea2
同时生效呢?
对于"组合"的鼠标事件clicked
、doubleClicked
和pressAndHold
,可以使用propagateComposedEvents
属性来实现这一点。但这在这里不起作用,因为悬停事件不是组合事件。
因此,您需要做的是更改MouseArea
的求值顺序。
一个简单的技巧是交换QML源本身中两个MouseArea
的顺序。将较小的放在较大的之后,较小的优先:
Rectangle{
//.....
MouseArea{
id: mouseArea1
anchors.fill: parent
hoverEnabled: true
onEntered:{
console.log("enter 1")
}
}
Rectangle{
//....height and width is smaller than parent
MouseArea{
id: mouseArea2
anchors.fill: parent
hoverEnabled: true
onEntered:{
console.log("enter 2")
}
}
}
}
实现相同效果的第二种方法是将z
索引添加到最上面的MouseArea
,该索引大于下面的索引。默认情况下,每个元素的z
索引为0
,因此只需将z: 1
添加到较小的MouseArea
即可:
Rectangle{
//.....
Rectangle{
//....height and width is smaller than parent
MouseArea{
z: 1 // <-----------------
id: mouseArea2
anchors.fill: parent
hoverEnabled: true
onEntered:{
console.log("enter 2")
}
}
}
MouseArea{
id: mouseArea1
anchors.fill: parent
hoverEnabled: true
onEntered:{
console.log("enter 1")
}
}
}
我在文档中找到了解决方案。以以下QML代码为例:
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
}
}
}
}
这里黄色的Rectangle
包含一个蓝色的矩形。后者是视觉堆叠顺序层次结构中最顶端的项目;它将在前者之上进行视觉渲染。
由于蓝色的Rectangle
将propagateComposedEvents
设置为true
,并且还将所有接收到的点击事件的MouseEvent::accepted
设置为false
,所以它接收到的任何点击事件都会传播到它下面的黄色矩形的MouseArea
单击蓝色Rectangle
将导致调用其子MouseArea
的onClicked
处理程序;该事件随后将传播到黄色Rectangle
的MouseArea
,从而调用其自己的onClicked
处理程序。