qml界面和c++后端程序交互

慢吞云雾缓吐愁  论坛元老 | 2025-2-19 17:10:08 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1531|帖子 1531|积分 4593

qml界面和c++后端程序交互


  
1.C++ 数据袒露给qml进行交互

注意事项：
  1. 要想c++类传递到qml,必须是QObject类型的；如果是QWidget或者其他界面类型的c++类则不生效
复制代码
（1）setContextProperty方式（在c++端实例化对象）

serialportmanager.h
  1. #ifndef SERIALPORTMANAGER_H
  2. #define SERIALPORTMANAGER_H
  4. #include <QObject>
  5. #include <QStringList>
  6. #include <QSerialPortInfo>
  7. #include <QTimer>
  8. #include <QDebug>
  10. class SerialPortManager : public QObject
  11. {
  12.     Q_OBJECT
  13.     Q_PROPERTY(QStringList portList READ portList NOTIFY portListChanged)
  15. public:
  16.     explicit SerialPortManager(QObject *parent = nullptr);
  17.     QStringList portList() const;
  19. signals:
  20.     void portListChanged();  // 当串口列表更新时发送信号
  22. public slots:
  23.     void updatePortList();   // 更新串口列表
  25. private:
  26.     QStringList m_portList;  // 存储当前串口列表
  27.     QTimer *m_timer;         // 用于定时更新串口列表
  28.     bool m_isFirstUpdate = true;    // 标志是否是第一次获取串口列表
  29. };
  31. #endif // SERIALPORTMANAGER_H
复制代码
重点：

serialportmanager.cpp
  1. #include "serialportmanager.h"
  2. #include <QSerialPortInfo>
  3. #include <QTimer>
  5. SerialPortManager::SerialPortManager(QObject *parent)
  6.     : QObject(parent), m_timer(new QTimer(this)), m_isFirstUpdate(true)
  7. {
  8.     // 初始时立即获取可用串口列表，并发送信号
  9.     updatePortList();
  11.     // 设置定时器每秒更新一次串口列表
  12.     connect(m_timer, &QTimer::timeout, this, &SerialPortManager::updatePortList);
  13.     m_timer->start(1000);  // 每1000毫秒更新一次串口列表
  14. }
  16. QStringList SerialPortManager::portList() const {
  17.     return m_portList;
  18. }
  20. void SerialPortManager::updatePortList() {
  21.     QStringList ports;
  23.     // 获取所有可用的串口并更新到 ports 列表中
  24.     foreach (const QSerialPortInfo &info, QSerialPortInfo::availablePorts()) {
  25.         ports.append(info.portName());
  26.     }
  28.     // 对串口列表进行排序，确保是从小到大的顺序
  29.     ports.sort();
  31.     // 第一次获取串口列表时，直接发出信号
  32.     if (m_isFirstUpdate) {
  33.         m_portList = ports;
  34.         emit portListChanged();  // 发出串口列表已更新的信号
  35.         qDebug() << "First update, signal emitted.";
  36.         m_isFirstUpdate = false; // 标记为非第一次更新
  37.     }
  38.     else {
  39.         // 如果串口列表发生变化，则更新并发出信号
  40.         if (ports != m_portList) {
  41.             m_portList = ports;
  42.             emit portListChanged();  // 发出串口列表已更新的信号
  43.             qDebug() << "List updated, signal emitted.";
  44.         }
  45.     }
  46. }
复制代码

main.cpp
  1. #include <QGuiApplication>
  2. #include <QQmlApplicationEngine>
  3. #include <QGuiApplication>
  4. #include <QQmlApplicationEngine>
  5. #include <QQmlContext>
  6. #include "SerialPortManager.h"
  7. int main(int argc, char *argv[])
  8. {
  9.     QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
  11.     QGuiApplication app(argc, argv);
  13.     QQmlApplicationEngine engine;
  14.     const QUrl url(QStringLiteral("qrc:/main.qml"));
  15.     QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
  16.                      &app, [url](QObject *obj, const QUrl &objUrl) {
  17.         if (!obj && url == objUrl)
  18.             QCoreApplication::exit(-1);
  19.     }, Qt::QueuedConnection);
  23.     // 创建 SerialPortManager 实例
  24.     SerialPortManager serialPortManager;
  25.     // 将 SerialPortManager 实例暴露给 QML
  26.     engine.rootContext()->setContextProperty("serialPortManager", &serialPortManager);
  28.     // 加载 QML 文件
  29.     engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
  32.     return app.exec();
  33. }
