QML中的信号和函数

简述:

在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属性值改变时，会自动发送一个该属性值变化的信号，对应的信号处理器的格式是onChanged，不管是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形式的信号处理器，但是在某些情况下，我们不得不使用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 [([ [, …]])]
function ([[, ...]]) {  }

自定义的信号和函数都可以带参数，不同的是，信号要指明参数类型，而函数却用不着，这是为什么呢，因为函数的参数类型默认为万能的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) // 调用信号函数, 类似于发射信号 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")
    }
}