QML笔记(四)之QML鼠标事件

一.前言
QML的鼠标事件与QtWidgets有些许不同，楼主在学习过程中也感受到了，于是做个记录与分享

二.事件分类
1.怎么才能捕获鼠标事件呢。QtWidget中就是直接重写鼠标事件接口就可以了，在QML应该怎么去表示呢
答曰：QML提供了MouseArea这个来捕获鼠标事件，注意，这个不能单独使用，需要用一个Rectangle装起来，这样就可以获取指定区域内的鼠标事件了

Rectangle{
        id:mouse_area_rect
        anchors.centerIn: parent
        width: 200
        height: 200
        color: "#123696"
        radius: 15
        MouseArea{
            anchors.fill: parent
            acceptedButtons: Qt.AllButtons
            
            // 该属性设置为false的话，则鼠标的进入 离开 移动不能捕获到
            hoverEnabled: true
          }
      }

2.点击事件

     onClicked: {
                if(mouse.button===Qt.LeftButton){
                    console.log("鼠标左键按下")
                }
                else if(mouse.button===Qt.RightButton){
                    console.log("鼠标右键按下")
                }
                else if(mouse.button===Qt.MidButton){
                    console.log("鼠标中间键按下")
                }
                else{
                    console.log("未知按键按下")
                }
            }

3.双击事件

       onDoubleClicked: {
                if(mouse.button===Qt.LeftButton){
                    console.log("左键双击")
                }
                else if(mouse.button===Qt.RightButton){
                    console.log("右键双击")
                }
                else {
                    console.log("未知双击")
                }
            }

4.滚轮事件

    onWheel: {
                console.log(wheel.angleDelta)
                console.log(wheel.x)
                console.log(wheel.y)
            }

5.其他事件

            onEntered: {
                console.log("鼠标进入鼠标区域")
            }
            onExited: {
                console.log("鼠标退出")
            }
            onPositionChanged: {
                console.log("鼠标移动坐标:"+mouseX+":"+mouseY)
            }
            
            onReleased:{
                console.log("onReleased")
            }

6.完整的QML

import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Controls 2.1

Window{
    visible: true
    width: 640
    height: 480
    title: qsTr("QML鼠标事件")

    Rectangle{
        id:mouse_area_rect
        anchors.centerIn: parent
        width: 200
        height: 200
        color: "#123696"
        radius: 15
        MouseArea{
            anchors.fill: parent
            acceptedButtons: Qt.AllButtons

            // 该属性设置为false的话，则鼠标的进入 离开 移动不能捕获到
            hoverEnabled: true


            onEntered: {
                console.log("鼠标进入鼠标区域")
            }
            onExited: {
                console.log("鼠标退出")
            }
            onPositionChanged: {
                console.log("鼠标移动坐标:"+mouseX+":"+mouseY)
            }

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


            onClicked: {
                if(mouse.button===Qt.LeftButton){
                    console.log("鼠标左键按下")
                }
                else if(mouse.button===Qt.RightButton){
                    console.log("鼠标右键按下")
                }
                else if(mouse.button===Qt.MidButton){
                    console.log("鼠标中间键按下")
                }
                else{
                    console.log("未知按键按下")
                }
            }
            onDoubleClicked: {
                if(mouse.button===Qt.LeftButton){
                    console.log("左键双击")
                }
                else if(mouse.button===Qt.RightButton){
                    console.log("右键双击")
                }
                else {
                    console.log("未知双击")
                }
            }
            onWheel: {
                console.log(wheel.angleDelta)
                console.log(wheel.x)
                console.log(wheel.y)
            }
        }
    }
}