qml-MouseArea

        MouseArea 是一个不可见的Item，通常与可见项目结合使用，以便为该项目提供鼠标处理。通过有效地充当代理，鼠标处理的逻辑可以包含在 MouseArea 项中。
        enabled 属性用于启用和禁用代理项的鼠标处理。禁用时，鼠标区域对鼠标事件变得透明。
        MouseArea 是一个不可见的 Item，但它有一个可见的属性。当设置为 false 时，鼠标区域对鼠标事件变得透明。
       pressed的只读属性指示用户是否在鼠标区域上按住鼠标按钮。此属性通常用于用户界面中属性之间的绑定。 containsMouse 只读属性指示鼠标光标在鼠标区域上的存在，但默认情况下，仅当按住鼠标按钮时；有关详细信息，请参阅 containsMouse 文档。
        通过定义了事件处理程序属性的信号提供有关鼠标位置和按钮单击的信息。最常用的涉及处理鼠标按下和单击：onClicked、onDoubleClicked、onPressed、onReleased 和 onPressAndHold。也可以通过 onWheel 信号处理鼠标滚轮事件。
        如果 MouseArea 与其他 MouseArea 项的区域重叠，您可以选择将 clicked、doubleClicked 和 pressAndHold 事件传播到这些其他项，方法是将propagateComposedEvents 设置为 true 并拒绝应该传播的事件。有关详细信息，请参阅propagateComposedEvents 文档。
        默认情况下，MouseArea 项仅报告鼠标点击，而不是鼠标光标位置的变化。设置 hoverEnabled 属性可确保使用为 onPositionChanged、onEntered 和 onExited 定义的处理程序，并且即使未按下鼠标按钮，也会更新 containsMouse 属性。

        以下示例在 Rectangle 中使用 MouseArea，单击时将 Rectangle 颜色更改为红色：

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

     MouseArea {
         anchors.fill: parent
         onClicked: { parent.color = 'red' }
     }
 }

        许多 MouseArea 信号传递一个鼠标参数，该参数包含有关鼠标事件的附加信息，例如位置、按钮和任何键修饰符。
        这是上一个示例的扩展，当该区域被右键单击时会产生不同的颜色：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12
import QtQml 2.12


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

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

        MouseArea {
            anchors.fill: parent
            acceptedButtons: Qt.LeftButton | Qt.RightButton
            onClicked: {
                if (mouse.button == Qt.RightButton)
                    parent.color = 'blue';
                else
                    parent.color = 'red';
            }
        }
    }
}

坐标

        mouse.x 和mouse.y 是相对于父对象的坐标；如下

mapToGlobal

 将此项坐标系中的点 (x, y) 映射到全局坐标系

    Rectangle {
        x :100;y:100
        width: 100; height: 100
        color: "green"

        MouseArea {
            anchors.fill: parent
            acceptedButtons: Qt.LeftButton | Qt.RightButton
            onClicked: {
                console.log(mouse.x,mouse.y,mapToGlobal(mouse.x,mouse.y))

                if (mouse.button == Qt.RightButton)
                    parent.color = 'blue';
                else
                    parent.color = 'red';
            }
        }
    }

propagateComposedEvents

        此属性保存组合的鼠标事件是否会自动传播到与此 MouseArea 重叠但视觉堆叠顺序较低的其他 MouseArea。默认情况下，此属性为 false。
        MouseArea 包含几个组合事件：clicked、doubleClicked 和 pressAndHold。它们由基本的鼠标事件组成，例如按下，并且与基本事件相比可以以不同的方式传播。
        如果将propagateComposedEvents 设置为true，则组合事件将自动传播到场景中相同位置的其他MouseArea。每个事件以堆叠顺序传播到其下方的下一个启用的 MouseArea，向下传播此视觉层次结构，直到 MouseArea 接受该事件。与按下事件不同，如果没有处理程序存在，组合事件将不会被自动accept。
        例如，下面是一个黄色矩形，其中包含一个蓝色矩形。蓝色矩形是视觉堆叠顺序层次结构中最顶层的项目；它将在黄色矩形上方视觉呈现。由于蓝色矩形将propagateComposedEvents 设置为true，并且对于所有接收到的单击事件也将MouseEvent::accepted 设置为false，因此它接收到的任何单击事件都将传播到其下方黄色矩形的MouseArea。

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12
import QtQml 2.12


Window {
    id:root
    width: 400
    height: 300
    visible: true
    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
                }
            }
        }
    }
}

        当mouse.accepted = ture表示已经处理了该事件，父对象将收不到onClicked 

drag

        被设置拖拽的item不要设置锚点，否则将无法拖拽