QT Demo 之 MouseArea

现在任何一个基本的UI应用中都少不了鼠标的交互(选中、点击、拖动等等)，本篇就从Qt中的MouseArea来开始学习QML编程。幸运的是Qt给我们提供了众多的Demo工程，针对MouseArea就有一个专门的Demo。

打开MouseArea Demo工程

打开Qt之后，可以通过以下步骤打开MouseArea Demo工程：



选中过滤出来的第二个Demo，然后就会打开Project界面。

运行MouseArea Demo工程

进入工程后，按Ctrl+R可以运行Demo工程，运行后弹出下图的一个UI应用。



在左侧的红色方框上单击，下方会显示三行文字；右侧的蓝色的方框可以按住鼠标左键进行拖动。

从运行效果来看，我们需要关注的知识点包括以下几个：

鼠标在指定区域内的进入和退出
鼠标单击、双击以及释放的判断
鼠标左键、右键和中键的判断
鼠标当前位置的获取
鼠标拖动的处理
文字的显示

mousearea.qml源码分析

点击右侧的编辑按钮，就会显示项目的文件列表：



文件列表中的mousearea.qml就是我们需要重点关注的内容，如果你问为什么不是像VS工程一样，先从.cpp文件(或是.h文件)开始看起，这里简单的讲就是我们创建的是一个QML工程，肯定要把关注点放在qml文件上。

另外一点，打开工程描述文件mousearea.qmlproject，我们可以看到这样的一行：

mainFile: "mousearea.qml"

也告诉我们应该从mousearea.qml作为入口查看代码。

Rectangle {
id: box
width: 320; height: 480

Rectangle {...}
Rectangle {...}

Text {...}
Text {...}
Text {...}
}

代码的结构和UI呈现一致，包括2个Rectange和3个Text，两个Rectange分别是红色和蓝色，上面分别有文字Click和Drag，下面的三个Text分别表示操作(Entered、Exited和Pressed)，状态(Cliecked、Released和Double Clicked)以及坐标信息。
展开代码后，我们按照上一节提到的几点逐个分析。

Entered和Exited的处理

MouseArea已经做了封装，只需要设置onEntered和onExited事件处理函数即可，在这里分别是：

onEntered: info.text = 'Entered'
onExited: info.text = 'Exited (pressed=' + pressed + ')'

鼠标单击、双击以及释放的判断

针对每一种操作，Qt分别封装了不同的事件响应，分别有：

onClicked：单击
onDoubleClicked：双击
onPressed：按下鼠标
onReleased：释放鼠标
onPressAndHold：长按鼠标
在代码中可以编写每一种操作的事件响应函数，从而可以完成自己的需求。

鼠标左右键的判断

在onPressed事件处理函数中，可以通过mouse.button的值和Qt内置变量比较来判断

if (mouse.button == Qt.LeftButton)
buttonID = 'LeftButton'
else if (mouse.button == Qt.RightButton)
buttonID = 'RightButton'
else if (mouse.button == Qt.MidButton)
buttonID = 'MiddleButton'

Text文字的显示

上面的代码声明了一个Text，id是info，其它地方可以直接使用info表示该Text。需要在该Text上显示文字时直接调用info.text = '要显示的字符串'即可，如上面的MouseArea的onEntered事件处理函数：

onEntered: info.text = 'Entered'

注：当Text中的文字改变时，会触发onTextChanged事件，此时我们可以把text的内容通过console.log(text)函数输出到调试窗口。

Text {
id: info
anchors.bottom: btn.top; anchors.horizontalCenter: parent.horizontalCenter; anchors.margins: 20

onTextChanged: console.log(text)
}

鼠标位置的获取

在onPressed事件处理函数中，可以通过mouse.x和mouse.y来获取在当前控件中x和y的坐标，映射到主元素box(即当前Window)的坐标可以通过下述方法获得：

var posInBox = redSquare.mapToItem(box, mouse.x, mouse.y)
posInfo.text = + mouse.x + ',' + mouse.y + ' in square'
+ ' (' + posInBox.x + ',' + posInBox.y + ' in window)'

即把redSquare的x和y映射到box中，获得一个相对box的一个坐标信息。

鼠标拖动效果

MouseArea {
anchors.fill: parent

//! [drag]
drag.target: blueSquare
drag.axis: Drag.XAndYAxis
drag.minimumX: 0
drag.maximumX: box.width - parent.width
drag.minimumY: 0
drag.maximumY: box.height - parent.width
//! [drag]
}

blueSquare这个Rectangle中定义的MouseArea详细描述了鼠标拖动的效果。

第一行通过anchors.fill: parent将元素的尺寸设置为和父元素一样//注：此处的parent指的是直接父元素blueSquare，MouseArea也是一个元素，只是没有显示效果，此处使用id指定元素的blueSquare亦可；这样设置的好处就是，点击blueSquare的任何部分都可以拖动

第二行通过drag.target: blueSquare指定了拖动的目标，即当前的蓝色方块

第三行通过drag.axis: Drag.XAndYAxis指定了拖动的方向，即支持水平和垂直两个方向的拖动

下面紧接着通过minimumX、maximumX和minimumY、maximumY分别指定了拖动的x、y的最小和最大值，即指定了拖动的范围是(0,0)到(box.width - parent.width,box.height - parent.height)。//注:如果我们指定的范围是整个window会是怎么样呢？答案是，蓝色方块会拖动到window的外面；同理，如果我们希望在左侧拖动到window的外面，我们可以设置minimumX的值为一个负值。

总结

本节学到的知识点：

1. 鼠标的onClicked、onPressed、onReleased等事件的响应处理

2. 鼠标拖动事件的响应处理

3. 当前鼠标信息的获取

4. Text文本内容的显示以及事件响应处理

通过上面的代码，我们可以看到Qt的QML对于事件消息、UI控件、调试输出等等都做了很高层次的封装，使得我们可以很方便的进行调用，通过非常简单的几行代码就可完成一个基本的UI界面。

这样的好处就是我们可以非常方便、快速的构建UI应用程序，简化和UI控件的的细微控制，从而可以把更多的精力放在具体的业务逻辑处理上；同样，封装也就意味着对底层消息事件的管理、UI控件的绘制和刷新等等不了解。不过这种取舍，对于开发人员来说就是见仁见智了。

好了，第一篇到这里就结束了。谢谢阅读~