复制代码

main.qml
  1. import QtQuick 2.12
  2. import QtQuick.Window 2.12
  3. import QtQuick.Controls 2.12
  4. //import QtQuick.Dialogs 1.12
  5. ApplicationWindow {
  6.     visible: true
  7.     width: 640
  8.     height: 480
  9.     title: "Serial Port List"
  11.     ListView {
  12.         anchors.fill: parent
  13.         model: ListModel {
  14.             // 绑定到 SerialPortManager 的 portList
  15.             ListElement { portName: "COM1" }
  16.             ListElement { portName: "COM2" }
  17.         }
  19.         delegate: Item {
  20.             width: parent.width
  21.             height: 50
  23.             Text {
  24.                 anchors.centerIn: parent
  25.                 text: portName
  26.             }
  27.         }
  29.         // 定义一个更新串口列表并刷新模型的函数
  30.         function updateSerialPortList() {
  31. //            console.log("portListChanged 信号已触发");
  33.             // 清空现有模型
  34.             model.clear();
  35. //            console.log("模型已清空");
  37.             // 打印获取到的可用串口列表
  38.             console.log("获取到的串口列表: " + serialPortManager.portList.join(", "));
  40.             // 更新模型，填充新的串口列表
  41.             for (var i = 0; i < serialPortManager.portList.length; i++) {
  42.                 console.log("串口名称: " + serialPortManager.portList[i]);
  43.                 model.append({ portName: serialPortManager.portList[i] });
  44.             }
  45. //            console.log("模型更新完毕");
  46.         }
  47.         Component.onCompleted: {
  48. //            console.log("Component.onCompleted: 组件已完成加载");
  50.             // 检查 serialPortManager 是否已初始化
  51.             if (serialPortManager && serialPortManager.portList) {
  52. //                console.log("serialPortManager 已初始化，开始处理 portList");
  54.                 // 连接 portListChanged 信号到独立的更新函数
  55.                 serialPortManager.portListChanged.connect(updateSerialPortList);
  57.                 // 主动调用 C++ 端获取串口列表
  58. //                console.log("调用 C++ 端 updatePortList 获取串口列表");
  59.                 updateSerialPortList();
  60.             } else {
  61.                 // 如果 C++ 端尚未初始化，打印提示
  62.                 console.log("后端程序尚未初始化");
  63.             }
  64.         }
  67.     }
  68. }
复制代码

征象：
初始状态：

串口变化时：

总结:
  1. c++注册并实例化对象；  发送信号
  3. qml界面connect信号并实现槽函数响应；
  6. 注册后的c++对象，qml可以进行访问
复制代码
（2）使用qmlRegisterType方式

1. qmlRegisterType 概述
qmlRegisterType 是 Qt 的一项功能，允许我们将 C++ 类注册到 QML 中。通过这种方式，QML 可以实例化 C++ 类，并与其交互。此机制非常适用于将 C++ 的复杂逻辑袒露给 QML，以便在 UI 层中使用。
在 qmlRegisterType 中，我们可以指定 C++ 类的名称、QML 类型、版本以及需要注册的元类型。这使得 C++ 类能够成为 QML 环境中的一个平凡对象。

  • 基本步调
为了实现 C++ 和 QML 的数据通信，基本的步调如下：

  • 定义 C++ 类：首先，我们定义一个包罗数据成员、信号、槽和 Q_PROPERTY 的 C++ 类。
  • 注册 C++ 类到 QML：使用 qmlRegisterType 将 C++ 类注册到 QML。
  • 在 QML 中使用 C++ 类：在 QML 中创建和使用 C++ 类的实例，并通过信号与槽机制进行数据通信。
  • 示例实现
