MouseArea控件大家应该是很熟悉的了. 使用起来也是非常方便的说. 但是在使用MouseArea的时候也有些需要我们注意的地方.我在开发的过程中就遇到了一些问题,现在就分享一下.
代码片段1:
Item {
width: 860
height: 640
Button{
width: 86
height: 64
anchors.centerIn: parent
onClicked: {
console.log("button clicked")
}
}
MouseArea{
anchors.fill: parent
onClicked: {
console.log("mouseArea clicked")
}
}
}
代码片段2:
Item {
width: 860
height: 640
MouseArea{
anchors.fill: parent
onClicked: {
console.log("mouseArea clicked")
}
}
Button{
width: 86
height: 64
anchors.centerIn: parent
onClicked: {
console.log("button clicked")
}
}
}
大家可以看到这两段代码的不同之处就是MouseArea的为何和Button的位置坐了互换. 但是就是这样一个简单的操作会出现意想不到的情况,带代码片段1的运行情况是无论点击这个Item区域还是Button按钮都会出现 mouseArea clicked日志
代码片段2运行的情况是点击Item区域会出现mouseArea clicked日志,但是点击Button按钮会出现button clicked日志.