QtQml.qtqml-cppintegration-contextproperties

When loading a QML object into a C++ application, it can be useful to directly embed some C++ data that can be used from within the QML code. This makes it possible, for example, to invoke a C++ method on the embedded object, or use a C++ object instance as a data model for a QML view.

The ability to inject C++ data into a QML object is made possible by the QQmlContext class. This class exposes data to the context of a QML object so that the data can be referred to directly from within the scope of the QML code.

Setting a Simple Context Property

For example, here is a QML item that refers to a currentDateTime value that does not exist in the current scope:

// MyItem.qml
import QtQuick 2.0
Text { text: currentDateTime }

This currentDateTime value can be set directly by the C++ application that loads the QML component, using QQmlContext::setContextProperty():

QQuickView view;
view.rootContext()->setContextProperty("currentDateTime", QDateTime::currentDateTime());
view.setSource(QUrl::fromLocalFile("MyItem.qml"));
view.show();

Note: Since all expressions evaluated in QML are evaluated in a particular context, if the context is modified, all bindings in that context will be re-evaluated. Thus, context properties should be used with care outside of application initialization, as this may lead to decreased application performance.

Setting an Object as a Context Property

Context properties can hold either QVariant or QObject values. This means custom C++ objects can also be injected using this approach, and these objects can be modified and read directly in QML. Here, we modify the above example to embed a QObject instance instead of a QDateTime value, and the QML code invokes a method on the object instance:

class ApplicationData : public QObject
{
Q_OBJECT
public:
Q_INVOKABLE QDateTime getCurrentDateTime() const {
return QDateTime::currentDateTime();
}
};
int main(int argc, char argv[]) {
QGuiApplication app(argc, argv);
QQuickView view;
ApplicationData data;
view.rootContext()->setContextProperty("applicationData", &data);
view.setSource(QUrl::fromLocalFile("MyItem.qml"));
view.show();
return app.exec();
}

// MyItem.qml
import QtQuick 2.0
Text { text: applicationData.getCurrentDateTime() }

Text {
text: applicationData.getCurrentDateTime()
Connections {
target: applicationData
onDataChanged: console.log("The application data changed!")
}
}