下面我们通过一个简单的计数器示例，演示怎样使用 qmlRegisterType 实现 C++ 和 QML 的数据通信。
3.1 C++ 类定义
首先，我们定义一个 C++ 类，包罗一个整数属性和一个信号，用来更新计数器的值。
  1. cppCopy Code// counter.h
  2. #ifndef COUNTER_H
  3. #define COUNTER_H
  5. #include <QObject>
  7. class Counter : public QObject
  8. {
  9.     Q_OBJECT
  10.     Q_PROPERTY(int count READ count WRITE setCount NOTIFY countChanged)
  12. public:
  13.     explicit Counter(QObject *parent = nullptr);
  15.     int count() const;
  16.     void setCount(int newCount);
  18. signals:
  19.     void countChanged();
  21. private:
  22.     int m_count;
  23. };
  25. #endif // COUNTER_H
  26. cppCopy Code// counter.cpp
  27. #include "counter.h"
  29. Counter::Counter(QObject *parent) : QObject(parent), m_count(0)
  30. {
  31. }
  33. int Counter::count() const
  34. {
  35.     return m_count;
  36. }
  38. void Counter::setCount(int newCount)
  39. {
  40.     if (m_count != newCount) {
  41.         m_count = newCount;
  42.         emit countChanged();
  43.     }
  44. }
复制代码
3.2 注册 C++ 类到 QML
在应用程序的入口文件中（通常是 main.cpp），我们通过 qmlRegisterType 注册 C++ 类到 QML 环境中。
  1. cppCopy Code#include <QGuiApplication>
  2. #include <QQmlApplicationEngine>
  3. #include <QQmlContext>
  4. #include "counter.h"
  6. int main(int argc, char *argv[])
  7. {
  8.     QGuiApplication app(argc, argv);
  10.     // 注册 C++ 类到 QML
  11.     qmlRegisterType<Counter>("com.example", 1, 0, "Counter");
  13.     QQmlApplicationEngine engine;
  15.     // 加载 QML 文件
  16.     engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
  17.    
  18.     return app.exec();
  19. }
复制代码
在这里，qmlRegisterType<Counter>("com.example", 1, 0, "Counter"); 将 Counter 类注册到 QML 中，并指定了模块名为 com.example，版本为 1.0，QML 中对应的类型名为 Counter。
3.3 在 QML 中使用 C++ 类
接下来，在 QML 中创建一个 Counter 对象，并与其进行交互。我们可以使用 Text 元向来显示 count 属性，并使用按钮来更新计数器的值。
  1. qmlCopy Code// main.qml
  2. import QtQuick 2.15
  3. import QtQuick.Controls 2.15
  4. import com.example 1.0
  6. ApplicationWindow {
  7.     visible: true
  8.     width: 640
  9.     height: 480
  11.     // 创建 Counter 对象
  12.     Counter {
  13.         id: counter
  14.     }
  16.     Column {
  17.         anchors.centerIn: parent
  19.         Text {
  20.             text: "Count: " + counter.count
  21.             font.pixelSize: 32
  22.         }
  24.         Button {
  25.             text: "Increment"
  26.             onClicked: counter.setCount(counter.count + 1)
  27.         }
  28.     }
  29. }
复制代码
在这里，Counter { id: counter } 创建了一个 Counter 对象，并使用 counter.count 显示当前计数值。点击按钮时，onClicked 触发 counter.setCount(counter.count + 1)，更新 count 属性的值。由于我们在 C++ 类中使用了 Q_PROPERTY 和信号机制，当 count 属性变化时，QML 主动更新显示。
3.4 运行效果
当你运行这个应用时，QML 界面会显示一个初始计数值 0，并有一个按钮“Increment”。每点击一次按钮，计数值会增加并显示在界面上。C++ 和 QML 之间通过信号与属性的绑定实现了及时的数据通信。
2.qml数据袒露给c++

