qml 鼠标事件

• 事件
  系统或者Qt本身在不同时刻发出的事情或者动作的统称
  事件比信号更底层

鼠标事件

通过不可见元素MouseArea来实现，属性：

• acceptedButtons： 指定处理哪个按键，如LeftButton 、Qt.RightButton等
• enabled:设置是否启用鼠标处理，默认为true
• pressed:鼠标按下时为true
• pressedButtons:保存按下的鼠标键
• containsMouse:记录光标是否在当前的MouseArea
• cursorShape:用来设置光标形状
• mouseX/mouseY:保存光标在MouseArea中的X/Y坐标
• preventStealing：为true时可以防止当前鼠标事件被其它对象拦截
• propagateComposedEvents：默认为false，为true时可以传递鼠标事件
• hoverEnabled:默认false，只有按下鼠标键时才处理鼠标事件，为true时即使没有按下鼠标键也会作相应的处理
• 信号：canceled()、clicked()、doubleClicked()、 pressed() released()等

MouseEvent

• 在窗口上点击鼠标左键，实现窗体颜色的变换；点击鼠标右键，程序退出；双击鼠标左键，输出“点了我两次了”。
  

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 250
    height: 250
    title: qsTr("event")

    Rectangle{
        id: rect
        anchors.fill: parent
        color:"green"

        MouseArea{
            //父元素的整个区域都能触发MouseArea事件
            anchors.fill:parent
            //接收左键和右键
            acceptedButtons:Qt.LeftButton | Qt.RightButton;
            //鼠标单击事件
            onClicked: {
                if(mouse.button === Qt.RightButton)
                {
                    Qt.quit();
                }else if(mouse.button === Qt.LeftButton)
                {
                    rect.color = Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
                }
            }
            //鼠标双击事件
            onDoubleClicked: {
                console.log("点了我两次了！！！")
            }
        }
    }
}

鼠标拖拽

MouseArea中的drag分组属性提供了一个使项目可以拖动的简单方法，属性：

• drag.target：要拖拽对象的id。
• drag.active：记录目标对象是否正在被拖拽。
• drag.axis：设置拖拽方向，可以是Drag.XAxis/YAxis/XAndYAxis。
• drag.minimumX/drag.maximumX：设置X方向可拖拽距离。
• drag.minimumY/drag.maximumY：设置Y方向可拖拽距离。
• drag.filterChildren：为true时，鼠标事件可被父对象接收。
• drag.threshold：像素阈值，平台相关。

• 窗口上定义两个嵌套的矩形，这里用到了一个新的属性opacity。此属性保留项目的不透明度。不透明度指定为介于0.0（完全透明）和1.0（完全不透明）之间的数字。设置拖拽对象为小矩形，拖拽方向为XAndYAxis，分别设置x/y方向上的拖拽范围。其实就是只能在大矩形中拖拽，且透明度会随着小矩形x坐标的增大越来越小

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 240
    height: 240
    title: qsTr("event")

    Rectangle{
        id:rect
        anchors.centerIn: parent
        width: 200
        height: 200
        color: "gray"
        Rectangle{
            id:smallrect
            width: 50
            height: 50
            color:"black"
            opacity: (rect.width - smallrect.x)/600
            MouseArea{
                anchors.fill: parent
                drag.target: parent
                drag.axis: Drag.XAndYAxis
                drag.minimumX: 0
                drag.minimumY: 0
                drag.maximumX: rect.width - smallrect.width
                drag.maximumY: rect.height - smallrect.height
            }
        }
    }
}