MouseArea(事件处理)

 Qt Quick
时间:

MouseArea是一个不可见的项目,通常用来和一个可见的项目配合使用,为可视项目提供鼠标处理。鼠标处理的逻辑完全包含在这个MouseArea项目中。

MouseArea的enabled属性可以用来设置是否启用鼠标处理,默认为true。如果设置为false,MouseArea对于鼠标事件将会变为透明,也就是不再处理任何鼠标事件。只读的preassed属性表明,用户是否在MouseArea上按住了鼠标按钮。这个属性经常用于属性绑定,可以实现在鼠标按下时执行一些操作。只读的containsMouse属性表明,当前鼠标光标是否在MouseArea上。默认只有鼠标的一个按钮处于按下状态时才可以被检测到。对于鼠标位置和按钮单击等信息是通过信号提供的,而我们可以使用事件处理器来获取这些信息。最常用的有:

  • onClicked()
  • onDoubleClicked()
  • onPressed()
  • onReleased()
  • onPressAndHold()
  • onWheel()可以处理滚动事件.

默认情况下,MouseArea项目只报告鼠标单击而不报告鼠标光标的位置改变。这可以通过设置:

  • hoverEnabled属性为true来进行更改,设置之后,onPositionChanged(),onEntered()和onExited()等处理函数才可以使用,而且这时containsMouse属性也可以在没有鼠标按钮按下的情况下检查光标。
 import QtQuick 2.2

Rectangle {
    width: 100; height: 100
    color: "green"
    MouseArea {
        anchors.fill: parent
        onClicked: { parent.color = 'red' }
    }
}

这里使用了anchors.fill: parent 来使MouseArea充满整个Rectangle区域,这个在实际编程中经常用到。
因为只有在MouseArea上单击才能进行处理,现在MouseArea覆盖了整个Rectangle,所以在Rectangle的任何位置单击鼠标左键都有效果。

当MouseArea与其他MouseArea项目重叠时,可以设置propagateComposedEvents属性为true来传播clicked,doubleClicked 和 pressAndHold 等事件。 但是只有在MouseArea没有接受这些事件的时候,它们才可以继续向下传播。也就是说,当事件已经在一个MouseArea中进行处理,则需要在其事件处理器中设置MouseEvent, accepted为false,这样该事件才能继续传播。

例子:

 import QtQuick 2.2

Rectangle {
    color: "yellow"
    width: 100; height: 100
    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
            }
        }
    }
}

蓝色矩形绘制在黄色矩形之上,而蓝色矩形的MouseArea设置了propagateComposedEvents 为true,并且clicked和doubleClicked事件的MouseEvent.accepted设置为了false,所以蓝色矩形所有的单击和双击事件都会传播到黄色矩形。


0 评论