QML学习05MouseArea

1、前言

记录一下QML学习的一些基础知识，方便自己日后回顾，也可以给有需要的人提供帮助。

2、MouseArea

2.1 移进区域触发（hoverEnabled）

MouseArea{
    id: mouseArea
    width: 200
    height: 200
    acceptedButtons: Qt.LeftButton | Qt.RightButton     //支持鼠标左键，右键
    hoverEnabled: true
    cursorShape:Qt.OpenHandCursor       //光标样式

    Rectangle{
        anchors.fill:parent
        color: "black"
    }
    onHoveredChanged: {
        console.log("onHoverChanged");
    }
    onClicked: {
        console.log("clicked")
    }

    //hoverEnabled为true，光标移进区域时触发，false则不触发
    onContainsMouseChanged: {
        console.log("onContainsMouseChanged",containsMouse)
    }
    onContainsPressChanged: {
        console.log("onContainsPressChanged",containsPress)
    }
    onPressed: {
        var ret = pressedButtons & Qt.LeftButton
        var ret2 = pressedButtons & Qt.RightButton
        console.log("pressed")
    }
    onReleased: {
        console.log("relased")
    }
}

2.2 吞噬鼠标点击信号（accepted ）和光标样式（cursorShape）

MouseArea{
    id: mouseArea
    width: 200
    height: 200
    acceptedButtons: Qt.LeftButton | Qt.RightButton     //支持鼠标左键，右键
    hoverEnabled: true
    cursorShape:Qt.OpenHandCursor       //光标样式

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          //不吞噬蓝色区域鼠标点击
            }
            onDoubleClicked: {
                console.log("onDoubleClicked")
            }
        }
    }
}

2.3 鼠标拖动（drag）

Rectangle {
     id: container
     width: 600; height: 200

     Rectangle {
         id: rect
         width: 50; height: 50
         color: "red"
         opacity: (600.0 - rect.x) / 600     //不透明度

         MouseArea {
             anchors.fill: parent
             drag.target: rect
             drag.axis: Drag.XAxis | Drag.YAxis        //x轴y轴拖动
             drag.minimumX: 0
             drag.maximumX: container.width - rect.width
         }
     }
 }

2.4 允许拖动子控件来拖动整个矩形（drag.filterChildren）

Rectangle {
    width: 480
    height: 320
    Rectangle {
        x: 30; y: 30
        width: 300; height: 240
        color: "lightsteelblue"

        MouseArea {
            anchors.fill: parent
            drag.target: parent;
            drag.axis: "XAxis"
            drag.minimumX: 30
            drag.maximumX: 150
            drag.filterChildren: true      //true时子控件可以拖动整个矩形

            Rectangle {
                color: "yellow"
                x: 50; y : 50
                width: 100; height: 100
                MouseArea {
                    anchors.fill: parent
                    onClicked: console.log("Clicked")
                }
            }
        }
    }
}

2.5 使能控件（enabled）

MouseArea{
    id: mouseArea
    width: 200
    height: 200
    acceptedButtons: Qt.LeftButton | Qt.RightButton     //支持鼠标左键，右键
    hoverEnabled: true
    enabled: true           //使能控件
    cursorShape:Qt.OpenHandCursor       //光标样式

    Rectangle{
        anchors.fill:parent
        color: "black"
    }
    onHoveredChanged: {
        console.log("onHoverChanged");
    }
    onClicked: {
        console.log("clicked")
    }

    //hoverEnabled为true，光标移进区域时触发，false则不触发
    onContainsMouseChanged: {
        console.log("onContainsMouseChanged",containsMouse)
    }
    onContainsPressChanged: {
        console.log("onContainsPressChanged",containsPress)
    }
    onPressed: {
        var ret = pressedButtons & Qt.LeftButton
        var ret2 = pressedButtons & Qt.RightButton
        console.log("pressed")
    }
    onReleased: {
        console.log("relased")
    }
  }
}

2.6鼠标坐标（mouseX，mouseY）

MouseArea{
   id: mouseArea
    width: 200
    height: 200
    acceptedButtons: Qt.LeftButton | Qt.RightButton     //支持鼠标左键，右键
    hoverEnabled: true
    enabled: true           //使能控件
    cursorShape:Qt.OpenHandCursor       //光标样式

    Rectangle{
        anchors.fill:parent
        color: "black"
    }

    onMouseXChanged: {
        console.log("x: ", mouseX)  //鼠标x坐标
    }

    onMouseYChanged: {
        console.log("y: ", mouseY)  //鼠标y坐标
    }
    onHoveredChanged: {
        console.log("onHoverChanged");
    }
    onClicked: {
        console.log("clicked")
    }

    //hoverEnabled为true，光标移进区域时触发，false则不触发
    onContainsMouseChanged: {
        console.log("onContainsMouseChanged",containsMouse)
    }
    onContainsPressChanged: {
        console.log("onContainsPressChanged",containsPress)
    }
    onPressed: {
        var ret = pressedButtons & Qt.LeftButton
        var ret2 = pressedButtons & Qt.RightButton
        console.log("pressed")
    }
    onReleased: {
        console.log("relased")
    }
  }
}

2.7 鼠标长按（onPressAndHold）

MouseArea{
    id: mouseArea
    width: 200
    height: 200
    acceptedButtons: Qt.LeftButton | Qt.RightButton     //支持鼠标左键，右键
    hoverEnabled: true
    enabled: true           //使能控件
    cursorShape:Qt.OpenHandCursor       //光标样式
    pressAndHoldInterval: 3000          //长按时间间隔

    Rectangle{
        anchors.fill:parent
        color: "black"
    }
    onPressAndHold:{
        console.log("onPressAndHold")     //长按触发
    }
  }
}

2.8 信号传递（propagateComposedEvents）

    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      //不吞噬蓝色矩形信号
                }
            }
        }
    }
}

3、总结