QML中的信号和函数
https://blog.csdn.net/iEearth/article/details/41801333
在Qt C++中，signals & slots是其核心机制，是应用程序与UI组件交互的神经网络，同样在QML中，也有类似的signal & handler机制，signal信号就是我们常说的一种事件，可通过signal handler信号处理器来处理这个信号。当某个signal信号被发送时，对应的handler信号处理器也被触发，我们就可以在handler信号处理器中做一些事情，来处理这个signal信号事件。
1、“HelloWorld”信号简述
下面是一个简单的例子：
import QtQuick 2.3
import QtQuick.Controls 1.2
Rectangle {
360; height: 200
color: "lightblue"
Button {
text: "Quit!"
anchors.centerIn: parent
onClicked: Qt.quit()
}
}
在一个Rectangle中有一个Button，这个Button默认有一个clicked()信号，相应的就会有一个onClicked信号处理器。如果有一个signal()信号，那么相应的信号处理器handler就是onSignal，注意大小写，信号中有参数时信号处理器会接收到且可以使用。当我们用鼠标左键点击例子中的的Button时，就会发送clicked()信号，触发信号处理器onClicked，这里调用了Qt.quit()函数来退出应用程序。
2、属性handler
当QML属性值改变时，会自动发送一个该属性值变化的信号，对应的信号处理器的格式是on<Property>Changed，不管是QML内建的属性，还是我们自定义的属性，一旦属性值改变，都会触发相应的信号处理器，举例如下：
import QtQuick 2.3
import QtQuick.Controls 1.2
Rectangle {
360; height: 100
color: "lightblue"
onColorChanged: console.log("color changed")
Button {
text: "Change Color"
anchors.centerIn: parent
onClicked: parent.color = "yellow"
}
}
点击Button按钮时，Rectangle的color会从原来的lightblue变为yellow，这时就会触发onColorChanged，输出“color changed”。
3、附加signalhandler
附加信号处理器接收的信号来自附加元素类型，而不是当前对象，例如下面例子中的Keys和Component：
import QtQuick 2.3
Rectangle {
id: rect
360; height: 100
focus: true
Keys.onSpacePressed: rect.color = Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
Component.onCompleted: rect.color = "green"
}
上述例子中我们使用了Component.onCompleted，在组件完成时设置Rectangle的颜色为绿色，还使用了Keys.onSpacePressed，按下空格键时随机改变Rectangle的颜色。Math是JavaScript的对象，在这里我们可以直接使用，因为QML是对JavaScript的一种扩展，支持JavaScript的大部分东西。
4、使用Connections连接handler
在前面的例子中，我们对某个信号signal，直接在当前对象下使用了on<Signal>形式的信号处理器，但是在某些情况下，我们不得不使用Connections来连接一个信号，比如说，多个对象连接到同一个信号时，在发射信号的对象作用域之外建立连接时，连接不是QML定义的对象（如在C++中定义的对象）时，举例说明：
import QtQuick 2.3
Item {
500; height: 150
Row {
spacing: 50
Rectangle {
100; height:100
color: "red"
MouseArea {
anchors.fill: parent
onClicked: parent.color=
Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
}
}
Rectangle {
id: rectYellow
100; height:100
color: "yellow"
MouseArea {
anchors.fill: parent
Connections {
onClicked: rectYellow.color=
Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
}
}
}
Rectangle {
id: rectGreen
100; height:100
color: "green"
MouseArea {
id: mouseArea
anchors.fill: parent
}
Connections {
target: mouseArea
onClicked: rectGreen.color=
Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
}
}
}
}
上述例子，列举了三种用法。第一种、第二种用法类似，都是直接在MouseArea作用域内连接，可以看出第二种方法的Connections可以省略，MouseArea指定了一块区域来处理鼠标事件，第三种方法是在MouseArea作用域之外建立连接，也就不得不用Connections，三种方法都是在鼠标点击时随机改变Rectangle的颜色。
5、自定义信号、函数
在QML中，我们可以自定义信号和函数，首先需要声明的是，不能像C++那样支持重载，语法如下：
signal <signalName>[([<type> <parameter name>[, …]])]
function <functionName>([<parameterName>[, ...]]) { <body> }
自定义的信号和函数都可以带参数，不同的是，信号要指明参数类型，而函数却用不着，这是为什么呢，因为函数的参数类型默认为万能的var类型，而且也没有像C++那样必须指明返回值类型，下面是一个综合的例子：
import QtQuick 2.3
Item {
600; height: 100
Rectangle {
id: rect1
100; height: 100
color: "lightblue"
Text {
id: text1
anchors.centerIn: parent
text: "custom
signal"
}
}
Rectangle {
id: rect2
100; height: 100
anchors.right: parent.right
color: "lightblue"
function changeColor(obj) {
obj.color = Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
}
Text {
id: text2
anchors.centerIn: parent
text: "custom
funtion"
}
}
Component {
id: colorComponent
Rectangle {
id: colorMaker
100; height:100
signal colorMade(color col) // 信号
MouseArea {
anchors.fill: parent
onClicked: colorMaker.colorMade(colorMaker.color) // 调用信号函数, 类似于发射信号 colorMade
}
}
}
Loader {
id: redLoader
anchors.left: rect1.right
anchors.leftMargin: 50
sourceComponent: colorComponent
onLoaded: item.color = "red"
}
Loader {
id: greenLoader
anchors.right: rect2.left
anchors.rightMargin: 50
sourceComponent: colorComponent
onLoaded: item.color = "green"
}
Connections { // 将目标对象信号与槽函数进行连接
target: redLoader.item
onColorMade: { // 处理目标对象信号的槽函数
rect2.changeColor(text2) //
text1.color = col
}
}
Connections { // 将目标对象信号与槽函数进行连接
target: greenLoader.item
onColorMade: { // 处理目标对象信号的槽函数
rect2.changeColor(text2)
text1.color = col
}
}
}
这段代码综合了许多知识点，貌似有点复杂，我们且看且分析。在rect2中自定义了一个函数changeColor(obj)，目的是随机改变obj的颜色，函数参数没有显式地指明其类型，是个动态类型。Component定义了一个组件，这里我们自定义的信号是colorMade(color col)，信号的参数类型是要明确指明的，信号处理器可以使用这个参数，在C++中使用emit关键字发送一个信号，在QML中信号就是个特殊的函数，可以像函数那样来使用。Loader动态加载一个组件，其item属性保存的就是加载的那个组件，然后用Connections来连接我们自定义的信号，在信号处理器中又调用了我们自定义的函数。
6、使用connect() / disconnect()
再介绍一个连接信号的方法，信号本身有connect() / disconnect()两个函数来连接或断开一个信号或方法，不多说了，直接看代码：
import QtQuick 2.3
Item {
id: item
signal employer(string name)
signal employee(string name)
// employee 的槽函数
onEmployee: console.log(name，“from signal”)
function employ(name) {
console.log(name，“from function”)
}
Component.onCompleted: {
// employer 信号 连接 多个槽函数或信号
item.employer.connect(employ)
item.employer.connect(employee)
employer("Bible")
}
}
例子中用信号分别连接了另外一个信号和函数，比较简单，不再介绍了。
============== End