QML::MouseArea

MouseArea 是不可见项目，提供鼠标处理。典型的用法是和一个可视的item一起用，处理这个item的鼠标响应。

containsMouse : bool //containsMouse属性用来表明当前的鼠标是否在MouseArea中。

Qt.LeftButton
Qt.RightButton
Qt.MiddleButton

drag //拖动类别
drag.target : Item         //指定拖动的目标对象id
drag.active : bool         //目标对象是否正在被拖动
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坐标

drag.filterChildren : bool     //是否过滤掉子对象，过滤掉：鼠标点击先触发父对象后触发子对象
enabled : bool                //是否接受鼠标事件。默认为真，即接受鼠标事件。

mouseX : real    //当前鼠标的位置
mouseY : real    

//鼠标按下事件
Rectangle {
     100; height: 100
    color: "green"

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

//键盘按下事件
Rectangle {
     100; height: 100
    focus: true

    Keys.onPressed: {
        if (event.key == Qt.Key_A) {
            console.log('Key A was pressed');
            event.accepted = true;
        }
    }
}

//拖拽事件
 Rectangle {
        id: container
         600; height: 200
        Rectangle {
            id: rect
             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
            }
        }
    }

//切换焦点
Grid {
     100; height: 100
    columns: 2

    Rectangle {
        id: topLeft
         50; height: 50
        color: focus ? "red" : "lightgray"
        focus: true
        KeyNavigation.right: topRight
        KeyNavigation.down: bottomLeft
    }

    Rectangle {
        id: topRight
         50; height: 50
        color: focus ? "red" : "lightgray"
        KeyNavigation.left: topLeft
        KeyNavigation.down: bottomRight
    }

    Rectangle {
        id: bottomLeft
         50; height: 50
        color: focus ? "red" : "lightgray"
        KeyNavigation.right: bottomRight
        KeyNavigation.up: topLeft
    }

    Rectangle {
        id: bottomRight
         50; height: 50
        color: focus ? "red" : "lightgray"
        KeyNavigation.left: bottomLeft
        KeyNavigation.up: topRight
    }
}