Quantcast
Channel: CSDN博客移动开发推荐文章
Viewing all articles
Browse latest Browse all 5930

将C++对象嵌入到带有上下文属性的QML中

$
0
0

简述

当加载一个 QML 对象到一个 C++ 应用程序中时,直接嵌入可以从 QML 代码中使用的一些 C++ 数据是非常有用的。例如,对嵌入的对象调用一个 C++ 函数,或者使用一个 C++ 对象实例作为 QML 视图的数据模型。

通过 QQmlContext 类可以将 C++ 数据注入到 QML 对象中。该类将数据暴露给一个 QML 对象的上下文,以便可以直接从 QML 代码中引用数据。

版权所有:一去丶二三里,转载请注明出处:http://blog.csdn.net/liang19890820

QQmlContext

QQmlContext 类定义了 QML 引擎内的上下文,上下文允许将数据暴露给由 QML 引擎实例化的 QML 组件。

每个 QQmlContext 包含一组属性,允许以名称将数据显式地绑定到上下文。通过调用 QQmlContext::setContextProperty() 来定义和更新上下文属性。

相应的接口:

void QQmlContext::setContextProperty(const QString &name, const QVariant &value)
简单的上下文属性,对应的值为 QVariant 类型。

void QQmlContext::setContextProperty(const QString &name, QObject *value)
相对来说稍微复杂一些,QObject * 对象类型。

可以看出,上下文属性可以保存 QVariant 或 QObject * 类型的值。也就是说,既可以使用这种方式注入简单的 QVariant 类型;也可以注入自定义 C++ 对象,并且这些对象可以在 QML 中被直接修改和读取。

设置简单的上下文属性

这里写图片描述

例如,下面的 QML 文本项,引用了一个当前范围中不存在的 currentDateTime 值:

// main.qml
import QtQuick 2.3

Rectangle {
    width: 200; height: 100

    Text {
        anchors.centerIn: parent
        text: currentDateTime
    }
}

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

// main.cpp
#include <QGuiApplication>
#include <QQuickView>
#include <QQmlContext>
#include <QDateTime>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQuickView view;
    // 设置上下文属性
    view.rootContext()->setContextProperty("currentDateTime", QDateTime::currentDateTime());
    view.setSource(QUrl("qrc:/main.qml"));
    view.setIcon(QIcon(":/logo.png"));
    view.setTitle(QStringLiteral("将C++对象嵌入到带有上下文属性的QML中"));
    view.show();

    return app.exec();
}

注意: 由于在特定上下文中评估 QML 中的所有求值表达式,因此如果上下文被修改,则该上下文中的所有绑定都将被重新求值。因此,应该在应用程序初始化之外谨慎使用上下文属性,因为这可能会降低应用程序性能。

将对象设置为上下文属性

修改上述示例,嵌入一个 QObject 实例而非一个 QDateTime 值,并且从 QML 调用对象实例上的一个函数:

// application_data.h
#ifndef APPLICATION_DATA_H
#define APPLICATION_DATA_H

#include <QObject>
#include <QDateTime>

class ApplicationData : public QObject
{
    Q_OBJECT

public:
    Q_INVOKABLE QDateTime getCurrentDateTime() const {
        return QDateTime::currentDateTime();
    }
};

#endif // APPLICATION_DATA_H

注意: 并非所有的 C++ 函数都可以从 QML 调用,除了 Q_INVOKABLE() 标记的 public 函数之外,还可以是 public 槽函数。

和前面的类似,只不过这里传递的是 QObject * 对象类型:

// main.cpp
#include <QGuiApplication>
#include <QQuickView>
#include <QQmlContext>
#include "application_data.h"

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQuickView view;
    // 设置上下文属性
    ApplicationData data;
    view.rootContext()->setContextProperty("applicationData", &data);
    view.setSource(QUrl("qrc:/main.qml"));
    view.setIcon(QIcon(":/logo.png"));
    view.setTitle(QStringLiteral("将C++对象嵌入到带有上下文属性的QML中"));
    view.show();

    return app.exec();
}

然后,就可以在 QML 中使用 applicationData:

// main.qml
import QtQuick 2.3

Rectangle {
    width: 200; height: 100

    Text {
        anchors.centerIn: parent
        text: applicationData.getCurrentDateTime()
    }
}

注意: 从 C++ 到 QML 返回的 date/time 可以通过 Qt.formatDateTime() 和相关函数进行格式化。

从上下文属性中接收信号

如果 QML 需要从上下文属性中接收信号,可以使用 Connections 类型进行连接。

上面的日期时间是固定不变的,我们来为其添加一个定时器(每秒更新),让时间跑起来:

这里写图片描述

例如,ApplicationData 具有一个名为 dataChanged() 的信号,在定时器超时后发射:

// application_data.h
#ifndef APPLICATION_DATA_H
#define APPLICATION_DATA_H

#include <QObject>
#include <QDateTime>
#include <QTimer>

class ApplicationData : public QObject
{
    Q_OBJECT

public:
    ApplicationData() {
        // 定时器
        QTimer *pTimer = new QTimer(this);
        pTimer->setInterval(1000);
        connect(pTimer, &QTimer::timeout, this, &ApplicationData::onTimeout);
        pTimer->start();
    }

    Q_INVOKABLE QDateTime getCurrentDateTime() const {
        return m_dateTime;
    }

signals:
    void dataChanged();

private slots:
    void onTimeout() {
        m_dateTime = QDateTime::currentDateTime();
        emit dataChanged();  // 超时后发射信号
    }

private:
    QDateTime m_dateTime;
};

#endif // APPLICATION_DATA_H

在 QML 中,定义一个 Connections 对象,将该信号连接至一个名为 onDataChanged 的处理程序:

// main.qml
import QtQuick 2.3

Rectangle {
    width: 200; height: 100

    Text {
        id: timer
        anchors.centerIn: parent
        text: "Timer"
    }

    Connections {  // 连接信号
        target: applicationData
        onDataChanged: {
            timer.text = applicationData.getCurrentDateTime()
            console.log("The application data changed!")
        }
    }
}

其中 target 为目标对象,也就是我们的上下文属性 applicationData。

作者:u011012932 发表于2017/3/22 19:09:28 原文链接
阅读:70 评论:0 查看评论

Viewing all articles
Browse latest Browse all 5930

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>