2.1. C++ 获取 QML 中的对象

C++ 可以通过 QQmlApplicationEngine 或 QQmlComponent 来加载 QML 文件，并通过 rootObject() 或 findChild() 方法获取 QML 对象。
示例代码：

假设我们有一个 QML 文件 Main.qml，此中有一个 Text 对象，我们希望从 C++ 代码中访问并修改它。
  1. // Main.qml
  2. import QtQuick 2.15
  3. import QtQuick.Controls 2.15
  5. ApplicationWindow {
  6.     visible: true
  7.     width: 640
  8.     height: 480
  9.     title: "QML to C++ Example"
  11.     Text {
  12.         id: label
  13.         text: "Hello from QML!"
  14.         anchors.centerIn: parent
  15.     }
  16. }
复制代码
在 C++ 中，我们可以通过以下代码获取并修改这个 Text 对象的 text 属性。
  1. // main.cpp
  2. #include <QCoreApplication>
  3. #include <QQmlApplicationEngine>
  4. #include <QQmlContext>
  5. #include <QQuickItem>
  7. int main(int argc, char *argv[])
  8. {
  9.     QCoreApplication app(argc, argv);
  11.     QQmlApplicationEngine engine;
  13.     // 加载 QML 文件
  14.     engine.load(QUrl(QStringLiteral("qrc:/Main.qml")));
  16.     // 获取根对象
  17.     QObject *rootObject = engine.rootObjects().first();
  19.     // 查找 QML 中的 Text 对象
  20.     QObject *labelObject = rootObject->findChild<QObject*>("label");
  22.     if (labelObject) {
  23.         // 修改 QML 中的 Text 对象的 text 属性
  24.         labelObject->setProperty("text", "Modified by C++!");
  25.     }
  27.     return app.exec();
  28. }
复制代码
2.2. 步调分析



  • 加载 QML 文件：通过 engine.load() 加载 QML 文件。
  • 获取根对象：rootObjects().first() 获取 QML 文件中定义的根对象（ApplicationWindow）。
  • 查找 QML 对象：通过 findChild<QObject*>("label") 查找 id 为 label 的 QML 对象。
  • 修改属性：通过 setProperty 修改 QML 对象的属性，在这里我们修改了 Text 对象的 text 属性。
2.3. 通过信号与槽交互

C++ 也可以连接 QML 中的信号与槽。QML 中的信号可以通过 QObject::connect 方法连接到 C++ 的槽函数。
示例：

假设 QML 中有一个按钮，当按钮被点击时，我们希望 C++ 能够接收到这个信号并进行处理：
  1. // Main.qml
  2. import QtQuick 2.15
  3. import QtQuick.Controls 2.15
  5. ApplicationWindow {
  6.     visible: true
  7.     width: 640
  8.     height: 480
  9.     title: "Signal from QML to C++"
  11.     Button {
  12.         text: "Click Me"
  13.         onClicked: {
  14.             console.log("Button clicked!")
  15.         }
  16.     }
  17. }
复制代码
在 C++ 中，我们可以连接 QML 中的 onClicked 信号：
  1. // main.cpp
  2. #include <QCoreApplication>
  3. #include <QQmlApplicationEngine>
  4. #include <QQmlContext>
  5. #include <QQuickItem>
  7. class MyObject : public QObject {
  8.     Q_OBJECT
  9. public:
  10.     MyObject() {}
  12. public slots:
  13.     void onButtonClicked() {
  14.         qDebug() << "Button clicked in QML!";
  15.     }
  16. };
  18. int main(int argc, char *argv[])
  19. {
  20.     QCoreApplication app(argc, argv);
  22.     QQmlApplicationEngine engine;
  24.     // 创建 C++ 对象
  25.     MyObject myObject;
  27.     // 加载 QML 文件
  28.     engine.load(QUrl(QStringLiteral("qrc:/Main.qml")));
  30.     // 获取根对象
  31.     QObject *rootObject = engine.rootObjects().first();
  33.     // 查找 QML 中的 Button 对象
  34.     QObject *buttonObject = rootObject->findChild<QObject*>("button");
  36.     if (buttonObject) {
  37.         // 连接 QML 信号到 C++ 槽
  38.         QObject::connect(buttonObject, SIGNAL(clicked()), &myObject, SLOT(onButtonClicked()));
  39.     }
  41.     return app.exec();
  42. }
