在现代 Qt 开发中，QML（Qt Quick）负责 UI 层，C++ 负责逻辑层或后端服务层 是一种非常流行的架构方式。

这一模式下，信号与槽机制在 QML 与 C++ 间的前后端通信中扮演桥梁角色，是实现数据驱动界面更新、事件响应、属性绑定的核心手段。

---

📖 一、通信目标概览

通信方向	技术方式
QML → C++	调用槽函数，或触发 C++ 信号
C++ → QML	发出信号，QML 使用 onXyzChanged 响应
属性绑定	使用 Q_PROPERTY + NOTIFY

---

📦 二、基本实现结构

我们将实现一个简单的交互：

• C++ 后端类 Backend 中定义一个计数器属性 counter；
• QML 前端界面显示该值；
• QML 按钮点击后触发 C++ 的槽函数修改值；
• C++ 属性变化通过信号通知 QML 自动刷新 UI。

---

🛠 三、完整代码示例

✅ 1. Backend.h

#ifndef BACKEND_H
#define BACKEND_H#include <QObject>class Backend : public QObject {Q_OBJECTQ_PROPERTY(int counter READ counter WRITE setCounter NOTIFY counterChanged)public:explicit Backend(QObject *parent = nullptr);int counter() const;void setCounter(int value);Q_INVOKABLE void increment();  // QML 可调用方法signals:void counterChanged();private:int m_counter;
};#endif // BACKEND_H

---

✅ 2. Backend.cpp

#include "Backend.h"Backend::Backend(QObject *parent) : QObject(parent), m_counter(0) {}int Backend::counter() const {return m_counter;
}void Backend::setCounter(int value) {if (m_counter != value) {m_counter = value;emit counterChanged();  // 通知 QML 自动更新绑定值}
}void Backend::increment() {setCounter(m_counter + 1);
}

---

✅ 3. main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include "Backend.h"int main(int argc, char *argv[]) {QGuiApplication app(argc, argv);QQmlApplicationEngine engine;// 创建 Backend 实例Backend backend;// 注册给 QML 上下文engine.rootContext()->setContextProperty("backend", &backend);engine.load(QUrl(QStringLiteral("qrc:/main.qml")));if (engine.rootObjects().isEmpty())return -1;return app.exec();
}

---

✅ 4. main.qml

import QtQuick 2.15
import QtQuick.Controls 2.15ApplicationWindow {width: 300height: 200visible: truetitle: "QML ↔ C++ 信号槽通信"Column {anchors.centerIn: parentspacing: 20Text {font.pixelSize: 24text: "Counter: " + backend.counter}Button {text: "增加计数器"onClicked: backend.increment()}}// 监听属性变化（可选）Connections {target: backendonCounterChanged: {console.log("Counter updated to", backend.counter)}}
}

---

💡 四、关键技术点解读

1. Q_PROPERTY + NOTIFY

使 counter 成为 QML 可读写属性，支持绑定更新。

2. Q_INVOKABLE

让 increment() 成为 QML 可直接调用的方法。

3. setContextProperty()

将 C++ 对象注册到 QML 的命名空间中（backend）。

4. Connections 对象（可选）

在 QML 中响应 C++ 的信号，可以在不绑定属性的场景中使用。

---

🧠 五、进阶：QML 调用槽 / 发射信号（双向通信）

✅ QML 发出信号 → C++ 槽响应

QML：

signal sendData(string msg)Button {text: "发送数据"onClicked: sendData("Hello C++")
}

C++：

QObject* root = engine.rootObjects().first();
QObject::connect(root, SIGNAL(sendData(QString)),backendObj, SLOT(receiveData(QString)));

---

✅ C++ 发出信号 → QML onXxx 响应

QML：

Connections {target: backendonCustomSignal: {console.log("接收到来自 C++ 的信号")}
}

C++：

emit customSignal();

---

📊 六、常见面试问题与答题建议

问题	答题要点
如何将 C++ 属性绑定到 QML？	使用 Q_PROPERTY + NOTIFY，通过 setContextProperty 注册对象
QML 如何调用 C++ 方法？	使用 Q_INVOKABLE 修饰或将槽暴露
C++ 如何通知 QML 属性变化？	使用信号，如 emit counterChanged()
如何实现 QML → C++ 的通信？	QML 信号连接到 C++ 槽函数
C++ → QML 怎么连接？	通过 Connections、属性绑定或 QMetaObject::invokeMethod()

---

✅ 七、总结

技术点	用途
Q_PROPERTY	暴露属性给 QML
Q_INVOKABLE	暴露方法给 QML
NOTIFY	让属性支持绑定/变化通知
setContextProperty()	注册对象到 QML 上下文
Connections 组件	响应 C++ 信号

---