[QML] summary of QML signal and event processing mechanism

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.

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.

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.

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

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 } }

//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) } }

[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)

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)

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]

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) //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)

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]

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)

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

0 this is Window signal : returnBtnClicked handler

! [tut tut tut]

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

[OK, the text is finished]

20 November 2021, 18:03 | Views: 5777