在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 {
- width: 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 {
- width: 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
- width: 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 {
- width: 500; height: 150
-
- Row {
- spacing: 50
-
- Rectangle {
- width: 100; height:100
- color: "red"
-
- MouseArea {
- anchors.fill: parent
- onClicked: parent.color=
- Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
- }
- }
-
- Rectangle {
- id: rectYellow
- width: 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
- width: 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 {
- width: 600; height: 100
-
- Rectangle {
- id: rect1
- width: 100; height: 100
- color: "lightblue"
-
- Text {
- id: text1
- anchors.centerIn: parent
- text: "custom \n signal"
- }
- }
-
- Rectangle {
- id: rect2
- width: 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 \n funtion"
- }
- }
-
- Component {
- id: colorComponent
-
- Rectangle {
- id: colorMaker
- width: 100; height:100
-
- signal colorMade(color col)
-
- MouseArea {
- anchors.fill: parent
- onClicked: colorMaker.colorMade(colorMaker.color)
- }
- }
- }
-
- 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)
-
- onEmployee: console.log(name,“from signal”)
-
- function employ(name) {
- console.log(name,“from function”)
- }
-
- Component.onCompleted: {
- item.employer.connect(employ)
- item.employer.connect(employee)
- employer("Bible")
- }
- }
例子中用信号分别连接了另外一个信号和函数,比较简单,不再介绍了。
转载:http://blog.csdn.net/iEearth/article/details/41801333