QML中的JSON 处理

在 QML 中处理 JSON 数据是常见的需求,以下是完整的 JSON 处理方法指南:

1. JSON 解析与序列化

从字符串解析 JSON

qml

复制代码
import QtQml 2.15

// JSON 字符串
var jsonString = '{"name": "Alice", "age": 25, "skills": ["QML", "JavaScript"]}';

// 解析为 JavaScript 对象
var jsonObj = JSON.parse(jsonString);

console.log(jsonObj.name);    // 输出: "Alice"
console.log(jsonObj.age);     // 输出: 25
console.log(jsonObj.skills); // 输出: ["QML", "JavaScript"]

将对象序列化为 JSON 字符串

qml

复制代码
var person = {
    name: "Bob",
    age: 30,
    married: false,
    address: {
        city: "Beijing",
        street: "Main St"
    }
};

var jsonStr = JSON.stringify(person);
console.log(jsonStr); 
// 输出: '{"name":"Bob","age":30,"married":false,"address":{"city":"Beijing","street":"Main St"}}'

2. 格式化 JSON 输出

qml

复制代码
// 带缩进的格式化输出
var prettyJson = JSON.stringify(person, null, 2);
console.log(prettyJson);
/*
输出:
{
  "name": "Bob",
  "age": 30,
  "married": false,
  "address": {
    "city": "Beijing",
    "street": "Main St"
  }
}
*/

3. 与 QML 数据模型结合

将 JSON 数组转换为 ListModel

qml

复制代码
import QtQuick 2.15
import QtQuick.Controls 2.15

ListView {
    width: 200; height: 200
    
    model: ListModel {
        id: jsonModel
    }
    
    Component.onCompleted: {
        var data = JSON.parse('[{"name":"Apple","price":5.99},{"name":"Banana","price":3.50}]');
        data.forEach(function(item) {
            jsonModel.append(item);
        });
    }
    
    delegate: Text { 
        text: model.name + ": $" + model.price 
    }
}

从 XMLHttpRequest 获取 JSON

qml

复制代码
import QtQuick 2.15
import QtQuick.Controls 2.15

Item {
    function loadJsonData() {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "https://api.example.com/data.json");
        xhr.onreadystatechange = function() {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                if (xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    console.log("Received data:", response);
                    // 处理数据...
                } else {
                    console.error("Request failed:", xhr.status, xhr.statusText);
                }
            }
        };
        xhr.send();
    }
    
    Component.onCompleted: loadJsonData()
}

4. 使用 JSON 作为配置

读取 JSON 配置文件

qml

复制代码
import QtQuick 2.15
import Qt.labs.settings 1.0

Item {
    property var config: ({})

    Settings {
        id: settings
        property string appConfig: JSON.stringify({theme: "light", fontSize: 12})
    }

    Component.onCompleted: {
        config = JSON.parse(settings.appConfig);
        console.log("Current theme:", config.theme);
    }

    function updateConfig(newConfig) {
        config = newConfig;
        settings.appConfig = JSON.stringify(newConfig);
    }
}

5. 注意事项

  1. 错误处理

    qml

    复制代码
    try {
        var obj = JSON.parse(malformedJson);
    } catch (e) {
        console.error("JSON 解析错误:", e);
    }
  2. 性能考虑

    • 大型 JSON 数据解析可能会阻塞 UI

    • 考虑在 WorkerScript 中处理大型 JSON

  3. Qt 版本兼容性

    • JSON 对象在 Qt 5.0 及以上版本可用

    • 对于更早版本,可以使用 Qt.include() 加载 JSON 库

  4. 与 C++ 交互

    cpp

    复制代码
    // C++ 端可以将 QVariantMap/QVariantList 传递给 QML
    QVariantMap data;
    data["name"] = "Alice";
    engine.rootContext()->setContextProperty("cppData", data);

    qml

    复制代码
    // QML 中直接使用
    console.log(cppData.name); // "Alice"

6. 实用工具函数

qml

复制代码
// 安全的 JSON 解析
function safeParse(jsonStr, defaultValue) {
    try {
        return JSON.parse(jsonStr);
    } catch (e) {
        console.warn("JSON 解析失败:", e);
        return defaultValue !== undefined ? defaultValue : null;
    }
}

// 深度合并 JSON 对象
function deepMerge(target, source) {
    for (var key in source) {
        if (source[key] instanceof Object && target[key] instanceof Object) {
            deepMerge(target[key], source[key]);
        } else {
            target[key] = source[key];
        }
    }
    return target;
}
相关推荐
钱彬 (Qian Bin)2 天前
《使用Qt Quick从零构建AI螺丝瑕疵检测系统》——4. 前后端联动:打通QML与C++的任督二脉
c++·qt·教程·qml·qt quick·qt 6.9.1·工业瑕疵检测
钱彬 (Qian Bin)5 天前
《使用Qt Quick从零构建AI螺丝瑕疵检测系统》——0. 博客系列大纲
人工智能·qt·qml·瑕疵检测·qt quick·yolo8·工业质检
丁劲犇7 天前
Qt Graphs 模块拟取代 charts 和 data visualization还有很长的路要走
c++·qt·qml·visualization·charts·graphs
cpp_learners11 天前
QML与C++相互调用函数并获得返回值
c++·qt·qml
Little-Hu18 天前
QML事件处理:鼠标、拖拽与键盘事件
qml
cpp_learners19 天前
QML与C++交互之创建自定义对象
c++·qt·qml
钱彬 (Qian Bin)20 天前
一文掌握Qt Quick数字图像处理项目开发(基于Qt 6.9 C++和QML,代码开源)
c++·开源·qml·qt quick·qt6.9·数字图像处理项目·美观界面
智驾1 个月前
QML革命:下一代GUI开发的核心优势详解
qt·qml
做一个坚强的女汉子1 个月前
Qt Quick 与 QML(三)qml中的基础控件
qt·qml
做一个坚强的女汉子1 个月前
Qt Quick 与 QML(二)qml中的顶级窗口
qt·qml