[QML] summary of QML signal and event processing mechanism

1, Introduction

QML has a signal and handler mechanism, in which the signal is an event and responds to the signal through the signal handler. When a signal is issued, the corresponding signal handler is called. Placing logic (such as scripts or other operations) in the handler allows the component to respond to events.

2, Receive signals with signal processing program

To receive a notification when a specific signal is sent for a specific object, the object definition should declare a signal handler named < signal >, where < signal > is the name of the signal (Note: the initial letter must be capitalized). The signal handler should contain JavaScript code to execute when calling the signal handler.

3, Property change signal handler

When the value of the QML attribute changes, a signal is automatically sent. This type of signal is a property change signal. The signal handler of these signals is written in the form of on < property > changed, where < property > is the name of the property, and the first letter must be capitalized.

4, Signal parameters

The signal may have parameters. To access these functions, you should assign a function to the handler.

4-1. Signal definition

Then you need to define a signal in the following format:

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

In C + +, use the emit keyword to send signals; In qml, signals are emitted as method calls.

Note: it is an error to attempt to declare two signals or methods with the same name in a block of the same type. However, a new signal may reuse the name of an existing signal on this type.

The following code is an example of defining a signal

//ReturnBtn.qml file

    //An msgChange signal is defined here, which has a parameter name of type sting and a parameter age of type int
	signal msgChange(name:string,age:int)
    MouseArea {
        anchors.fill: returnIcon_128

        onClicked: {
        	//When you click the MouseArea object type, call the msgChange function and pass in the "iriczhao" and 999 parameters
            msgChange("iriczhao",999)
        }
        onPressed: {
            glow.visible = true
            glow.color = "lightskyblue"
        }
        onReleased:{
            glow.visible = false
        }
    }
4-2. Define signal processing function and receive signal parameters

//test.qml file

Window {
    id: window
    width: 640
    height: 480
    visible: true
    color: "#4c79ef"
    title: qsTr("Hello World")

    ReturnBtn {
        id: returnBtn
        x: 245
        y: 204
        width: 100
        height: 47
        anchors.verticalCenter: parent.verticalCenter
        anchors.horizontalCenter: parent.horizontalCenter
	   //Here, in the msgChange signal processing function, use function() to receive the two parameters brought in by the msgChange signal
        onMsgChange: function(name,age){console.log("recv " + name + " " + age)}
    }
}

[note]

1. The name of the formal parameter in the function does not have to match the name in the signal.

2. If you do not need to process all the parameters, you can omit the following parameters. For example, if you only want to receive the name parameter in the onMsgChange signal processing function and do not accept the age parameter, you can write as follows:

onMsgChange: function(name){console.log("recv "  + " " + name)}

3. For an unnecessary parameter in function (), you can use the underscore () to occupy the parameter, so as to tell the qml engine to ignore the parameter. For example, if you don't want to receive the name parameter in the onMsgChange signal processing function, you can write this:

 onMsgChange: function(_,age){console.log("recv "  + " " + age)}
5, Create a signal connection using the Connections qml type

In some cases, the signal needs to be accessed outside the object sending the signal. In this case, the Connections type provided by QtQuick module can be used to connect to any object signal. Moreover, the connected object can receive any signal from its specified target. In this way, it is not necessary to write the signal processing function in the corresponding object type block [this is more important]

6, Connection signal processing function

Additional signal handlers receive signals from additional types rather than from objects that declare handlers.

For example, Component.onCompleted is an additional signal handler. It is usually used to execute some JavaScript code when the creation process is completed. For example, the following code:

import QtQuick 2.0
import QtQuick.Window 2.15
import "Components"

Window {
    id: window
    width: 640
    height: 480
    visible: true
    color: "#4c79ef"
    title: qsTr("Hello World")

    ReturnBtn {
        id: returnBtn
        x: 245
        y: 204
        width: 100
        height: 47
        anchors.verticalCenter: parent.verticalCenter
        anchors.horizontalCenter: parent.horizontalCenter

        onMsgChange: function(name){console.log("recv "  + " " + name)}
		
		//Additional signal processing functions
         Component.onCompleted: {
             console.log("ReturnBtn")
         }
    }
	//Additional signal processing functions
    Component.onCompleted: {
        console.log("Window")
    }
}

Here will be printed:

​	qml: Window

​	qml: ReturnBtn

(Note: how to print out Window first and then return BTN, ha ha. It is related to qml object tree)

7, Connecting signals to methods and signals using connect
7-1. Connection method

The signal object has a connect() method to connect a signal to a method or another signal. When a signal is connected to a method, as long as a signal is sent, the method will be called automatically. This mechanism enables the signal to be received by the method rather than the signal handler.

Then, let's modify the ReturnBtn.qml file again. The code is as follows:

···

Window {
    id: window
    width: 640
    height: 480
    visible: true
    color: "#4c79ef"
    title: qsTr("Hello World")

    ReturnBtn {
        id: returnBtn
        x: 245
        y: 204
        width: 100
        height: 47
        anchors.verticalCenter: parent.verticalCenter
        anchors.horizontalCenter: parent.horizontalCenter
    }

    Component.onCompleted: {
        //In the component loading completion signal processing function, create the msgChange signal of the returnBtn object and the mschangehandler JavaScript
        //Function connection
        returnBtn.msgChange.connect(msgChangeHandler)
    }
	
	//Define msgChangeHandler function
    function msgChangeHandler(messae,value)
    {
        console.log("recv param :" + messae +" " + value);
    }
}

In many cases, it is sufficient to receive signals through the signal handler without using the connect() function. However, using the connect method allows multiple methods to receive signals, as shown earlier, which is impossible for the signal handler because they must be uniquely named.

In addition, the connect method is useful when connecting signals to dynamically created objects.

Note: you can use the disconnect() function to disconnect the signal from the method. The following code:

    function removeMsgChangeSignal(){
        returnBtn.msgChange.connect(msgChangeHandler)
    }

Through practice, it is found that if a signal is associated with the signal processing function and the method of using the connect() function at the same time, there will be problems, [HA HA]

7-2. Connect to signal

By connecting signals to other signals, the connect() method can form different signal chains. Similarly, modify the ReturnBtn.qml file as follows:

Window {
    id: window
    width: 640
    height: 480
    visible: true
    color: "#4c79ef"
    title: qsTr("Hello World")

    signal returnBtnClicked()

    ReturnBtn {
        id: returnBtn
        x: 245
        y: 204
        width: 100
        height: 47
        anchors.verticalCenter: parent.verticalCenter
        anchors.horizontalCenter: parent.horizontalCenter
        onMsgChange: console.log("ReturnBtn")
    }

    Component.onCompleted: {
        returnBtn.msgChange.connect(returnBtnClicked)
    }

    onReturnBtnClicked:
    {
        console.log("this is Window signal : returnBtnClicked handler")
    }
}

After clicking this button, it will print:

ReturnBtn

this is Window signal : returnBtnClicked handler

However, if the omMsgChange signal processing function reads as follows:

 onMsgChange: function (name,age){console.log("recv " << name + " " + age)}

|||||||||||||||||||||||||||||||||||||||||||||||||||||||Seems to output:

0

this is Window signal : returnBtnClicked handler

! [tut tut tut]

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

[OK, the text is finished]

Tags: C++ Qt qml

Posted on Sat, 20 Nov 2021 18:03:10 -0500 by Shaun13