QML之MouseArea事件

QML的鼠标事件是通过不可见元素MouseArea来实现，常用的事件有点击，双击，长按等。常用的设置有鼠标作用域设置，鼠标按键设置等。下面代码详细说明

Rectangle{

        id:rec_test

        height: 300

        width: 300

        radius: 5

        color: "gray"

        anchors.centerIn: parent

        Text {//配合鼠标事件操作

            id: test

            anchors.centerIn: parent

            font.pixelSize: 35

            color: mous.pressedButtons ===Qt.RightButton ? "red" : "blue"

            //pressedButtons为只读属性，值为枚举值，代表按下时哪一个按键

            text: "Mouse"

        }

        Text {//

            id: test_mous

            font.pixelSize: 20

            color: "blue"

            text: "mouseX:" +mous.mouseX + "\nmouseY:" + mous.mouseY

            //显示鼠标点击区域的坐标，为只读属性

        }

        Text {//

            id: test_mouspre

            anchors.top: test_mous.bottom

            font.pixelSize: 20

            color: "blue"

            text: "pressed:" +mous.pressed

            //显示鼠标是否被按下，为只读属性,按下时为true，反之false

        }

        Text {//

            id: test_mouscon

            anchors.top: test_mouspre.bottom

            font.pixelSize: 20

            color: "blue"

            text: "ContainsMouse:" +mous.containsMouse

            //显示鼠标是否在作用区域内，为只读属性,注意不开启悬浮功能的话，只有按下才改变

        }

        Text {//

            id: test_dra

            anchors.top: test_mouscon.bottom

            font.pixelSize: 20

            color: "blue"

            text: "drag.active:" +mous.drag.active

            //显示指定拖动目标的活动状态，是否在被拖动

        }

        MouseArea{

            id:mous

            anchors.fill: parent //鼠标的作用区域，也可以用宽与高属性来设置

            enabled: true //是否接受鼠标事件，默认true

            //hoverEnabled: true //是否处理悬浮事件，也就是没有点击时候的时间，例如onPositionChanged，默认false

            preventStealing: true //是否防止鼠标时间被窃取，默认为false，false的时候可以被窃取。

            //acceptedButtons: Qt.RightButton | Qt.LeftButton //设置鼠标的触发区域，例如左键右键等,默认左键

            //acceptedButtons: Qt.MiddleButton //中间滑轮的那个按键

            //acceptedButtons: Qt.XButton1 | Qt.XButton2//这两个按键应该是鼠标边边的按键，没测试，因为我的鼠标上没有

            drag.target: rec_dra //提供一个拖动目标,拖动目标不能使用锚定位，不会拖动无效

            drag.axis: Drag.XandYAxis//Drag.YAxis//Drag.XAxis //选择拖动方式，顾名思义

            drag.minimumX: 0   //拖动区域的最小X坐标（相对父对象的坐标）

            drag.maximumX: parent.width - rec_dra.width //拖动区域的最大X坐标

            drag.minimumY: 0  //拖动区域的最小Y坐标

            drag.maximumY: parent.height - rec_dra.height //拖动区域的最大Y坐标

            drag.filterChildren: true

            //下面是点击等信号处理槽

            onCanceled: {console.log("onCanceled");}//鼠标时间取消或者被窃取时触发。

            onClicked: {console.log("onClicked");}  // 点击时触发

            onDoubleClicked: {console.log("onDoubleClicked");} //双击触发

            onEntered: {console.log("onEntered");} //进入鼠标区域触发，悬浮属性为false，需点击才触发

            onExited: {console.log("onExited");}   //退出鼠标区域(hoverEnabled得为true)，或者点击退出的时触发

            onPressAndHold: {console.log("onPressAndHold");} //长按触发，默认时间800ms

            onPressed: {console.log("onPressed");}          //按下就能触发

            onReleased: {console.log("onReleased");}        //释放时触发

            onPositionChanged: {console.log("onPositionChanged");} //鼠标位置变化（hoverEnabled得为true），不然得点击才变化

            Rectangle{ //提供被拖拽

                id:rec_dra

                height: 50

                width: 50

                y:200

                x:100

//                anchors.horizontalCenter: parent.horizontalCenter

//                anchors.bottom: parent.bottom

                color: "red"

            }

        }

    }