Qml重叠(父子)控件同时响应鼠标事件

重叠控件响应鼠标事件

Qml中的父子控件同时使用到鼠标事件,相互之间会有干涉;即只会响应在界面上靠前的时间,下层的鼠标监听会失效.如何使下层控件也可以响应鼠标事件呢？

通过设置MouseArea中的信号：

propagateComposedEvents: true &＃8211; 必须设置

mouse.accepted=false &＃8211; 针对重写的事件按，如click等

程序示例

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
}
}
}
}

onpositionChanged事件

• 需要设置hoverEnabled: true
• 不支持事件传递

Rectangle{
width: 300
height: 300
color: "green"
MouseArea{
anchors.fill: parent
hoverEnabled: true
onClicked: {
console.log("#a green click");
}
onPositionChanged: {
console.log("#a pos ppp")
}
}
Rectangle{
width: 100
height: 100
color: "red"
MouseArea{
anchors.fill: parent
hoverEnabled: true //position需要设置此属性
propagateComposedEvents: true
onClicked: {
console.log("#a red click"); //支持事件传递
mouse.accepted = false;
}
onPositionChanged: {
console.log("#a pos ccc"); //不支持事件传递
mouse.accepted = false;
}
}
}
}

鼠标支持的事件