qml中的信号槽的几种方式

1、信号处理器

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

Rectangle {
     id: rect1
     width: 100
     height: 100
     color: "red"

     signal sendPosition(real x, real y)

     onSendPosition: {
         console.log("===> rect1 position is:> ", x, y)
     }

     MouseArea {
         anchors.fill: parent
         onClicked: {
             rect1.sendPosition(mouseX, mouseY)
         }
     }
 }

2、Connections类型

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

Rectangle {
     id: rect2
     width: 100
     height: 100
     color: "green"

     signal sendPosition(real x, real y)
     signal sendPressed(string text)
     signal sendDoubleClicked(string text)

     MouseArea {
         anchors.fill: parent
         onClicked: {
             rect2.sendPosition(mouseX, mouseY)
         }
         onPressed: {
             rect2.sendPressed("rect2:> pressed...")
         }
         onDoubleClicked: {
             rect2.sendDoubleClicked("rect2:> doubleClicked...")
         }
     }

     Connections {
         target: rect2
         onSendPosition: {
             console.log("***> rect2 position is:> ", x, y)
         }
         onSendPressed: {
             console.log(text)
         }
         onSendDoubleClicked: {
             console.log(text)
         }
     }
 }

3、connect()函数

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

ApplicationWindow {
	// ... 
	Rectangle {
	     id: rect3
	     width: 100
	     height: 100
	     color: "purple"
	
	     signal sendPosition(real x, real y)
	     signal sendSignal
	
	     MouseArea {
	         id: mouseArea
	         anchors.fill: parent
	         onClicked: {
	             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.12

ApplicationWindow {
    id: page
    width: 600
    height: 400
    visible: true

    Row {

        // 1、信号处理器
        Rectangle {
            id: rect1
            width: 100
            height: 100
            color: "red"

            signal sendPosition(real x, real y)

            onSendPosition: {
                console.log("===> rect1 position is:> ", x, y)
            }

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    rect1.sendPosition(mouseX, mouseY)
                }
            }
        }

        // 2、Connections类型
        Rectangle {
            id: rect2
            width: 100
            height: 100
            color: "green"

            signal sendPosition(real x, real y)
            signal sendPressed(string text)
            signal sendDoubleClicked(string text)

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    rect2.sendPosition(mouseX, mouseY)
                }
                onPressed: {
                    rect2.sendPressed("rect2:> pressed...")
                }
                onDoubleClicked: {
                    rect2.sendDoubleClicked("rect2:> doubleClicked...")
                }
            }

            Connections {
                target: rect2
                onSendPosition: {
                    console.log("***> rect2 position is:> ", x, y)
                }
                onSendPressed: {
                    console.log(text)
                }
                onSendDoubleClicked: {
                    console.log(text)
                }
            }
        }

        // 3、connect()函数
        Rectangle {
            id: rect3
            width: 100
            height: 100
            color: "purple"

            signal sendPosition(real x, real y)
            signal sendSignal

            MouseArea {
                id: mouseArea
                anchors.fill: parent
                onClicked: {
                    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)
    }
}