在现代 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++ 信号 |
 测试方案)