Embedding C++ Objects into QML with Context Properties

Description of how to embed C++ data into QML using context properties.

Article lu fois.

L'auteur

The Qt Company Ltd.

L'article

Publié le 27 décembre 2024 - Mis à jour le 27 décembre 2024

Liens sociaux

Embedding C++ Objects into QML with Context Properties▲

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 https:// 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:

Sélectionnez

// 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 https://():

Sélectionnez

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

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 https:// or https://* 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 https:// instance instead of a https:// value, and the QML code invokes a method on the object instance:

C++

Sélectionnez

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()-&gt;setContextProperty("applicationData", &amp;data);

    view.setSource(QUrl::fromLocalFile("MyItem.qml"));
    view.show();

    return app.exec();
}

QML

Sélectionnez

// MyItem.qml
import QtQuick 2.0

Text { text: applicationData.getCurrentDateTime() }

(Note that date/time values returned from C++ to QML can be formatted through https://() and associated functions.)

If the QML item needs to receive signals from the context property, it can connect to them using the https:// type. For example, if ApplicationData has a signal named dataChanged(), this signal can be connected to using an onDataChanged handler within a https:// object:

Sélectionnez

Text {
    text: applicationData.getCurrentDateTime()

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

Context properties can be useful for using C++ based data models in a QML view. See the following examples:

https://
Object ListModel
AbstractItemModel

demonstrating the use of QStringList, https://<https://*>-based models and https:// in QML views.

Also see the https:// documentation for more information.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants :