9.qml-MouseArea组件、MouseEvent事件

1. MouseArea介绍
    MouseArea是一个不可见的item子类，通常与可视化类(比如Rectangle)结合使用，以便为该可视化类提供鼠标处理。通过有效地充当代理，鼠标处理的逻辑可以包含在MouseArea中进行处理。

•     其中enabled属性用于开启和禁用鼠标处理,默认为true,设置false时，MouseArea将不会接受到鼠标事件。
•     其中pressed只读属性用来标记用户是否在鼠标区域上按住鼠标按钮。
•     而有关鼠标位置和按钮单击的信息则通过信号接收器来处理,比如:onClicked, onDoubleClicked, onPressed, onReleased,MonPressAndHold(按下保持),还可以通过onWheel信号处理鼠标滚轮事件。
•     如果MouseArea与其他MouseArea重叠，您可以设置"propagateComposedEvents: true"并设置" mouse.accepted = false"来拒绝接受鼠标鼠标事件，从而让单击、双击和按住等鼠标事件传播到这些其他MouseArea区域。

示例如下所示(重叠传播):

Window{
    color: "yellow"
    width: 100; height: 100
    visible: true
    MouseArea {
        anchors.fill: parent
        onClicked: console.log("clicked yellow")
    }

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

        MouseArea {
            anchors.fill: parent
            propagateComposedEvents: true // 默认值为false
            onClicked: {
                console.log("clicked blue")
                mouse.accepted = false // 设置为false,这样才能传播到另个MouseArea
            }
        }
    }
}

效果如下所示:

当我们点击蓝色区域时,会同时打印"clicked yellow"和"clicked blue".

• 默认情况下，MouseArea是不接受鼠标徘徊(鼠标未按下)事件的,我们需要设置"hoverEnabled: true"才行.

示例如下所示(小圆圈一直跟随鼠标移动):

Window{
    visible: true
    
    Rectangle {
        id: rect
        width: 10
        height: 10
        radius: 5
        color: "red"
    }
    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onPositionChanged: {
            console.log("鼠标位置:"+mouseX+","+mouseY)
            rect.x = mouseX - rect.width/2;
            rect.y = mouseY - rect.height/2;
        }
    }
}

2. MouseEvent
MouseArea的信号如下所示:

其中mouse参数的类型是MouseEvent.该参数的属性如下所示:

• accepted : bool,是否接受该事件,默认为true,以便折叠在一起的低层项不会响应同一事件。
• button : enumeration,产生事件的按键,取值有Qt.LeftButton、Qt.RightButton、Qt.MiddleButton
• modifiers : int,产生事件时,按下的键盘修饰键值,比如Qt.ShiftModifier(表示鼠标按下的同时,按了shift键)
• source : int,鼠标事件的来源,用于区分真实鼠标事件和人工鼠标事件,比如Qt.MouseEventSyntheizedBySystem(事件由平台从触摸或平板电脑事件合成的)
• wasHeld : bool,是否为按下保持,如果鼠标按钮的按下时间超过阈值（默认值800ms），则此属性为真。
• x : real,鼠标x位置
• y : real,鼠标y位置

3. MouseArea其它属性
属性介绍如下所示:

• acceptedButtons : Qt::MouseButtons,设置接受事件的鼠标值,默认是Qt.LeftButton(只支持左键),也可以设置为Qt.AllButtons(支持鼠标的左键、中键、右键)
• containsMouse : bool,获取鼠标位置是否在MouseArea区域中
• containsPress : bool,获取鼠标是否是按下状态
• cursorShape : Qt::CursorShape,设置鼠标样式,默认值为Qt.ArrowCursor(箭头标志)
• drag.target : Item : 设置拖动的目标对象(可以在MouseArea区域中随意拖动)
• drag.active : bool : 存储当前拖动活动状态,为true表示正在拖动
• drag.axis : enumeration,设置可以拖动的方向,取值有:Drag.XAxis(只能水平拖动), Drag.YAxis(垂直拖动), Drag.XAndYAxis(任意拖动)
• drag.minimumX : real,设置可拖动范围的X最小值
• drag.maximumX : real,设置可拖动范围的X最大值
• drag.minimumY : real,设置可拖动范围的Y最小值
• drag.maximumY : real,设置可拖动范围的Y最大值
• enabled : bool,设置是否接受鼠标事件,默认为true
• hoverEnabled : bool,设置是否支持鼠标徘徊事件
• mouseX : real,获取鼠标的X坐标
• mouseY : real,获取鼠标的Y坐标
• pressAndHoldInterval : int,设置鼠标按下到保持状态的间隔时间,默认值为800ms
• pressed : bool,获取鼠标是否按下
• pressedButtons : MouseButtons,获取鼠标按下的鼠标值(属于鼠标的左键、中键、右键中哪一个)
• preventStealing : bool,设置事件是否防止被窃取,默认值为false,比如设置为true,那么父项则无法窃取到该区域的鼠标事件
• propagateComposedEvents : bool,设置是否支持传播到区域重叠的其他鼠标区域,默认为false(不传播)
• scrollGestureEnabled : bool ,设置鼠标区域是否响应来自非鼠标设备的滚动手势,默认为true(支持响应)

drag示例(拖动组件):

Window{
    visible: true
    Rectangle {
        id:rect1
        width: 100
        height: 100
        color: "blue"
    }
    
    MouseArea {
        anchors.fill: parent
        drag.target: rect1
        drag.axis: Drag.XAndYAxis
        drag.minimumX: 0
        drag.maximumX: parent.width - rect1.width
        drag.minimumY: 0
        drag.maximumY: parent.height - rect1.height
    
    }
}

执行后,我们就可以在Window里随意拖动rect1到任意位置了.

END

9.qml-MouseArea组件、MouseEvent事件

原文：https://www.cnblogs.com/lifexy/p/14611801.html