1.前言

最近在搞qml，從伺服器上獲取一段json資料，本想直接傳送至qml中展示，無奈，qt的官方文件中沒有關於json如何在listview/listmodel中展示的示例程式碼。

從網上看到jsonmodel的第三方模組，但是覺得挺麻煩的，後來找到一種新的解法，下面寫出來。

2.JSON程式碼從c++傳至qml中

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <jsondata.h>
#include <QQmlContext>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QGuiApplication app(argc, argv);

    JsonData jsondata;

    QQmlApplicationEngine engine;

    engine.rootContext()->setContextProperty("jsondata",&jsondata);

    engine.load(QUrl(QLatin1String("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}
 

#ifndef JSONDATA_H
#define JSONDATA_H
#include <QObject>

class JsonData : public QObject
{
    Q_OBJECT
    Q_PROPERTY(QString man READ man NOTIFY manChanged)
public:
    JsonData();
    QString man() {return   QString("[{\"name\":\"Joy\",\"age\":30},{\"name\":\"James\",\"age\":36},{\"name\":\"Lily\",\"age\":20}]");}
signals:
    void  manChanged();
private:
    QString man2;
};

#endif // JSONDATA_H
 

#include "jsondata.h"

JsonData::JsonData()
{

}

import QtQuick 2.0
import QtQuick.Controls 2.1
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.1

ApplicationWindow {
    id:rect
    width: 400
    height: 200
    visible: true
    property var json_man: JSON.parse(jsondata.man)
}

3.把JSON資料展示在listmodel中

import QtQuick 2.0
import QtQuick.Controls 2.1
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.1

ApplicationWindow {
    id:rect
    width: 400
    height: 200
    visible: true
    property var json_man: JSON.parse(jsondata.man)

    ListView {
        id:man_table
        x: 20
        y: 20
        width: 359
        height: 158
        keyNavigationWraps: false
        snapMode: ListView.SnapToItem
        highlightRangeMode: ListView.ApplyRange
        anchors.margins: 5
        spacing: 3
        model: json_man
        delegate: table_model
    }

    Component{
        id:table_model
        RowLayout{
            spacing:  10
            Layout.fillWidth:true
            Label{
                text: json_man[index].name
            }
            Label{
                text: json_man[index].age
            }
        }
    }
}

4.總結