QML MouseArea详解

1.MouseArea简介

MouseArea是一个不可见的项目，通常与一个可见的项目一起使用，以便为该项目提供鼠标处理。通过有效地充当代理，鼠标处理的逻辑可以包含在MouseArea项中。

常用属性：

属性	类型	描述
containsMouse	bool	光标当前是否在鼠标区域内。 如果 hoverEnabled 为 false，则此属性仅在光标位于 MouseArea 内时按下鼠标时为true
cursorShape	Qt::CursorShape	此鼠标区域的光标形状。
mouseX	real	这些属性保存了鼠标光标的坐标
mouseY	real	这些属性保存了鼠标光标的坐标
pressAndHoldInterval	int	此属性会覆盖发出 pressAndHold()（长按） 之前经过的时间（以毫秒为单位）。
acceptedButtons	Qt::MouseButtons	此属性保存鼠标区域响应的鼠标按键。默认值：Qt.LeftButton
propagateComposedEvents	bool	此属性保存组合鼠标事件是否自动传播到与此MouseArea重叠但在可视堆叠顺序上较低的其他MouseArea

常用信号：

• clicked(MouseEvent mouse)：鼠标点击发出信号
• doubleClicked(MouseEvent mouse)：双击发出信号
• entered()：当鼠标进入鼠标区域时发出这个信号
• exited()：当鼠标退出鼠标区域时发出此信号
• positionChanged(MouseEvent mouse)：当鼠标位置改变时，就会发出这个信号
• pressAndHold(MouseEvent mouse)：这个信号是在长按时发出的
• pressed(MouseEvent mouse)：这个信号是在按下时发出
• released(MouseEvent mouse)：这个信号是在松开时发出

2.示例

示例1：设置鼠标事件，鼠标移动时打印出x,y坐标。

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.1

Window {
    visible: true
    width: 400
    height: 400
    title: qsTr("Hello World")

    Rectangle{
        width: 100
        height: 100
        color: "black"
        MouseArea{
            id: mouseArea
            acceptedButtons: Qt.LeftButton | Qt.RightButton     //设置可接受的鼠标左右键
            anchors.fill: parent
            hoverEnabled: true      //设置可悬停

//            onClicked: {
//                console.log("clicked")
//            }
//            onPressed: {
//                console.log("pressed")
//            }
//            onReleased: {
//                console.log("released")
//            }
            onEntered: {
                mouseArea.cursorShape = Qt.IBeamCursor
            }
            onExited: {
                mouseArea.cursorShape = Qt.ArrowCursor
            }
            onPositionChanged: {    //打印鼠标位置坐标
                console.log("x :",mouseArea.mouseX," y = ",mouseArea.mouseY)
            }
        }
    }
}

示例2：拖拽

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.1

Window {
    visible: true
    width: 400
    height: 400
    title: qsTr("Hello World")

    Rectangle {
        id: container
        width: 600; height: 200

        Rectangle {
            id: rect
            width: 50; height: 50
            color: "red"
            opacity: (600.0 - rect.x) / 600

            MouseArea {
                anchors.fill: parent
                drag.target: rect
                drag.axis: Drag.XAxis
                drag.minimumX: 0
                drag.maximumX: container.width - rect.width
            }
        }
    }
}

示例3：父子控件重合拖动

Window {
    visible: true
    width: 400
    height: 400
    title: qsTr("Hello World")

    Rectangle {
        width: 480
        height: 320
        Rectangle {
            x: 30; y: 30
            width: 300; height: 240
            color: "lightsteelblue"

            MouseArea {
                anchors.fill: parent
                drag.target: parent;
                drag.axis: "XAxis"
                drag.minimumX: 30
                drag.maximumX: 150
                drag.filterChildren: true


                Rectangle {
                    color: "yellow"
                    x: 50; y : 50
                    width: 100; height: 100
                    MouseArea {
                        anchors.fill: parent
                        onClicked: console.log("Clicked")
                        //propagateComposedEvents:false
                    }
                }
            }
        }
    }
}

当设置drag.filterChildren: true时，点击子控件时，也可以拖动，如果设为false，在子控件上就没有办法拖动。

示例4：事件传递

Window {
    visible: true
    width: 400
    height: 400
    title: qsTr("Hello World")

    Rectangle {
        color: "yellow"
        width: 100; height: 100

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

        Rectangle {
            color: "blue"
            width: 50; height: 50

            MouseArea {
                anchors.fill: parent
                propagateComposedEvents: true
                onClicked: {
                    console.log("clicked blue")
                    mouse.accepted = false
                }
            }
        }
    }
}

当propagateComposedEvents: true并且mouse.accepted = false时，点击蓝色区域的矩形，会传递点击事件到父控件

如果不希望蓝色矩形的点击事件传到黄色矩形。propagateComposedEvents: false。