Qt Quick应用中C++读取JSON数据后在UI文本框展示的实现方法咨询

嘿，我来帮你搞定把C里读到的JSON数据显示到Qt Quick UI上的问题！核心思路是**让C类的属性能被QML访问**，然后把读取到的JSON文本存到这个属性里，再触发更新通知，QML那边绑定这个属性就能自动刷新显示了。

步骤1：给Jsonfile类添加可被QML访问的属性 #

首先，你的Jsonfile类得是QObject的子类（应该已经是了，不然没法用Qt的元对象系统），然后添加一个Q_PROPERTY来存储要展示的JSON文本：

// Jsonfile.h
#include <QObject>
#include <QString>

class Jsonfile : public QObject
{
    Q_OBJECT
    // 定义可被QML访问的属性，用于存储要展示的JSON文本
    Q_PROPERTY(QString jsonDisplayText READ jsonDisplayText WRITE setJsonDisplayText NOTIFY jsonDisplayTextChanged)

public:
    explicit Jsonfile(QObject *parent = nullptr);

    void display();

    // 属性的READ方法
    QString jsonDisplayText() const;
    // 属性的WRITE方法
    void setJsonDisplayText(const QString &newJsonDisplayText);

signals:
    // 属性变化时发射的信号，通知QML更新
    void jsonDisplayTextChanged();

private:
    // 存储JSON文本的成员变量
    QString m_jsonDisplayText;
};

步骤2：修改display函数，把数据存到属性里 #

原来的display函数是把JSON输出到控制台，现在要改成把JSON文本赋值给我们刚才定义的m_jsonDisplayText，并发射信号：

// Jsonfile.cpp
#include "Jsonfile.h"
#include <QFile>
#include <QJsonDocument>
#include <QJsonParseError>
#include <QDebug>

Jsonfile::Jsonfile(QObject *parent) : QObject(parent) {}

QString Jsonfile::jsonDisplayText() const
{
    return m_jsonDisplayText;
}

void Jsonfile::setJsonDisplayText(const QString &newJsonDisplayText))
{
    if (m_jsonDisplayText == newJsonDisplayText)
        return;
    m_jsonDisplayText = newJsonDisplayText;
    emit jsonDisplayTextChanged();
}

void Jsonfile::display(){
    QFile file("data.json");
    if(!file.open(QIODevice::ReadOnly)){
        qDebug() << "file couldn't be opened/found";
        // 可以设置提示文本显示到UI
        setJsonDisplayText("无法打开data.json文件");
        return;
    }
    QByteArray byteArray = file.readAll();
    file.close();

    QJsonParseError parseError;
    QJsonDocument jsonDoc = QJsonDocument::fromJson(byteArray, &parseError);
    if(parseError.error != QJsonParseError::NoError){
        qWarning() << "Parse error at " << parseError.offset << ":" << parseError.errorString();
        // 把解析错误显示到UI
        setJsonDisplayText(QString("JSON解析错误：%1").arg(parseError.errorString()));
        return;
    }

    // 把格式化后的JSON文本存到属性里，触发信号通知QML更新
    QString jsonText = QString::fromUtf8(jsonDoc.toJson(QJsonDocument::Indented));
    setJsonDisplayText(jsonText);
}

步骤3：在QML中绑定属性展示数据 #

接下来需要确保你的Jsonfile实例能被QML访问到，这里用最常用的全局对象方式：在C++中创建实例，把它设置为QML的全局上下文属性。

在main.cpp里：

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include "Jsonfile.h"

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    // 创建Jsonfile实例，设置为QML全局对象，名字叫jsonHandler
    Jsonfile jsonHandler;
    engine.rootContext()->setContextProperty("jsonHandler", &jsonHandler);

    const QUrl url(u"qrc:/main.qml"_qs);
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);

    return app.exec();
}

然后在QML里，用TextEdit组件绑定jsonHandler.jsonDisplayText，再加个按钮触发读取操作：

// main.qml
import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("JSON数据展示")

    Column {
        anchors.centerIn: parent
        spacing: 10

        Button {
            text: "加载并展示JSON"
            onClicked: jsonHandler.display() // 点击按钮触发读取JSON
        }

        TextEdit {
            width: 600
            height: 400
            readOnly: true
            text: jsonHandler.jsonDisplayText // 绑定C++的属性
            wrapMode: TextEdit.WordWrap
            font.family: "Courier New" // 用等宽字体显示JSON更美观
        }
    }
}

这样，当你点击按钮时，C++的display函数会读取JSON文件，把文本存到属性里，QML的TextEdit就会自动更新显示内容啦！

内容的提问来源于stack exchange，提问作者Dan