QML应用程序通常需要在C ++中处理更高级的性能密集型任务。如果C ++实现是从QObject派生的,最常见和最快的方法是将C ++类公开给QML运行时。假设您已安装Qt 5.7或更高版本,以下分步说明将指导您完成在QML应用程序中使用C ++类BackEnd的过程:
- 使用Qt Creator中的“ Qt Quick Application”模板创建一个新项目。注意:在“ 新建项目向导”的“ 定义项目详细信息”部分中,取消选中“ 使用ui.qml文件”选项。
- BackEnd向项目添加一个新的C ++类,并将其头文件内容替换为:
#ifndef BACKEND_H #define BACKEND_H #include <QObject> #include <QString> class BackEnd : public QObject { Q_OBJECT Q_PROPERTY(QString userName READ userName WRITE setUserName NOTIFY userNameChanged) public: explicit BackEnd(QObject *parent = nullptr); QString userName(); void setUserName(const QString &userName); signals: void userNameChanged(); private: QString m_userName; }; #endif // BACKEND_H
该Q_PROPERTY宏声明了可以从QML访问的属性。
- 将其C ++文件内容替换为:
#include "backend.h" BackEnd::BackEnd(QObject *parent) : QObject(parent) { } QString BackEnd::userName() { return m_userName; } void BackEnd::setUserName(const QString &userName) { if (userName == m_userName) return; m_userName = userName; emit userNameChanged(); }
每当值改变时,该setUserName功能就发出userNameChanged信号m_userName。可以使用onUserNameChanged处理程序从QML处理信号。
- 包含"backend.h"在main.cpp中, 在一个输入URL下注册为一个QML类,如下所示:
#include <QGuiApplication> #include <QQmlApplicationEngine> #include "backend.h" int main(int argc, char *argv[]) { QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling); QGuiApplication app(argc, argv); qmlRegisterType<BackEnd>("io.qt.examples.backend", 1, 0, "BackEnd"); QQmlApplicationEngine engine; const QUrl url(QStringLiteral("qrc:/main.qml")); QObject::connect(&engine, &QQmlApplicationEngine::objectCreated, &app, [url](QObject *obj, const QUrl &objUrl) { if (!obj && url == objUrl) QCoreApplication::exit(-1); }, Qt::QueuedConnection); engine.load(url); return app.exec(); }
BackEnd类注册为一种类型,可以通过导入URL“ io.qt.examples.backend 1.0” 从QML访问。
5.将main.qml内容替换为以下代码:
import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls 2.12 import io.qt.examples.backend 1.0 Window { visible: true width: 640 height: 480 title: qsTr("Hello World") BackEnd { id: backend } TextField { text: backend.userName placeholderText: qsTr("User name") anchors.centerIn: parent onTextChanged: backend.userName = text } }
该BackEnd实例使您可以访问该userName属性,该属性在TextField的text属性更改时进行更新。
现在可以运行该应用程序。