C++给QML传入一个list或者自定义的数据结构

在QML中，model可以在C++中定义，然后在QML中使用，这种方法对于暴露已经存在的C++数据模型或者其他复杂的数据集合给QML是非常有用的。一个C++类可以被定义为QStringList、 QVariantList、 QObjectList或者QAbstractItemModel.其中QStringList、 QVariantList、 QObjectList这三个类型的list用来暴露简单一点的数据给qml是非常有用的，QAbstractItemModel提供了非常大的灵活方法来定义更加复杂的数据结构。
这篇博客先介绍下QStringList、 QVariantList、 QObjectList这三个简单的类型如何从C++传到QML中。

1、把QStringList传递给qml

内联代码片

// qml部分的代码
 ListView {
      width: 100; height: 100

      model: myModel
      delegate: Rectangle {
          height: 25
          width: 100
          Text { text: modelData }
      }
  }

在QML中，我们定义一个listview，model设置为myModel

内联代码片

// C++部分代码（通过QQmlApplicationEngine方式加载qml）
 QStringList dataList;
      dataList.append("Item 1");
      dataList.append("Item 2");
      dataList.append("Item 3");
      dataList.append("Item 4");

    QQmlApplicationEngine engine;
    QQmlContext *ctxt = engine.rootContext();
    ctxt->setContextProperty("myModel", QVariant::fromValue(strlist));

这种方式是通过QQmlApplicationEngine 来加载QML文件，还有另一种方式是通过 QQuickView来加载QML文件。代码如下所示：
内联代码片

// C++部分代码（通过QQuickView方式来加载qml）
      QStringList dataList;
      dataList.append("Item 1");
      dataList.append("Item 2");
      dataList.append("Item 3");
      dataList.append("Item 4");

      QQuickView view;
      QQmlContext *ctxt = view.rootContext();
      ctxt->setContextProperty("myModel", QVariant::fromValue(dataList));

下面附上完整代码：
内联代码片

// C++部分代码（完整代码）
#include 
#include 
#include
#include
int main(int argc, char *argv[]) {
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QGuiApplication app(argc, argv);
    QStringList strlist;
    strlist.append("item1");
    strlist.append("item2");
    strlist.append("item3");
    strlist.append("item4");
    QQmlApplicationEngine engine;
    QQmlContext *ctxt = engine.rootContext();
    ctxt->setContextProperty("myModel", QVariant::fromValue(strlist));
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;
    return app.exec();
}

这样我们就可以把一个QStringList从C++中传入QML了。这种方法需要注意的是QML中的view是不知道QStringList的内容发生变化的，如果需要更新QStringList中的数值，只能再次调用QQmlContext::setContextProperty()函数来重新设置。

2、把QVariantList传入qml

方法和QStringList是一样的，这里不再赘述了。需要注意的是QML中的view是不知道QStringList的内容发生变化的，如果需要更新QStringList中的数值，只能再次调用QQmlContext::setContextProperty()函数来重新设置。

3、把一个自定义数据结构list传入qml中

首先，这个这个数据结构一定要是QObject的子类。
内联代码片

// C++部分代码（data.h）
class Data : public QObject {
    Q_OBJECT
    Q_PROPERTY(QString name READ name WRITE setName NOTIFY nameChanged)
    Q_PROPERTY(QString color READ color WRITE setColor NOTIFY colorChanged)
  public:
    Data(QObject *parent = nullptr);
    Data(const QString &name, const QString &color, QObject *parent = nullptr);
    QString name()const;
    void setName(const QString &name);
    QString color()const;
    void setColor(const QString& color);
  signals:
    void nameChanged();
    void colorChanged();
  public slots:
  private:
    QString m_name;
    QString m_color;
};

内联代码片

// C++部分代码（data.cpp）
#include "data.h"

Data::Data(QObject *parent) : QObject(parent) {

}

Data::Data(const QString &name, const QString &color, QObject *parent)
    : QObject(parent), m_name(name), m_color(color) {

}

QString Data::name() const {
    return m_name;
}

void Data::setName(const QString &name) {
    if(m_name != name) {
        m_name = name;
        emit nameChanged();
    }
}

QString Data::color() const {
    return m_color;
}

void Data::setColor(const QString &color) {
    if(m_color != color) {
        m_color = color;
        emit colorChanged();
    }
}

内联代码片

// C++部分代码（main.cpp）
#include 
#include 
#include"data.h"
#include
#include
int main(int argc, char *argv[]) {
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);



    QList datalist;
    datalist.append(new Data("item1", "red"));
    datalist.append(new Data("item2", "green"));
    datalist.append(new Data("item3", "blue"));
    datalist.append(new Data("item4", "yellow"));
    QQuickView view;
    view.setResizeMode(QQuickView::SizeRootObjectToView);
    QQmlContext *ctxt = view.rootContext();
    ctxt->setContextProperty("myModel", QVariant::fromValue(datalist));
    view.setSource(QUrl("qrc:main.qml"));
    view.show();
    return app.exec();
}

内联代码片

//QML部分代码（main.qml）
ListView{
        width: parent.width
        model:myModel
        delegate: Rectangle{
            width: parent.width
            height: txt.font.pixelSize
            color: model.modelData.color
            Text {
                id: txt
                text: name
            }
        }
    }

最后运行代码后效果如下图所示

4、总结

这三种方式都是通过setContextProperty（）的方法把一个list传入qml，也就是把一个实例化的对象传入到qml中，当数值有更新的话，view是不知道的，只能通过重新调用setContextProperty（）方法重新传入qml