常用信号
- onClicked，鼠标点击
- onPressed，鼠标按下
- onReleased，鼠标释放
import QtQuickWindow {width: 640height: 480visible: truetitle: qsTr("Hello World")Rectangle{id:rectwidth: 100height: 100color:"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 QtQuickWindow {width: 640height: 480visible: truetitle: qsTr("Hello World")Rectangle{id:rectwidth: 100height: 100color:"red"MouseArea{anchors.fill:parent//指定可以触发信号的按钮acceptedButtons: Qt.LeftButton|Qt.RightButton|Qt.MiddleButton//鼠标按下信号onPressed:{//如何区分按下的按钮：利用pressedButtons属性&对应的按钮//若返回1，则对应按钮按下,否则返回0var 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 QtQuickWindow {width: 640height: 480visible: truetitle: qsTr("Hello World")Rectangle{id:rectwidth: 100height: 100color:"red"MouseArea{anchors.fill:parent//鼠标只要一进入鼠标区域，ContainsMouse属性就会变为truehoverEnabled: true;onContainsMouseChanged: {console.log("ContainsMouseChanged")}onContainsPressChanged:{console.log("ContainsPressChanged")}}}
}
cursorShape属性
可以改变鼠标进入这个鼠标区域内的鼠标形状，有很多种，官方文档里有
import QtQuickWindow {width: 640height: 480visible: truetitle: qsTr("Hello World")Rectangle{id:rectwidth: 100height: 100color:"red"MouseArea{anchors.fill:parent//将鼠标形状设置为小手cursorShape: Qt.PointingHandCursor}}
}
drag属性
可以设置drag属性，来拖动鼠标区域，从而拖动其父元素
import QtQuickWindow {id:main_windowwidth: 640height: 480visible: truetitle: qsTr("Hello World")Rectangle{id:rectwidth: 100height: 100color:"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 QtQuickWindow {id:main_windowwidth: 640height: 480visible: truetitle: qsTr("Hello World")Rectangle{id:rectwidth: 100height: 100color:"red"MouseArea{anchors.fill:parent//开始hover属性，只要鼠标在鼠标区域内移动，//不需要按下，鼠标的mouseX和mouseY就会改变hoverEnabled: trueonMouseXChanged: {console.log("x:",mouseX,"y:",mouseY);}}}
}
onPressAndHold信号和pressAndHoldInterval属性
有时候鼠标长按，才做某些操作
pressAndHoldInterval可以设置这个长按的时长
比如长按2s后，颜色变化
import QtQuickWindow {id:main_windowwidth: 640height: 480visible: truetitle: qsTr("Hello World")Rectangle{id:rectwidth: 100height: 100color:"red"MouseArea{anchors.fill:parent//长按的所需的事件设为2spressAndHoldInterval: 2000onPressAndHold: {rect.color="green";}}}
}
propagateComposedEvents属性
主要是控制父子元素堆叠时，点击范围较小的子元素，该信号也能够传到父元素的MouseArea
import QtQuickWindow {id:main_windowwidth: 640height: 480visible: truetitle: qsTr("Hello World")Rectangle{id:fatherwidth: 300height: 300color:"red"MouseArea{anchors.fill:parentonClicked: {console.log("red clicked");}}Rectangle{id:sonwidth: 100height: 100color:"green"MouseArea{anchors.fill:parent//为true，信号能够传到父元素的MouseAreapropagateComposedEvents: true;onClicked: (mouse)=>{console.log("green clicked");//还需要mouse的accepted属性置为false，信号才能够传到父元素的MouseAreamouse.accepted=false;}}}}
}
学习链接：https://github.com/0voice
