qml中的信号槽的几种方式

1、信号处理器

当对应的信号发射时，信号处理器(就是QtWidgets中的槽函数)会被qml引擎自动调用。
在qml的对象定义中添加一个信号，则自动在对象定义中添加一个相应的对象处理器，只不过没有具体的代码实现。
如下所示，在Rectangle类型中添加信号sendPosition，则自动会生成一个信号处理器onSendPosition，只需要按需求写具体的函数实现即可。

Rectangle {id: rect1width: 100height: 100color: "red"signal sendPosition(real x, real y)onSendPosition: {console.log("===> rect1 position is:> ", x, y)}MouseArea {anchors.fill: parentonClicked: {rect1.sendPosition(mouseX, mouseY)}}}

2、Connections类型

Connections对象可以接受指定目标(target)的任意信号。
如下所示的Connections对象，其target是rect2，表示其可以接受所有来自rect2的信号，并且可以根据需要决定是否需要写相应的槽函数。

Rectangle {id: rect2width: 100height: 100color: "green"signal sendPosition(real x, real y)signal sendPressed(string text)signal sendDoubleClicked(string text)MouseArea {anchors.fill: parentonClicked: {rect2.sendPosition(mouseX, mouseY)}onPressed: {rect2.sendPressed("rect2:> pressed...")}onDoubleClicked: {rect2.sendDoubleClicked("rect2:> doubleClicked...")}}Connections {target: rect2onSendPosition: {console.log("***> rect2 position is:> ", x, y)}onSendPressed: {console.log(text)}onSendDoubleClicked: {console.log(text)}}}

3、connect()函数

通常情况下，使用信号处理器已经能够满足大多数应用。但是，如果要把一个信号与一个或多个方法或者信号关联起来，这种语句就无能无力了。
为此，qml的信号对象提供了connect()函数，其支持将信号与一个方法或者另外的信号连接起来(信号链)。

ApplicationWindow {// ... Rectangle {id: rect3width: 100height: 100color: "purple"signal sendPosition(real x, real y)signal sendSignalMouseArea {id: mouseAreaanchors.fill: parentonClicked: {rect3.sendPosition(mouseX, mouseY)}}}}function getPosition(xx, yy) {console.log("@@@> rect3 position is:> ", xx, yy)}function getSignal() {console.log("####> rect3.... -------------------")}Component.onCompleted: {// 将rect3的信号sendPosition通过connect()函数与getPosition()函数连接起来rect3.sendPosition.connect(getPosition)// 信号链// 将mouseArea的doubleClicked信号通过connect()与rect3的信号sendSignal连接起来// 当mouseArea的doubleClicked的信号发射时，rect3的信号sendSignal也自动被发射mouseArea.doubleClicked.connect(rect3.sendSignal)rect3.sendSignal.connect(getSignal)}// ...
}

4、完整测试代码

import QtQuick 2.0
import QtQuick.Controls 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.3
import QtQml 2.12ApplicationWindow {id: pagewidth: 600height: 400visible: trueRow {// 1、信号处理器Rectangle {id: rect1width: 100height: 100color: "red"signal sendPosition(real x, real y)onSendPosition: {console.log("===> rect1 position is:> ", x, y)}MouseArea {anchors.fill: parentonClicked: {rect1.sendPosition(mouseX, mouseY)}}}// 2、Connections类型Rectangle {id: rect2width: 100height: 100color: "green"signal sendPosition(real x, real y)signal sendPressed(string text)signal sendDoubleClicked(string text)MouseArea {anchors.fill: parentonClicked: {rect2.sendPosition(mouseX, mouseY)}onPressed: {rect2.sendPressed("rect2:> pressed...")}onDoubleClicked: {rect2.sendDoubleClicked("rect2:> doubleClicked...")}}Connections {target: rect2onSendPosition: {console.log("***> rect2 position is:> ", x, y)}onSendPressed: {console.log(text)}onSendDoubleClicked: {console.log(text)}}}// 3、connect()函数Rectangle {id: rect3width: 100height: 100color: "purple"signal sendPosition(real x, real y)signal sendSignalMouseArea {id: mouseAreaanchors.fill: parentonClicked: {rect3.sendPosition(mouseX, mouseY)}}}}function getPosition(xx, yy) {console.log("@@@> rect3 position is:> ", xx, yy)}function getSignal() {console.log("####> rect3.... -------------------")}Component.onCompleted: {rect3.sendPosition.connect(getPosition)// 信号链mouseArea.doubleClicked.connect(rect3.sendSignal)rect3.sendSignal.connect(getSignal)}
}