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

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

    • 1、把QStringList传递给qml
    • 2、把QVariantList传入qml
    • 3、把一个自定义数据结构list传入qml中
    • 4、总结

C++给QML传入一个list或者自定义的数据结构_第1张图片
在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
            }
        }
    }

最后运行代码后效果如下图所示
C++给QML传入一个list或者自定义的数据结构_第2张图片

4、总结

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

你可能感兴趣的:(qml,qt,数据交互,qml,qt,quick,Qt,Qt入门,QTQuick,QML,C++)