当前位置：首页 > news >正文

QML学习05MouseArea

news 来源：原创 2025/5/25 14:32:55

QML学习

1、前言
2、MouseArea
- 2.1 移进区域触发（hoverEnabled）
- 2.2 吞噬鼠标点击信号（accepted ）和光标样式（cursorShape）
- 2.3 鼠标拖动（drag）
- 2.4 允许拖动子控件来拖动整个矩形（drag.filterChildren）
- 2.5 使能控件（enabled）
- 2.6鼠标坐标（mouseX，mouseY）
- 2.7 鼠标长按（onPressAndHold）
- 2.8 信号传递（propagateComposedEvents）
3、总结

1、前言

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

2、MouseArea

2.1 移进区域触发（hoverEnabled）

MouseArea{id: mouseAreawidth: 200height: 200acceptedButtons: Qt.LeftButton | Qt.RightButton     //支持鼠标左键，右键hoverEnabled: truecursorShape:Qt.OpenHandCursor       //光标样式Rectangle{anchors.fill:parentcolor: "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.LeftButtonvar ret2 = pressedButtons & Qt.RightButtonconsole.log("pressed")}onReleased: {console.log("relased")}
}

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

MouseArea{id: mouseAreawidth: 200height: 200acceptedButtons: Qt.LeftButton | Qt.RightButton     //支持鼠标左键，右键hoverEnabled: truecursorShape:Qt.OpenHandCursor       //光标样式Rectangle {color: "yellow"width: 100; height: 100MouseArea {anchors.fill: parentonClicked: console.log("clicked yellow")}Rectangle {color: "blue"width: 50; height: 50MouseArea {anchors.fill: parentpropagateComposedEvents: true       //使蓝色区域点击信号也能发送出去onClicked: {console.log("clicked blue")mouse.accepted = false          //不吞噬蓝色区域鼠标点击}onDoubleClicked: {console.log("onDoubleClicked")}}}
}

2.3 鼠标拖动（drag）

Rectangle {id: containerwidth: 600; height: 200Rectangle {id: rectwidth: 50; height: 50color: "red"opacity: (600.0 - rect.x) / 600     //不透明度MouseArea {anchors.fill: parentdrag.target: rectdrag.axis: Drag.XAxis | Drag.YAxis        //x轴y轴拖动drag.minimumX: 0drag.maximumX: container.width - rect.width}}}

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

Rectangle {width: 480height: 320Rectangle {x: 30; y: 30width: 300; height: 240color: "lightsteelblue"MouseArea {anchors.fill: parentdrag.target: parent;drag.axis: "XAxis"drag.minimumX: 30drag.maximumX: 150drag.filterChildren: true      //true时子控件可以拖动整个矩形Rectangle {color: "yellow"x: 50; y : 50width: 100; height: 100MouseArea {anchors.fill: parentonClicked: console.log("Clicked")}}}}
}

2.5 使能控件（enabled）

MouseArea{id: mouseAreawidth: 200height: 200acceptedButtons: Qt.LeftButton | Qt.RightButton     //支持鼠标左键，右键hoverEnabled: trueenabled: true           //使能控件cursorShape:Qt.OpenHandCursor       //光标样式Rectangle{anchors.fill:parentcolor: "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.LeftButtonvar ret2 = pressedButtons & Qt.RightButtonconsole.log("pressed")}onReleased: {console.log("relased")}}
}

2.6鼠标坐标（mouseX，mouseY）

MouseArea{id: mouseAreawidth: 200height: 200acceptedButtons: Qt.LeftButton | Qt.RightButton     //支持鼠标左键，右键hoverEnabled: trueenabled: true           //使能控件cursorShape:Qt.OpenHandCursor       //光标样式Rectangle{anchors.fill:parentcolor: "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.LeftButtonvar ret2 = pressedButtons & Qt.RightButtonconsole.log("pressed")}onReleased: {console.log("relased")}}
}

2.7 鼠标长按（onPressAndHold）

MouseArea{id: mouseAreawidth: 200height: 200acceptedButtons: Qt.LeftButton | Qt.RightButton     //支持鼠标左键，右键hoverEnabled: trueenabled: true           //使能控件cursorShape:Qt.OpenHandCursor       //光标样式pressAndHoldInterval: 3000          //长按时间间隔Rectangle{anchors.fill:parentcolor: "black"}onPressAndHold:{console.log("onPressAndHold")     //长按触发}}
}

2.8 信号传递（propagateComposedEvents）

    Rectangle {color: "yellow"width: 100; height: 100MouseArea {anchors.fill: parentonClicked: console.log("clicked yellow")}Rectangle {color: "blue"width: 50; height: 50MouseArea {anchors.fill: parentpropagateComposedEvents: true      //允许信号传递onClicked: {console.log("clicked blue")mouse.accepted = false      //不吞噬蓝色矩形信号}}}}
}