Warning
This section contains snippets that were automatically translated from C++ to Python and may contain errors.
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, 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.
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 a QStringList:
dataList = { "Item 1", "Item 2", "Item 3", "Item 4" view = QQuickView() 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 the QStringList changes, it will be necessary to reset the model by setting the view’s model
property 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 the QVariantList changes, it will be necessary to reset the model by setting the view’s model
property again.
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:
class DataObject(QObject): Q_OBJECT Q_PROPERTY(QString name READ name WRITE setName NOTIFY nameChanged) Q_PROPERTY(QString color READ color WRITE setColor NOTIFY colorChanged) ... if __name__ == "__main__": app = QGuiApplication(argc, argv) colorList = {"red", "green", "blue", "yellow"} 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<QObject() for module in moduleList: dataList.append(DataObject("Qt " + module, colorList.at(rand() % colorList.length()))) view = QQuickView() view.setResizeMode(QQuickView.ResizeMode.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:
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 the color
property. You can require existing properties by declaring them as required
in a derived type.
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 QObjectList have changed. If the QObjectList changes, it will be necessary to reset the model by setting the view’s model
property 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:
class Animal(): # public Animal(QString type, QString size) ... class AnimalModel(QAbstractListModel): Q_OBJECT # public AnimalRoles = { TypeRole = Qt.UserRole + 1, SizeRole AnimalModel(QObject parent = None) ... QHash<int, QByteArray> AnimalModel.roleNames() { QByteArray> = QHash<int,() roles[TypeRole] = "type" roles[SizeRole] = "size" return roles if __name__ == "__main__": app = QGuiApplication(argc, argv) model = AnimalModel() model.addAnimal(Animal("Wolf", "Medium")) model.addAnimal(Animal("Polar bear", "Large")) model.addAnimal(Animal("Quoll", "Small")) view = QQuickView() view.setResizeMode(QQuickView.ResizeMode.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 QAbstractItemModel::dataChanged(), QAbstractItemModel::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 of QAbstractItemModel 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::rootIndex
DelegateModel::parentModelIndex() returns a QModelIndex which can be assigned to DelegateModel::rootIndex
Exposing C++ Data Models to QML¶
The above examples use required properties on the view to set model values directly in QML components. An alternative to this is to register the C++ model class as a QML type (see Defining QML Types from C++). This allows the model classes to be created directly as types within QML:
C++
class MyModel : public QAbstractItemModel { Q_OBJECT QML_ELEMENT // [...] }QML
See Writing QML Extensions with C++ for details on writing QML types in C++.
Changing Model Data¶
Besides the roleNames()
and data()
, editable models must reimplement the setData method to save changes to existing model data. The following version of the method checks if the given model index is valid and the role
is equal to Qt::EditRole:
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 or QTableView, the setData()
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 to Qt::EditRole. See roleNames() for the built-in role names. However, real life models would usually register custom roles.