MouseArea元素

常用信号

• onClicked，鼠标点击
• onPressed，鼠标按下
• onReleased，鼠标释放

 

import QtQuick

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

    Rectangle{
        id:rect
        width: 100
        height: 100
        color:"red"

        MouseArea
        {
            anchors.fill:parent

            //鼠标点击信号
            onClicked: {
                console.log("鼠标点击")
            }

            //鼠标按下信号
            onPressed:
            {
                console.log("鼠标按下")
            }

            //鼠标释放信号
            onReleased: {
                console.log("鼠标释放")
            }
        }

    }
}

acceptedButtons属性

该属性可以指定触发信号的按钮（默认为左键触发）

//指定左键和右键和滚轮都可以触发信号
acceptedButtons: Qt.LeftButton|Qt.RightButton|Qt.MiddleButton

既然多个键都可以触发信号，那么就需要判断是哪个键按下了

利用pressedButtons属性&对应的按钮

//若返回1，则对应按钮按下,否则返回0
var ret1=pressedButtons&Qt.LeftButton

 

import QtQuick

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

    Rectangle{
        id:rect
        width: 100
        height: 100
        color:"red"

        MouseArea
        {
            anchors.fill:parent

            //指定可以触发信号的按钮
            acceptedButtons: Qt.LeftButton|Qt.RightButton|Qt.MiddleButton

            //鼠标按下信号
            onPressed:
            {
                //如何区分按下的按钮：利用pressedButtons属性&对应的按钮
                //若返回1，则对应按钮按下,否则返回0
                var ret1=pressedButtons&Qt.LeftButton;
                var ret2=pressedButtons&Qt.RightButton;
                if(ret1)
                {
                    console.log("左键按下");
                }
                if(ret2)
                {
                    console.log("右键按下");
                }
            }
        }

    }
}

ContainsMouse属性和ContainsPress属性

ContainsMouse属性：判断鼠标是否在鼠标区域内

• 如果hoverEnable属性为false，那么只有鼠标按下，ContainsMouse才会为true
• 如果hoverEnable属性为true，那么只要鼠标一进入鼠标区域，ContainsMouse就会为true

ContainsPress属性：判断鼠标是否在鼠标区域内且是否按下了

• ContainsPress属性：判断鼠标是否在鼠标区域内且是否按下了

import QtQuick

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

    Rectangle{
        id:rect
        width: 100
        height: 100
        color:"red"

        MouseArea
        {
            anchors.fill:parent

            //鼠标只要一进入鼠标区域，ContainsMouse属性就会变为true
            hoverEnabled: true;
            onContainsMouseChanged: {
                console.log("ContainsMouseChanged")
            }
            onContainsPressChanged:
            {
                console.log("ContainsPressChanged")
            }
        }

    }
}

cursorShape属性

可以改变鼠标进入这个鼠标区域内的鼠标形状，有很多种，官方文档里有

import QtQuick

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

    Rectangle{
        id:rect
        width: 100
        height: 100
        color:"red"

        MouseArea
        {
            anchors.fill:parent

            //将鼠标形状设置为小手
            cursorShape: Qt.PointingHandCursor
        }

    }
}

drag属性

可以设置drag属性，来拖动鼠标区域，从而拖动其父元素

 

 

import QtQuick

Window {
    id:main_window
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Rectangle{
        id:rect
        width: 100
        height: 100
        color:"red"

        MouseArea
        {
            anchors.fill:parent

            //拖动属性
            drag.target: rect//拖动谁
            drag.axis: Drag.XAxis//可以沿着x轴方向拖动（也可以沿着y，也可以沿着x和y任意拖动）
            drag.minimumX: 0//X轴方向上可以拖动的范围的最小值
            drag.maximumX: main_window.width-rect.width//X轴方向上可以拖动的范围的最大值

            //若Rectangle里面还有子元素，子元素里也有MouseArea,则子元素的MousArea也继承相关拖动属性
            drag.filterChildren: true
        }

    }
}

mouseX和mouseY属性

可以获取鼠标在鼠标区域内的x值和y值

• 不开启hoverEnable属性，鼠标按下，mouseX和mouseY的值才会改变
• 开启hoverEnable属性，鼠标在鼠标区域内移动，mouseX和mouseY的值就会改变

import QtQuick

Window {
    id:main_window
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Rectangle{
        id:rect
        width: 100
        height: 100
        color:"red"

        MouseArea
        {
            anchors.fill:parent

            //开始hover属性，只要鼠标在鼠标区域内移动，
            //不需要按下，鼠标的mouseX和mouseY就会改变
            hoverEnabled: true
            onMouseXChanged: {
                console.log("x:",mouseX,"y:",mouseY);
            }

        }

    }
}

onPressAndHold信号和pressAndHoldInterval属性

有时候鼠标长按，才做某些操作

pressAndHoldInterval可以设置这个长按的时长

比如长按2s后，颜色变化

import QtQuick

Window {
    id:main_window
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Rectangle{
        id:rect
        width: 100
        height: 100
        color:"red"

        MouseArea
        {
            anchors.fill:parent

            //长按的所需的事件设为2s
            pressAndHoldInterval: 2000
            onPressAndHold: {
                rect.color="green";
            }
        }

    }
}

propagateComposedEvents属性

主要是控制父子元素堆叠时，点击范围较小的子元素，该信号也能够传到父元素的MouseArea

 

import QtQuick

Window {
    id:main_window
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Rectangle{
        id:father
        width: 300
        height: 300
        color:"red"

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

        Rectangle{
            id:son
            width: 100
            height: 100
            color:"green"
            MouseArea
            {
                anchors.fill:parent

                //为true，信号能够传到父元素的MouseArea
                propagateComposedEvents: true;
                onClicked: (mouse)=>{
                    console.log("green clicked");

                    //还需要mouse的accepted属性置为false，信号才能够传到父元素的MouseArea
                    mouse.accepted=false;
                }
            }

        }

    }
}

 学习链接：https://github.com/0voice