Data Provided In A Custom C++ Model▲

Models can be defined in C++ and then made available to QML. This is useful for exposing existing C++ data models or otherwise complex datasets to QML.

A C++ model class can be defined as a QStringList, a QVariantList, a QObjectList or a QAbstractItemModel. The first three are useful for exposing simpler datasets, while QAbstractItemModel provides a more flexible solution for more complex models.

Here is a video tutorial that takes you through the whole process of exposing a C++ model to QML:


Cliquez pour lire la vidéo


QStringList-based Model▲

A model may be a simple QStringList, which provides the contents of the list via the modelData role.

Here is a ListView with a delegate that references its model item's value using the modelData role:

 
Sélectionnez
ListView {
    width: 100
    height: 100
    required model

    delegate: Rectangle {
        required property string modelData
        height: 25
        width: 100
        Text { text: parent.modelData }
    }
}

A Qt application can load this QML document and set the value of myModel to a QStringList:

 
Sélectionnez
    QStringList dataList = {
        "Item 1",
        "Item 2",
        "Item 3",
        "Item 4"
    };

    QQuickView view;
    view.setInitialProperties({{ "model", QVariant::fromValue(dataList) }});

The complete source code for this example is available in examples/quick/models/stringlistmodel within the Qt install directory.

There is no way for the view to know that the contents of a QStringList have changed. If the QStringList changes, it will be necessary to reset the model by calling QQmlContext::setContextProperty() again.

QVariantList-based Model▲

A model may be a single QVariantList, which provides the contents of the list via the modelData role.

The API works just like with QStringList, as shown in the previous section.

There is no way for the view to know that the contents of a QVariantList have changed. If the QVariantList changes, it will be necessary to reset the model.

QObjectList-based Model▲

A list of QObject* values can also be used as a model. A QList<QObject*> provides the properties of the objects in the list as roles.

The following application creates a DataObject class with Q_PROPERTY values that will be accessible as named roles when a QList<DataObject*> is exposed to QML:

 
Sélectionnez
class DataObject : public QObject
{
    Q_OBJECT

    Q_PROPERTY(QString name READ name WRITE setName NOTIFY nameChanged)
    Q_PROPERTY(QString color READ color WRITE setColor NOTIFY colorChanged)
    ...
};

int main(int argc, char ** argv)
{
    QGuiApplication app(argc, argv);

    const QStringList colorList = {"red",
                                   "green",
                                   "blue",
                                   "yellow"};

    const QStringList moduleList = {"Core", "GUI", "Multimedia", "Multimedia Widgets", "Network",
                                    "QML", "Quick", "Quick Controls", "Quick Dialogs",
                                    "Quick Layouts", "Quick Test", "SQL", "Widgets", "3D",
                                    "Android Extras", "Bluetooth", "Concurrent", "D-Bus",
                                    "Gamepad", "Graphical Effects", "Help", "Image Formats",
                                    "Location", "Mac Extras", "NFC", "OpenGL", "Platform Headers",
                                    "Positioning", "Print Support", "Purchasing", "Quick Extras",
                                    "Quick Timeline", "Quick Widgets", "Remote Objects", "Script",
                                    "SCXML", "Script Tools", "Sensors", "Serial Bus",
                                    "Serial Port", "Speech", "SVG", "UI Tools", "WebEngine",
                                    "WebSockets", "WebView", "Windows Extras", "XML",
                                    "XML Patterns", "Charts", "Network Authorization",
                                    "Virtual Keyboard", "Quick 3D", "Quick WebGL"};

    QList&lt;QObject *&gt; dataList;
    for (const QString &amp;module : moduleList)
        dataList.append(new DataObject("Qt " + module, colorList.at(rand() % colorList.length())));

    QQuickView view;
    view.setResizeMode(QQuickView::SizeRootObjectToView);
    view.setInitialProperties({{ "model", QVariant::fromValue(dataList) }});
    ...

The QObject* is available as the modelData property. As a convenience, the properties of the object are also made available directly in the delegate's context. Here, view.qml references the DataModel properties in the ListView delegate:

 
Sélectionnez
ListView {
    id: listview
    width: 200; height: 320
    required model
    ScrollBar.vertical: ScrollBar { }

    delegate: Rectangle {
        width: listview.width; height: 25

        required color
        required property string name

        Text { text: parent.name }
    }
}

Note the use of color property with qualifier. The properties of the object are not replicated in the model object, as they are easily available via the modelData object.

The complete source code for this example is available in examples/quick/models/objectlistmodel within the Qt install directory.

Note: There is no way for the view to know that the contents of a QList has changed. If the QList changes, it is necessary to reset the model by calling QQmlContext::setContextProperty() again.

QAbstractItemModel Subclass▲

A model can be defined by subclassing QAbstractItemModel. This is the best approach if you have a more complex model that cannot be supported by the other approaches. A QAbstractItemModel can also automatically notify a QML view when the model data changes.

The roles of a QAbstractItemModel subclass can be exposed to QML by reimplementing QAbstractItemModel::roleNames().

Here is an application with a QAbstractListModel subclass named AnimalModel, which exposes the type and sizes roles. It reimplements QAbstractItemModel::roleNames() to expose the role names, so that they can be accessed via QML:

 
Sélectionnez
class Animal
{
public:
    Animal(const QString &amp;type, const QString &amp;size);
    ...
};

class AnimalModel : public QAbstractListModel
{
    Q_OBJECT
public:
    enum AnimalRoles {
        TypeRole = Qt::UserRole + 1,
        SizeRole
    };

    AnimalModel(QObject *parent = nullptr);
    ...
};

QHash&lt;int, QByteArray&gt; AnimalModel::roleNames() const {
    QHash&lt;int, QByteArray&gt; roles;
    roles[TypeRole] = "type";
    roles[SizeRole] = "size";
    return roles;
}

int main(int argc, char ** argv)
{
    QGuiApplication app(argc, argv);

    AnimalModel model;
    model.addAnimal(Animal("Wolf", "Medium"));
    model.addAnimal(Animal("Polar bear", "Large"));
    model.addAnimal(Animal("Quoll", "Small"));

    QQuickView view;
    view.setResizeMode(QQuickView::SizeRootObjectToView);
    view.setInitialProperties({{"model", QVariant::fromValue(&amp;model)}});
    ...

This model is displayed by a ListView delegate that accesses the type and size roles:

 
Sélectionnez
ListView {
    width: 200; height: 250

    required model

    delegate: Text {
        required property string type
        required property string size

        text: "Animal: " + type + ", " + size
    }
}

QML views are automatically updated when the model changes. Remember the model must follow the standard rules for model changes and notify the view when the model has changed by using QAbstractItemModel::dataChanged(), QAbstractItemModel::beginInsertRows(), and so on. See the