在Qt编程时需要对事件进行处理,如对鼠标事件、键盘事件等的处理。在QML编程中同样需要对鼠标、键盘等事件进行处理。因为QML程序更多的是用于实现触摸式用户界面，所以更多的是对鼠标（在触屏设备上可能是手指）单击的处理。

与以前的窗口部件不同，在QML中如果一个元素想要处理鼠标事件，则要在其上放置一个MouseArea元素，也就是说，用户只能在MouseArea确定的范围内进行鼠标的动作。

本文实例使用MouseArea接受和响应鼠标单击、拖曳等事件，运行效果如下图所示。

具体实现步骤如下。

(1) 新建项目

新建QML应用程序，项目名称为“MouseArea”。

(2) 自定义组件

右击项目视图“Resources”-“qml.qrc”下的“/”节点，选择“Add New...”项，新建“Rect.qml”文件，编写代码如下：

import QtQuick 2.0
Rectangle { // 定义一个矩形元素
  width: 50; height: 50 //宽和高都是 50
  color: "teal" //初始为蓝绿色
  MouseArea { //定义MouseArea元素处理鼠标事件
    anchors.fill: parent //事件响应区充满整个矩形
    /*拖曳属性设置*/ //(a)
    drag.target: parent
    drag.axis: Drag.XAxis
    drag.minimumX: 0
    drag.maximumX: 360 - parent.width
    acceptedButtons: Qt.LeftButton | Qt.RightButton //(b)
    onClicked: { //处理鼠标事件的代码
      if(mouse.button === Qt.RightButton) { //(c)
        /*设置矩形为蓝色并缩小尺寸*/
        parent.color = "blue";
        parent.width -= 5;
        parent.height -= 5;
      }else if((mouse.button === Qt.LeftButton) &&
      (mouse.modifiers & Qt.ShiftModifier)){ // (d)
        /*把矩形重新设为蓝绿色并恢复原来的大小*/
        parent.color = "teal";
        parent.width = 50;
        parent.height = 50;
      }else {
        /*设置矩形为绿色并增大尺寸*/
        parent.color = "green";
        parent.width += 5;
        parent.height += 5;
      }
    }
  }
}

其中，

• (a) /*拖曳属性设置*/: MouseArea中的drag分组属性提供了一个使元素可被拖曳的简便方法。drag.target属性用来指定被拖曳的元素的id (这里为parent表示被拖曳的就是所在元素本身）；drag.active属性获取元素当前是否正在被拖曳的信息；drag.axis属性用来指定拖曳的方向，可以是水平方向（Drag.XAxis)、垂直方向（Drag.YAxis)或者两个方向都可以（Drag.XandYAxis); drag.minimumX和drag.maximumX限制了元素在指定方向上被拖曳的范围。
• (b) acceptedButtons: Qt.LeftButton | Qt.RightButton: MouseArea所能接受的鼠标按键，可取的值有QtLeftButton (鼠标左键)、Qt.RightButton (鼠标右键）和Qt.MiddleButton (鼠标中键)。
• (c) mouse.button:为MouseArea信号中所包含的鼠标事件参数，其中mouse为鼠标事件对象，可以通过它的x和y属性获取鼠标当前的位置；通过button属性获取按下的按键。
• (d) mouse.modifiers & Qt.ShiftModifier:通过modifiers属性可以获取按下的键盘修饰符，modifiers的值由多个按键进行位组合而成，在使用时需要将modifiers与这些特殊的按键进行按位与来判断按键，常用的按键有Qt.NoModifier (没有修饰键）、Qt.ShiftModifier (一个Shift键）、Qt.ControlModifier (一个Ctrl键)、Qt.AltModifier (一个Alt键）。

(3) 主程序

打开“main.qml”文件，编写代码如下:

import QtQuick 2.12
import QtQuick.Window 2.12
Window {
  width: 390
  height: 150
  visible: true
  title: qsTr("MouseArea")
  Rectangle {
    width: 360
    height: 360
    anchors.fill: parent
    Rect { //复用定义好的矩形元素
      x: 25; y: 25 //初始坐标
      opacity:(360.0 - x)/360 //透明度设置
    }
  }
}

这样就可以用鼠标水平地拖曳这个矩形，并且在拖曳过程中，矩形的透明度是随X坐标位置的改变而不断变化的。

————————————————

觉得有用的话请关注点赞，谢谢您的支持！

对于本系列文章相关示例完整代码有需要的朋友，可关注并在评论区留言！