QML学习八：QML端信号与槽交互

信号与槽交互"/>

QML学习八：QML端信号与槽交互

若该文为原创文章，转载请注明原文出处

Qt中的信号与槽，通常是⼀个信号SIGNAL和⼀个槽SLOT，通过connet连接，⽽QML中不需要再写槽函数，只需要在合适的地⽅告诉QML：如果事件信号产⽣则执⾏事件。

一、系统自带信号

在QML中，有多少系统的信号，比如Button, Mouse等，会自带信号，如果需要处理直接调用。

1、Button点击信号onClicked

/* main.qml */
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12Window {visible: truewidth: 640height: 480title: qsTr("Hello World")Button {width: 100height: 30text: "Button"onClicked: {console.log("onClicked test")}}
}

编译运行后，点击一次按钮，会打印一次信息。

二、自定义信号及连接

1、创建信号

格式：
signal 信号（参数...)调用时直接调用信号比如：
// 创建信号testSig
signal testSig(string s, int value)
// 调用
testSig("kaixin", "99")

2、信号处理

有两个方法可以处理信号：

一、以绑定的方式接收信号

格式：
信号.connect(function)  // 函数需要定义，也可以直接回调

完整代码：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12Window {visible: truewidth: 640height: 480title: qsTr("Hello World")signal testSig(string s, int value)function func(ss, ii) {console.log(ss,ii);}Button {width: 100height: 30text: "Button"onClicked: {testSig("kaixin", "99")}}Component.onCompleted: {testSig.connect(func);}
}

程序运行后，Button发送信号，组件完成后接收信号，并打印Log.

这种方式相对不好，在项目内很少使用，一般使用第二种。

二、Connections属性

使用Connections有两种格式：
格式一：

Connections {target: 发送者发送者信号处理器：{}  // 格式：在信号前⾯加on，然后信号⾸字母⼤写，
}
例：
Connections {target： windowonTestSig: {/* 事件处理 */}
}

使用这种方式，运行结果也是相同，但不推荐，在QT下会提示警搞，明确告诉不推使用这种方式来处理信号。

完整代码：

/* main.qml */
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12Window {id: windowvisible: truewidth: 640height: 480title: qsTr("Hello World")signal testSig(string s, int value)Button {width: 100height: 30text: "Button"onClicked: {testSig("kaixin", "99")}}Connections {target: windowonTestSig: {console.log(s, value);}}
}

格式二、

Connections {target: 发送者function 发送者信号处理器(参数...) {}  // 格式：在信号前⾯加on，然后信号⾸字母⼤写，
}
例：
Connections {target： windowfunction onTestSig(str, iVal) {}
}

完整代码：

/* main.qml */
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12Window {id: windowvisible: truewidth: 640height: 480title: qsTr("Hello World")signal testSig(string s, int value)Button {width: 100height: 30text: "Button"onClicked: {testSig("kaixin", "99")}}Connections {target: windowfunction onTestSig(str, iValue) {console.log(str, iValue);}}
}

所有的测试结果都是打印Log:

三、总结

自定义信号和槽，在项目中是很常使用的，Connections的方式一不建议使用。

如有侵权，请及时联系博主删除，VX：18750903063