如何利用上下文属性将 C++ 对象嵌入 QML 里

本篇文章为大家展示了如何利用上下文属性将 C++ 对象嵌入 QML 里，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

一、设置简单的上下文属性

例如，这里有一个 QML 项，它引用了当前作用域中不存在的 currentDateTime 值：

// MyItem.qmlimport QtQuick 2.0 Text {     text: currentDateTime }

这个值可以由加载 QML 组件的 C++ 应用程序使用 QQmlContext::setContextProperty() 直接设置：

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

由于在 QML 中计算的所有表达式都是在特定上下文中计算的，如果修改了上下文，则将重新计算该上下文中的所有绑定。因此，应在应用程序初始化之外谨慎使用上下文属性，因为这可能会导致应用程序性能下降。

二、将对象设置为上下文属性

上下文属性可以包含 QVariant 或 QObject* 值。 这意味着也可以使用这种方法注入自定义 C++ 对象，并且可以直接在 QML 中修改和读取这些对象。修改上面的例子，嵌入一个 QObject 实例而不是一个 QDateTime 值，QML 代码在对象实例上调用一个方法：

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

请注意：从 C++ 返回到 QML 的日期/时间值可以通过 Qt.formatDateTime() 和相关函数进行格式化。

如果 QML 项需要从上下文属性接收信号，它可以使用 Connections 类型连接到它们。 例如，如果 ApplicationData 有一个名为 dataChanged() 的信号，则可以使用 Connections 对象中的 onDataChanged 处理程序连接到该信号：

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

三、上下文属性与C++ 的数据模型示例

3.1、字符串列表模型

int main(int argc, char ** argv){    QGuiApplication app(argc, argv);     QStringList dataList;    dataList.append("Item 1");    dataList.append("Item 2");    dataList.append("Item 3");    dataList.append("Item 4");     QQuickView view;    QQmlContext *ctxt = view.rootContext();    ctxt->setContextProperty("myModel", QVariant::fromValue(dataList));     view.setSource(QUrl("qrc:view.qml"));    view.show();     return app.exec();}

import QtQuick 2.0 ListView {    width: 100; height: 100     model: myModel    delegate: Rectangle     {        height: 25        width: 100        Text { text: modelData }    }}

3.2、对象列表模型

#ifndef DATAOBJECT_H#define DATAOBJECT_H #include  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)public:    DataObject(QObject *parent=nullptr);    DataObject(const QString &name, const QString &color, QObject *parent=nullptr);     QString name() const;    void setName(const QString &name);     QString color() const;    void setColor(const QString &color); signals:    void nameChanged();    void colorChanged(); private:    QString m_name;    QString m_color;}; #endif // DATAOBJECT_H

#include #include "dataobject.h" DataObject::DataObject(QObject *parent)    : QObject(parent){} DataObject::DataObject(const QString &name, const QString &color, QObject *parent)    : QObject(parent), m_name(name), m_color(color){} QString DataObject::name() const{    return m_name;} void DataObject::setName(const QString &name){    if (name != m_name)     {        m_name = name;        emit nameChanged();    }} QString DataObject::color() const{    return m_color;} void DataObject::setColor(const QString &color){    if (color != m_color)     {        m_color = color;        emit colorChanged();    }}#include "dataobject.h" int main(int argc, char ** argv){    QGuiApplication app(argc, argv);     QList dataList;    dataList.append(new DataObject("Item 1", "red"));    dataList.append(new DataObject("Item 2", "green"));    dataList.append(new DataObject("Item 3", "blue"));    dataList.append(new DataObject("Item 4", "yellow"));     QQuickView view;    view.setResizeMode(QQuickView::SizeRootObjectToView);    QQmlContext *ctxt = view.rootContext();    ctxt->setContextProperty("myModel", QVariant::fromValue(dataList));     view.setSource(QUrl("qrc:view.qml"));    view.show();     return app.exec();}import QtQuick 2.0 ListView {    width: 100; height: 100     model: myModel    delegate: Rectangle     {        height: 25        width: 100        color: model.modelData.color        Text { text: name }    }}

3.3、QAbstractItemModel

#include #include  class Animal{public:    Animal(const QString &type, const QString &size);    QString type() const;    QString size() const; private:    QString m_type;    QString m_size;}; class AnimalModel : public QAbstractListModel{    Q_OBJECTpublic:    enum AnimalRoles    {        TypeRole = Qt::UserRole + 1,        SizeRole    };     AnimalModel(QObject *parent = nullptr);    void addAnimal(const Animal &animal);    int rowCount(const QModelIndex & parent = QModelIndex()) const;    QVariant data(const QModelIndex & index, int role = Qt::DisplayRole) const; protected:    QHash roleNames() const; private:    QList m_animals;};

#include "model.h" Animal::Animal(const QString &type, const QString &size)    : m_type(type), m_size(size){} QString Animal::type() const{    return m_type;} QString Animal::size() const{    return m_size;} AnimalModel::AnimalModel(QObject *parent)    : QAbstractListModel(parent){} void AnimalModel::addAnimal(const Animal &animal){    beginInsertRows(QModelIndex(), rowCount(), rowCount());    m_animals << animal;    endInsertRows();} int AnimalModel::rowCount(const QModelIndex & parent) const{    Q_UNUSED(parent)    return m_animals.count();} QVariant AnimalModel::data(const QModelIndex & index, int role) const{    if (index.row() < 0 || index.row() >= m_animals.count())        return QVariant();     const Animal &animal = m_animals[index.row()];    if (role == TypeRole)        return animal.type();    else if (role == SizeRole)        return animal.size();    return QVariant();} QHash AnimalModel::roleNames() const{    QHash 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);    QQmlContext *ctxt = view.rootContext();    ctxt->setContextProperty("myModel", &model);     view.setSource(QUrl("qrc:view.qml"));    view.show();     return app.exec();}

import QtQuick 2.0 ListView{    width: 200; height: 250     model: myModel    delegate: Text { text: "Animal: " + type + ", " + size }}

上述内容就是如何利用上下文属性将 C++ 对象嵌入 QML 里，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注行业资讯频道。