QML学习笔记（十五）QML的信号处理器（MouseArea）

前言

从本节开始，我们将详细学习有关QML的信号与槽机制。因为我已经对QWidget中的信号槽机制有比较全面的了解，所以在接下来的学习中可能会进行一些对比。
本节中介绍的信号处理器，其实可以理解为所谓的槽函数。比如之前已经使用过的MouseArea，我们实现了它的onClicked，这就是一个信号处理器。

一、MouseArea的信号处理器

在实际开发中，如何监听和处理鼠标相关事件是一个重要的事情。除了此前所用过的单击事件，还有一系列常用的行为，例如双击、滚轮，甚至还有进入、离开等等。我们将逐个进行学习和演示。
先创建一个新工程，命名为QmlSignalHandlers，并创建一个测试矩形，绑定一个MouseArea：

Window {
   
   
    visible: true
    width: 640
    height: 480
    title: qsTr("QmlSignalHandlers")
    
    Rectangle{
   
   
        id: rectId
        width: 150
        height: 150
        color: "red"
        
        MouseArea{
   
   
            anchors.fill: parent
        }
    }
}

然后我希望实现一系列鼠标相关的处理器。我们可以先在帮助文档搜索一下：

往下划，它有相当多的属性：

然后，它还有那么多的信号：

而这些信号，我们都可以实现它们对应的信号处理器，也就是信号对应的槽函数。

二、鼠标单击和双击

我们先从最简单的开始，我们之前已经使用过onClicked，我们直接模仿一下，实现onDoubleClicked：

MouseArea{
   
   
    anchors.fill: parent
    
    onClicked: {
   
   
        console.log("click...");
    }
    
    onDoubleClicked: {
   
   
        console.log("double click...");
    }
}

我们手动敲代码的时候应该能感受到，编辑器可以给我们进行快速补全，这非常方便我们的开发。
运行后，我们先单击矩形：

后双击矩形：

这意味着什么？意味着双击的行为也会触发一次单击的行为，这一点一定要注意，不然会导致一些逻辑代码的混乱。不过好在我们默认情况下，实现了双击就不会实现单击。

三、鼠标事件进入、离开、取消

首先介绍一个MouseArea的属性，那就是hoverEnabled，你必须把它设置成true，才可以监听实现鼠标覆盖的事件。比方说我鼠标移动上去，但并没有点击，此时我希望能触发相关事件，那我们就必须要设置这个标志。

hoverEnabled: true

你可能一下子没想到这个东西的应用，实际上是非常常见的需求。比如我们需要自定义实现鼠标三态控件样式，那我们就需要分别实现鼠标覆盖和鼠标点击的不同样式。再来我们应该都用过鼠标放到窗口边缘，然后通过拖拽改变窗口尺寸的功能，这里需要监听鼠标覆盖事件，改变鼠标图标的样式。
然后，我设置三个处理器：

            onEntered: {
   
   
                console.log("enter...");
            }

            onExited: {
   
   
                console.log(