QMLではjsonデータ(c++から渡された値)を示す

3116 ワード

QT。 QML

1.はじめに
最近qmlをやっていて、サーバーからjsonデータを取得して、直接qmlに転送して展示したいと思っていましたが、残念ながらqtの公式ドキュメントには、jsonがlistview/listmodelでどのように展示されているかについてのサンプルコードはありません.
jsonmodelのサードパーティモジュールをネットで見ましたが、面倒だと思っていましたが、新しい解法を見つけて、下に書きました.
2.JSONコードc++からqmlへ
main.cpp

#include 
#include 
#include 
#include 

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();
}

QStringタイプ文字列をqmlの属性として登録し,qmlでJavaScriptでjson変数に解析する.
jsondata.h

#ifndef JSONDATA_H
#define JSONDATA_H
#include 

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

jsondata.cpp

#include "jsondata.h"

JsonData::JsonData()
{

}

main.qml

 
    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  
  
    main.qml 
   
   
   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.   
   
   
   json         ，       ，     ！

mac版sublime常用ショートカットキー整理

zsh の起動の遅さに絶望して色々とゴソゴソ