常用信号
- 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
