面试问题详解七：Qt 信号与槽 + QML 的结合详解

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

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

📖 一、通信目标概览

📦 二、基本实现结构

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

• 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_OBJECT
    Q_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.15

ApplicationWindow {
    width: 300
    height: 200
    visible: true
    title: "QML ↔ C++ 信号槽通信"

    Column {
        anchors.centerIn: parent
        spacing: 20

        Text {
            font.pixelSize: 24
            text: "Counter: " + backend.counter
        }

        Button {
            text: "增加计数器"
            onClicked: backend.increment()
        }
    }

    // 监听属性变化（可选）
    Connections {
        target: backend
        onCounterChanged: {
            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: backend
    onCustomSignal: {
        console.log("接收到来自 C++ 的信号")
    }
}

C++：

emit customSignal();

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

✅ 七、总结