QML中的信号和函数

来源：互联网发布：超声波传感器淘宝编辑：程序博客网时间：2024/05/16 04:48

在Qt C++中，signals & slots是其核心机制，是应用程序与UI组件交互的神经网络，同样在QML中，也有类似的signal & handler机制，signal信号就是我们常说的一种事件，可通过signal handler信号处理器来处理这个信号。当某个signal信号被发送时，对应的handler信号处理器也被触发，我们就可以在handler信号处理器中做一些事情，来处理这个signal信号事件。

1、“HelloWorld”信号简述

下面是一个简单的例子：

[plain] view plain copy
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内建的属性，还是我们自定义的属性，一旦属性值改变，都会触发相应的信号处理器，举例如下：

[plain] view plain copy
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：

[plain] view plain copy
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++中定义的对象）时，举例说明：

[plain] view plain copy
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++那样支持重载，语法如下：

[plain] view plain copy
signal <signalName>[([<type> <parameter name>[, …]])]  
function <functionName>([<parameterName>[, ...]]) { <body> }  

自定义的信号和函数都可以带参数，不同的是，信号要指明参数类型，而函数却用不着，这是为什么呢，因为函数的参数类型默认为万能的var类型，而且也没有像C++那样必须指明返回值类型，下面是一个综合的例子：

[plain] view plain copy
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()两个函数来连接或断开一个信号或方法，不多说了，直接看代码：

[plain] view plain copy
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

0 0