复制代码
2.4. 总结



  • 袒露 QML 对象给 C++：虽然 QML 本身不提供类似袒露 C++ 对象的机制，但 C++ 可以通过 QQmlApplicationEngine 或 findChild() 等方法获取 QML 中的对象并与之交互。
  • 信号和槽：C++ 可以连接 QML 中的信号与槽，从而实现 C++ 与 QML 之间的交互。
  • 属性访问：C++ 可以访问并修改 QML 对象的属性。
3.及时数据通报


  • Q_PROPERTY 和 信号槽： 用于简单的及时数据通报，尤其是数据较少或更新频率较低的场景。
  • QQmlContext::setContextProperty： 可以将 C++ 对象袒露给 QML，QML 可以通过信号与槽获取及时数据。
  • QTimer： 用于定期更新数据，可以联合其他方式实现及时数据通报。
  • 网络通信（QWebSocket, QNetworkAccessManager）： 用于跨进程或跨机器的及时数据通信。
    1. 基本上就是信号和槽结合定时器实现实时数据传递，
    2. 网络通讯的特殊场景提供简单示例仅供参考
    复制代码
(1) 使用 QTimer 和信号和槽进行及时更新

参考开篇第一个串口示例即可；
(2) 使用 QWebSocket 或 QNetworkAccessManager 实现及时数据通信



  • 通过 WebSocket 或网络通信协议可以实现跨进程、跨机器的及时数据传输。
示例（QWebSocket）：
C++ 后端：
  1. #include <QWebSocketServer>
  2. #include <QWebSocket>
  4. class WebSocketServer : public QObject {
  5.     Q_OBJECT
  7. public:
  8.     WebSocketServer(QObject *parent = nullptr) : QObject(parent) {
  9.         server = new QWebSocketServer("Real-Time Server", QWebSocketServer::NonSecureMode, this);
  10.         connect(server, &QWebSocketServer::newConnection, this, &WebSocketServer::onNewConnection);
  11.         server->listen(QHostAddress::Any, 12345);
  12.     }
  14. private slots:
  15.     void onNewConnection() {
  16.         QWebSocket *socket = server->nextPendingConnection();
  17.         connect(socket, &QWebSocket::textMessageReceived, this, &WebSocketServer::onMessageReceived);
  18.     }
  20.     void onMessageReceived(const QString &message) {
  21.         qDebug() << "Received message:" << message;
  22.     }
  24. private:
  25.     QWebSocketServer *server;
  26. };
复制代码
QML 前端（WebSocket）：
  1. import QtQuick 2.15
  2. import QtQuick.Controls 2.15
  3. import QtWebSockets 1.2
  5. ApplicationWindow {
  6.     visible: true
  7.     width: 640
  8.     height: 480
  10.     WebSocket {
  11.         id: socket
  12.         url: "ws://localhost:12345"
  13.         onTextMessageReceived: {
  14.             console.log("Received message: " + message);
  15.         }
  17.         Component.onCompleted: {
  18.             socket.open();
  19.         }
  20.     }
  21. }
复制代码
总结

  • Q_PROPERTY 和 信号槽： 用于简单的及时数据通报，尤其是数据较少或更新频率较低的场景。
  • QQmlContext::setContextProperty： 可以将 C++ 对象袒露给 QML，QML 可以通过信号与槽获取及时数据。
  • QTimer： 用于定期更新数据，可以联合其他方式实现及时数据通报。
  • 网络通信（QWebSocket, QNetworkAccessManager）： 用于跨进程或跨机器的及时数据通信。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

慢吞云雾缓吐愁

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

集成商 AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表