Using C++ Models with Qt Quick Views¶
using Qt Quick views with models defined in C++
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
, aQVariantList
, aQObjectList
or aQAbstractItemModel
. The first three are useful for exposing simpler datasets, whileQAbstractItemModel
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:
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: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 aQStringList
: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.
Note
There is no way for the view to know that the contents of a
QStringList
have changed. If theQStringList
changes, it will be necessary to reset the model by callingsetContextProperty()
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.Note
There is no way for the view to know that the contents of a
QVariantList
have changed. If theQVariantList
changes, it will be necessary to reset the model.
QObjectList-based Model¶
A list of
QObject
* values can also be used as a model. AQList
<QObject
*> provides the properties of the objects in the list as roles.The following application creates a
DataObject
class withQ_PROPERTY
values that will be accessible as named roles when aQList
<DataObject*> is exposed to QML: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::setAttribute(Qt::AA_EnableHighDpiScaling); QGuiApplication app(argc, argv); QList<QObject *> dataList = { new DataObject("Item 1", "red"), new DataObject("Item 2", "green"), new DataObject("Item 3", "blue"), new DataObject("Item 4", "yellow") }; QQuickView view; view.setResizeMode(QQuickView::SizeRootObjectToView); view.setInitialProperties({{ "model", QVariant::fromValue(dataList) }}); ...The
QObject
* is available as themodelData
property. As a convenience, the properties of the object are also made available directly in the delegate’s context. Here,view.qml
references theDataModel
properties in the ListView delegate:ListView { width: 100; height: 100 required model delegate: Rectangle { required color required property string name height: 25 width: 100 Text { text: parent.name } } }Note the use of
color
property with qualifier. The properties of the object are not replicated in themodel
object, as they are easily available via themodelData
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 theQList
changes, it is necessary to reset the model by callingsetContextProperty()
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. AQAbstractItemModel
can also automatically notify a QML view when the model data changes.The roles of a
QAbstractItemModel
subclass can be exposed to QML by reimplementingroleNames()
.Here is an application with a
QAbstractListModel
subclass namedAnimalModel
, which exposes the type and sizes roles. It reimplementsroleNames()
to expose the role names, so that they can be accessed via QML:class Animal { public: Animal(const QString &type, const QString &size); ... }; class AnimalModel : public QAbstractListModel { Q_OBJECT public: enum AnimalRoles { TypeRole = Qt::UserRole + 1, SizeRole }; AnimalModel(QObject *parent = 0); ... }; QHash<int, QByteArray> AnimalModel::roleNames() const { QHash<int, QByteArray> 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(&model)}}); ...This model is displayed by a ListView delegate that accesses the type and size roles:
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
dataChanged()
,beginInsertRows()
, and so on. See the Model subclassing reference for more information.The complete source code for this example is available in examples/quick/models/abstractitemmodel within the Qt install directory.
QAbstractItemModel
presents a hierarchy of tables, but the views currently provided by QML can only display list data. In order to display the child lists of a hierarchical model, use the DelegateModel QML type, which provides the following properties and functions to be used with list models ofQAbstractItemModel
type:
hasModelChildren role property to determine whether a node has child nodes.
DelegateModel::rootIndex allows the root node to be specified
DelegateModel::modelIndex() returns a
QModelIndex
which can be assigned to DelegateModel::rootIndexDelegateModel::parentModelIndex() returns a
QModelIndex
which can be assigned to DelegateModel::rootIndex
SQL Models¶
Qt provides C++ classes that support SQL data models. These classes work transparently on the underlying SQL data, reducing the need to run SQL queries for basic SQL operations such as create, insert, or update. For more details about these classes, see Using the SQL Model Classes .
Although the C++ classes provide complete feature sets to operate on SQL data, they do not provide data access to QML. So you must implement a C++ custom data model as a subclass of one of these classes, and expose it to QML either as a type or context property.
Read-only Data Model¶
The custom model must reimplement the following methods to enable read-only access to the data from QML:
roleNames
() to expose the role names to the QML frontend. For example, the following version returns the selected table’s field names as role names:QHash<int, QByteArray> SqlQueryModel::roleNames() const { QHash<int, QByteArray> roles; // record() returns an empty QSqlRecord for (int i = 0; i < this->record().count(); i ++) { roles.insert(Qt::UserRole + i + 1, record().fieldName(i).toUtf8()); } return roles; }
data
() to expose SQL data to the QML frontend. For example, the following implementation returns data for the given model index:QVariant SqlQueryModel::data(const QModelIndex &index, int role) const { QVariant value; if (index.isValid()) { if (role < Qt::UserRole) { value = QSqlQueryModel::data(index, role); } else { int columnIdx = role - Qt::UserRole - 1; QModelIndex modelIndex = this->index(index.row(), columnIdx); value = QSqlQueryModel::data(modelIndex, Qt::DisplayRole); } } return value; }The
QSqlQueryModel
class is good enough to implement a custom read-only model that represents data in an SQL database. The chat tutorial example demonstrates this very well by implementing a custom model to fetch the contact details from an SQLite database.
Editable Data Model¶
QSqlTableModel
implements setData() as described below .Depending on the
EditStrategy
used by the model, the changes are either queued for submission later or submitted immediately.You can also insert new data into the model by calling
insertRecord
(). In the following example snippet, aQSqlRecord
is populated with book details and appended to the model:... QSqlRecord newRecord = record(); newRecord.setValue("author", "John Grisham"); newRecord.setValue("booktitle", "The Litigators"); insertRecord(rowCount(), newRecord); ...
Exposing C++ Data Models to QML¶
The above examples use
setContextProperty()
to set model values directly in QML components. An alternative to this is to register the C++ model class as a QML type (either directly from a C++ entry-point, or within the initialization function of a QML C++ plugin , as shown below). This would allow the model classes to be created directly as types within QML:
C++
class MyModelPlugin : public QQmlExtensionPlugin { Q_OBJECT Q_PLUGIN_METADATA(IID "org.qt-project.QmlExtension.MyModel" FILE "mymodel.json") public: void registerTypes(const char *uri) { qmlRegisterType<MyModel>(uri, 1, 0, "MyModel"); } }QML
See Writing QML Extensions with C++ for details on writing QML C++ plugins.
Changing Model Data¶
Besides the
roleNames()
anddata()
, editable models must reimplement thesetData
method to save changes to existing model data. The following version of the method checks if the given model index is valid and therole
is equal toEditRole
:bool EditableModel::setData(const QModelIndex &index, const QVariant &value, int role) { if (index.isValid() && role == Qt::EditRole) { // Set data in model here. It can also be a good idea to check whether // the new value actually differs from the current value if (m_entries[index.row()] != value.toString()) { m_entries[index.row()] = value.toString(); emit dataChanged(index, index, { Qt::EditRole, Qt::DisplayRole }); return true; } } return false; }Note
It is important to emit the
dataChanged
() signal after saving the changes.Unlike the C++ item views such as
QListView
orQTableView
, thesetData()
method must be explicitly invoked from QML delegates whenever appropriate. This is done by simply assigning a new value to the corresponding model property.Note
The
edit
role is equal toEditRole
. SeeroleNames
() for the built-in role names. However, real life models would usually register custom roles.
© 2022 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.