Qml与C++交互4：C++信号与Qml的槽函数的连接

更多资讯、知识，微信公众号搜索：“上官宏竹”。

---

使用场景

比如在C++中更改某些数据，实时更新到UI界面中。

整体思路

C++中建立一个信号并发送，在Qml中使用Connections建立一个对应的响应槽函数，当C++发送信号时，触发Qml对应的槽函数。

1、建立C++信号

首先我们声明一个信号如下，然后在点击的槽函数中将信号发出去。

{
signals:
    void myClassInfoSignal();	// C++的信号名
}

void MyClass::myRectSlot(int count)
{
    qDebug()<<__FUNCTION__<<" count: "<<count;

    emit myClassInfoSignal();	// 发射信号
}

2、C++实例注册到qml

使用qmlRegisterSingletonInstance方法或者engine.rootContext()->setContextProperty的方法，将C++中的实例注册到qml中。

注意：在Windows系统上使用engine.rootContext()->setContextProperty的方法，会出现如下的告警错误：

QML Connections: Detected function "onMyClassInfoSignal" in Connections element. This is probably intended to be a signal handler but no signal of the target matches the name.
ReferenceError: MyclassApi is not defined

大家可以改用qmlRegisterSingletonInstance方法进行注册，在import注册号的模块名后，对应的告警会消失；或者先进行属性设置即先调用engine.rootContext()->setContextProperty方法，然后再加载qml文件。

engine.load(url);

auto root = engine.rootObjects();
auto button = root.first()->findChild<QObject*>("mybutton");

3、qml中建立槽函数

Connections类型

简单说下Connections类型。Connections分为两部分：一个是target属性，表示发出信号的对象。另一个是对应信号的槽函数。

上图表示targetA发出两个信号asignal1和asignal2，然后对应的Connections可以写作如下，来接收处理这两个信号：

Connections {
	target: targetA;
	function onAsignal1() {
		// 信号处理槽函数
	}
	function onAsignal2() {
		// 信号处理槽函数
	}	
}

建立槽函数

我们使用Connections类型，来达到C++信号和Qml槽函数的自动连接处理。Connections类型中的target : Object，表示与来自哪一个对象的信号连接。而槽函数的命名，则需要以小写的on开头，并连接C++的信号函数名字，且第一个字母需要大写。整个槽函数如下：

Connections {
	target: MyclassApi	// 已注册的C++中的对象名字

	// 槽函数 on + C++的信号名称（首字母大写）
	function onMyClassInfoSignal() {
		console.log("haha C++ signal is coming...")
	}
}

运行结果

MyClass::myRectSlot  count:  1
qml: haha C++ signal is coming...
MyClass::myRectSlot  count:  2
qml: haha C++ signal is coming...

使用属性

在C++类中，可以使用Q_PROPERTY属性定义读写接口以及属性变化的信号，当这个信号与qml的槽函数连接时，需要注意，如果是使用QtCreator自动生成的接口，那么READ接口不能返回引用，否则在qml中调用这个READ接口的返回值是未定义；并且接口定义前需要加上Q_INVOKABLE，否则qml无法识别这个接口。

比如这个属性定义：Q_PROPERTY(QString key READ getKey WRITE setKey NOTIFY keyChanged)，自动生成的READ接口如下：

// 头文件声明
const QString& getKey() const;

// 源文件实现
const QString& MyLogic::getKey() const
{
    return m_key;
}

需要将上述的定义和实现更改为：

// 头文件声明
Q_INVOKABLE const QString getKey() const;

// 源文件实现
const QString MyLogic::getKey() const
{
    return m_key;
}

---

完整实现可以微信搜索公众号：“上官宏竹”，或者扫下面的二维码，关注并回复：“qml_4”，获取资源链接。有任何疑问也可以公众号里留言咨询。

---

更多资讯、知识，微信公众号搜索：“上官宏竹”。