在現代 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++ 信號

---