QML 信号和处理程序事件系统

信号和处理程序事件系统

应用程序和用户界面组件需要使用信号和信号处理程序相互通信。发送信号就会调用其相关联的处理逻辑进行处理。

使用信号处理程序接收信号

为了在特定对象发出特定信号时接收通知，对象定义应声明一个名为on <Signal>的信号处理程序，其中<Signal>是信号的名称，首字母大写。信号处理程序应包含在调用信号处理程序时要执行的JavaScript代码。

import QtQuick 2.14
import QtQuick.Controls 2.14

Rectangle {
    id: rect
    width: 250; height: 250

    Button {
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        text: "Change color!"
        onClicked: {  //点击按钮时发送clicked信号，定义onClicked进行处理
            rect.color = Qt.rgba(Math.random(), Math.random(), Math.random(), 1);
        }
    }
}

属性更改信号处理程序

当对象的属性发生变化时，QML引擎会自动为对象添加属性更改信号，并发送信号，这些信号的信号处理程序以on <Property> Changed的形式编写，其中<Property>是属性的名称，首字母大写。

import QtQuick 2.14

Rectangle {
    id: rect
    width: 100; height: 100

    TapHandler {
        //点击屏幕时，修改了pressed属性，触发onPressedChanged
        onPressedChanged: console.log("taphandler pressed?", pressed)
    }
}

使用 Connections关联信号

在某些情况下，可能希望访问发出该信号的对象之外的信号。为此，该QtQuick模块提供用于连接任意对象信号的Connections类型。可以接收来自它的指定的任何信号的目标。

import QtQuick 2.14
import QtQuick.Controls 2.14

Rectangle {
    id: rect
    width: 250; height: 250

    Button {
        id: button
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        text: "Change color!"
    }

    Connections {  //关联button的clicked信号
        target: button
        onClicked: {
            rect.color = Qt.rgba(Math.random(), Math.random(), Math.random(), 1);
        }
    }
}

附加信号处理

从附加类型接收一个信号并进行处理

import QtQuick 2.14

Rectangle {
    width: 200; height: 200
    color: Qt.rgba(Qt.random(), Qt.random(), Qt.random(), 1)

    Component.onCompleted: {  //Component 附加类型
        console.log("The rectangle's color is", color)
    }
}

自定义类型添加信号

可以通过signal关键字将信号添加到自定义QML类型。

定义新信号的语法为：

signal <name>[([<type> <parameter name>[, ...]])]

示例

// SquareButton.qml
import QtQuick 2.14

Rectangle {
    id: root

    signal activated(real xPosition, real yPosition)  //定义一个信号 
    property point mouseXY
    property int side: 100
    width: side; height: side

    TapHandler {
        id: handler
        onTapped: root.activated(mouseXY.x, mouseXY.y)  //发送信号
        onPressedChanged: mouseXY = handler.point.position
    }
}

// myapplication.qml
SquareButton {
//处理activated信号
    onActivated: console.log("Activated at " + xPosition + "," + yPosition)
}

信号连接方法和信号

信号对象使用connect()连接方法或另一个信号。当信号连接到方法时，只要发出信号，该方法就会自动调用。这种机制使信号可以通过方法而不是信号处理程序来接收

import QtQuick 2.14

Rectangle {
    id: relay

    signal messageReceived(string person, string notice)  //定义信号

    Component.onCompleted: {
        relay.messageReceived.connect(sendToPost)   //关联信号
        relay.messageReceived.connect(sendToTelegraph)
        relay.messageReceived.connect(sendToEmail)
        relay.messageReceived("Tom", "Happy Birthday")
    }

    function sendToPost(person, notice) {
        console.log("Sending to post: " + person + ", " + notice)
    }
    function sendToTelegraph(person, notice) {
        console.log("Sending to telegraph: " + person + ", " + notice)
    }
    function sendToEmail(person, notice) {
        console.log("Sending to email: " + person + ", " + notice)
    }
}

使用disconnect()断开信号

Rectangle {
    id: relay
    //...

    function removeTelegraphSignal() {
        relay.messageReceived.disconnect(sendToTelegraph)
    }
}

信号关联信号

import QtQuick 2.14

Rectangle {
    id: forwarder
    width: 100; height: 100

    signal send()
    onSend: console.log("Send clicked")

    TapHandler {
        id: mousearea
        anchors.fill: parent
        onTapped: console.log("Mouse clicked")
    }

    Component.onCompleted: {
        mousearea.tapped.connect(send)   //关联信号 
    }
}