MouseArea鼠标事件处理区域。
MouseArea是不可见的对象,通常与可见对象结合使用,以便为该项目提供鼠标事件处理。
enabled属性用于开启和禁用鼠标操作,禁用时,鼠标区域无法响应所有鼠标事件。
虽然MouseArea是不可见的对象,但是具有visible属性,设置为false时,鼠标区域无法响应所有鼠标事件。
pressed只读属性标识着当前鼠标是否有按下操作。此属性通常用于用户界面中属性之间的绑定。
containsMouse只读属性标识着鼠标光标是否在鼠标区域内;默认情况下,只有在按住鼠标时才会有效。
最常用的是涉及到鼠标点击的事件:onClicked,onDoubleClicked,onPressed,onReleased和onPressAndHold。还有onWheel获取鼠标滚轮事件。
当鼠标区域与其他鼠标区域重叠,可以通过将propertyComposedEvents设置为true,将鼠标的基本事件自动传递给相同位置的其他MouseArea对象。
示例:(在一个Rectangle中使用MouseArea,单击矩形使其变成红色)
import QtQuick 2.0
Rectangle {
width: 100; height: 100
color: "green"
MouseArea {
anchors.fill: parent
onClicked: { parent.color = 'red' }
}
}
MouseArea信号传递一个mouse的参数,该参数包含有关鼠标事件的其他信息。
将上一个示例进行扩展:(右键单击该区域时,将产生不同的颜色)
Rectangle {
width: 100; height: 100
color: "green"
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked: {
if (mouse.button == Qt.RightButton)
parent.color = 'blue';
else
parent.color = 'red';
}
}
}
MouseArea { acceptedButtons: Qt.LeftButton | Qt.RightButton }
如果要对所有鼠标按钮做出响应,则使用特殊值“Qt.AllButtons”。
MouseArea { acceptedButtons: Qt.AllButtons }
默认值为Qt.LeftButton。
MouseArea { cursorShape: Qt.IBeamCursor; acceptedButtons: Qt.NoButton }
默认值为Qt.ArrowCursor。
Rectangle {
id: container
width: 600; height: 200
Rectangle {
id: rect
width: 50; height: 50
color: "red"
opacity: (600.0 - rect.x) / 600
MouseArea {
anchors.fill: parent
drag.target: rect
drag.axis: Drag.XAxis
drag.minimumX: 0
drag.maximumX: container.width - rect.width
}
}
}
注意:如果对象设置了锚定,则该对象无法在drag.axis方向拖动。例如,如果在上例中将rect设置为anchors.left或anchors.right,则该对象无法沿着X轴拖动。通过在onPressed处理程序中将anchor值设置为undefined可以避免此情况。
如果drag.filterChildren设置为true,则拖动可以覆盖后面的MouseArea。如下示例,使父MouseArea可以拖动,而子MouseArea处理点击。
drag.threshold指定了确定开始拖动操作的阈值(以像素为单位)。默认情况下,这和平台相关。
如果drag.smoothed为true,则只有在拖动操作结束后,才会移动目标。如果设置为false,则目标将直接移动到当前鼠标的位置。默认值为true。
如果要处理放置操作,可以参考Drag和DropArea
import QtQuick 2.0
Rectangle {
width: 480
height: 320
Rectangle {
x: 30; y: 30
width: 300; height: 240
color: "lightsteelblue"
MouseArea {
anchors.fill: parent
drag.target: parent;
drag.axis: "XAxis"
drag.minimumX: 30
drag.maximumX: 150
drag.filterChildren: true
Rectangle {
color: "yellow"
x: 50; y : 50
width: 100; height: 100
MouseArea {
anchors.fill: parent
onClicked: console.log("Clicked")
}
}
}
}
}
enabled: bool
此属性指定当前对象是否接受鼠标事件。
注意:由于历史原因,此属性不等同于Item.enabled。它仅影响鼠标事件,并且不会影响到子项。
默认值为true。
hoverEnabled: bool
此属性指定对于是否处理鼠标悬停事件。
默认情况下,仅响应于按钮事件或按下按钮时处理鼠标事件。悬停可以处理所有鼠标事件,即使没有按下鼠标按钮。
此属性影响containsMouse属性以及onEntered,onExited和onPositionChanged信号。
pressAndHoldInterval: int
此属性会覆盖在发出pressAndHold之前经过的时间(以毫秒为单位)。
如果没有明确的设置(或者后续重置),则该值会和QStyleHints::mousePressAndHoldInterval保持一致。
通常,利用应用程序样式来全局设置此属性就够了。当某些MouseArea需要不同的时间间隔时,应设置此属性。
pressed: bool
此属性判断当前是否按下了任何按钮(acceptedButtons)。
pressedButtons:MouseButtons
此属性指定当前按下的鼠标按钮类型:
Qt.LeftButton
Qt.RightButton
Qt.MiddleButton
如下示例:按下鼠标右键时,文本显示“right”
Text {
text: mouseArea.pressedButtons & Qt.RightButton ? "right" : ""
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
MouseArea {
id: mouseArea
anchors.fill: parent
acceptedButtons: Qt.LeftButton | Qt.RightButton
}
}
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对象的onClicked处理函数被调用;然后该事件传递到黄色矩形的MouseArea,触发onClicked处理程序。
此属性大大简化了处理重叠MouseArea的组合事件。例如,如果要一个MouseArea处理clicked信号,而另一个处理pressAndHold信号,或者是一个MouseArea正常情况下处理clicked信号,但是在特殊条件下将其传递出去。
Rectangle {
width: 400; height: 400
MouseArea {
id: mouseArea1
anchors.fill: parent
hoverEnabled: true
}
MouseArea {
id: mouseArea2
width: 100; height: 100
anchors.centerIn: parent
hoverEnabled: true
}
}
相反,如果将两个MouseArea改为父子关系,将鼠标从mouseArea1移动到mouseArea2不会使mouseArea1发送exited信号。相反,它们将被视为同事hovered。