QML 之TapHandler (防止滑动过程中误点击)

---

前言

在qml中，处理用户的触摸屏点击或者鼠标点击，通常采用的方法是MouseArea,常用的方式如下：

Rectangle {
        width: 600
        height: 400
        anchors.fill: parent
        color: "lightgray"

        MouseArea
        {
            anchors.fill: parent
            onClicked:
            {
                console.log("clicked");
            }
        }
}

但当某些页面场景下，需要区分drag和clicked,或者在drag的同时防止误产生clicked等情况，从QtQuick 2.12起，qml提供了TapHandler；

---

一、TapHandler是什么？

我把Qt对TapHandler的说明翻译结果拿过来：

TapHandler是一种触摸屏点击或鼠标点击的处理程序。

有效点击手势的检测取决于手势策略。默认值为DragThreshold，这要求压入和释放在空间和时间上都紧密相连。在这种情况下，DragHandler只能使用被动抓取来运行，因此不会干扰到任何其他项或输入处理程序的事件传递。因此，当您希望通过添加带有绑定和/或JavaScript回调的TapHandler来修改现有控件或项的行为时，默认的gesturePolicy非常有用。

请注意，**按钮（如QPushButton）的实现通常不关心按下和释放是否发生在一起：如果按下按钮，然后改变主意，则需要将其从按钮边缘一直拖动，**以取消单击。对于这个用例，将gesturePolicy设置为TapHandler。在边界内释放。

对于多点触控手势（双击、三点触控等），移动的距离不得超过QStyleHits::mouseDoubleClickDistance()和QStyleHits::touchDoubleTapDistance()，且两次触控之间的时间不得超过QStyleHits::mouseDoubleClickInterval()。

二、对比MouseArea

针对特定测试场景如下：
鼠标press然后拖动一段距离，再释放。

1. MouseArea

Rectangle {
        width: 600
        height: 400
        anchors.fill: parent
        color: "lightgray"

        MouseArea
        {
            anchors.fill: parent
            onClicked:
            {
                console.log("clicked");
            }
       }
}

打印结果：

qml: clicked

2.TapHandler

引入QtQuick 2.12
代码如下（示例）：

 Rectangle {
        width: 600
        height: 400
        anchors.fill: parent
        color: "lightgray"

        TapHandler {
            onPressedChanged: {
                console.log("press ? : ", pressed)
            }
            
            //长按时触发onLongPressed
            onLongPressed: {
                console.log("long pressed")
            }

            onDoubleTapped:
            {
                console.log("double pressed")
            }

            onSingleTapped:
            {
                console.log("single pressed")
            }

            onTapped:
            {
                console.log("onTapped")
            }

            onTapCountChanged:
            {
                console.log("TapCountChanged pressed")
            }
       }
 }

打印结果：

qml: press ? :  true
qml: press ? :  false

---

总结

TapHandler在该特殊场景环境下并没有触发onTapped或者onSingleTapped或onLongPressed等信号。