请问QML中鼠标事件如何使用？

　　鼠标事件
　　QML的鼠标事件是通过不可见元素MouseArea来实现，先来看一下它有哪些属性：
　　acceptedButtons： 指定处理哪个按键，如LeftButton 、Qt.RightButton等
　　enabled：设置是否启用鼠标处理，默认为true
　　pressed：鼠标按下时为true
　　pressedButtons：保存按下的鼠标键
　　containsMouse：记录光标是否在当前的MouseArea
　　cursorShape：用来设置光标形状
　　mouseX/mouseY：保存光标在MouseArea中的X/Y坐标
　　preventStealing：为true时可以防止当前鼠标事件被其它对象拦截
　　propagateComposedEvents：默认为false，为true时可以传递鼠标事件
　　hoverEnabled：默认false，只有按下鼠标键时才处理鼠标事件，为true时即使没有按下鼠标键也会作相应的处理
　　信号：canceled（）、clicked（）、doubleClicked（）、 pressed（） released（）等
　　MouseEvent
　　看一个简单的处理鼠标事件的例子，学习一下MouseArea如何使用，新建Qt Quick项目
　　01import QtQuick 2.9
　　02import QtQuick.Window 2.2
　　03
　　04Window {
　　05 visible： true
　　06 width： 640
　　07 height： 480
　　08 title： qsTr（“event”）
　　09
　　10 Rectangle{
　　11 id： rect
　　12 anchors.fill： parent
　　13 color：“green”
　　14
　　15 MouseArea{
　　16 //父元素的整个区域都能触发MouseArea事件
　　17 anchors.fill:parent
　　18 //接收左键和右键
　　19 acceptedButtons:Qt.LeftButton | Qt.RightButton;
　　20 //鼠标单击事件
　　21 onClicked： {
　　22 if（mouse.button === Qt.RightButton）
　　23 {
　　24 Qt.quit（）;
　　25 }else if（mouse.button === Qt.LeftButton）
　　26 {
　　27 rect.color = Qt.rgba（Math.random（）， Math.random（）， Math.random（）， 1）
　　28 }
　　29 }
　　30 //鼠标双击事件
　　31 onDoubleClicked： {
　　32 console.log（“点了我两次了！！！”）
　　33 }
　　34 }
　　35 }
　　36}
　　实现的效果很简单，和上节中的信号和槽类似，只不过这次是在窗口上点击鼠标左键，实现窗体颜色的变换；点击鼠标右键，程序退出；双击鼠标左键，输出“点了我两次了”。
　　新建绿色矩形充满窗体，在其中建立鼠标对象，设置处理哪些按键。在MouseArea中使用了onClicked和onDoubleClicked两个信号处理程序，它们对应MouseArea的Clicked和DoubleClicked信号。运行效果如下：
　　
　

　　鼠标拖拽
　　MouseArea中的drag分组属性提供了一个使项目可以拖动的简单方法。属性如下：
　　drag.target：要拖拽对象的id。
　　drag.active：记录目标对象是否正在被拖拽。
　　drag.axis：设置拖拽方向，可以是Drag.XAxis/YAxis/XAndYAxis。
　　drag.minimumX/drag.maximumX：设置X方向可拖拽距离。
　　drag.minimumY/drag.maximumY：设置Y方向可拖拽距离。
　　drag.filterChildren：为true时，鼠标事件可被父对象接收。
　　drag.threshold：像素阈值，平台相关。
　　这个在界面开发中可能不是很常用，但是效果还是蛮有趣的，我们也是通过一个例程感受一下。
　　01import QtQuick 2.9
　　02import QtQuick.Window 2.2
　　03
　　04Window {
　　05 visible： true
　　06 width： 640
　　07 height： 480
　　08 title： qsTr（“event”）
　　09
　　10 Rectangle{
　　11 id:rect
　　12 anchors.centerIn： parent
　　13 width： 200
　　14 height： 200
　　15 color： “gray”
　　16 Rectangle{
　　17 id:smallrect
　　18 width： 50
　　19 height： 50
　　20 color：“black”
　　21 opacity： （rect.width - smallrect.x）/600
　　22 MouseArea{
　　23 anchors.fill： parent
　　24 drag.target： parent
　　25 drag.axis： Drag.XAndYAxis
　　26 drag.minimumX： 0
　　27 drag.minimumY： 0
　　28 drag.maximumX： rect.width - smallrect.width
　　29 drag.maximumY： rect.height - smallrect.height
　　30 }
　　31 }
　　32 }
　　33}
　　窗口上定义两个嵌套的矩形，这里用到了一个新的属性opacity。此属性保留项目的不透明度。不透明度指定为介于0.0（完全透明）和1.0（完全不透明）之间的数字。设置拖拽对象为小矩形，拖拽方向为XAndYAxis，分别设置x/y方向上的拖拽范围。其实就是只能在大矩形中拖拽，且透明度会随着小矩形x坐标的增大越来越小。效果如下：