集成QML和C ++

QML应用程序通常需要在C ++中处理更高级的性能密集型任务。如果C ++实现是从QObject派生的，最常见和最快的方法是将C ++类公开给QML运行时。假设您已安装Qt 5.7或更高版本，以下分步说明将指导您完成在QML应用程序中使用C ++类BackEnd的过程：

1. 使用Qt Creator中的“ Qt Quick Application”模板创建一个新项目。注意：在“ 新建项目向导”的“ 定义项目详细信息”部分中，取消选中“ 使用ui.qml文件”选项。
2. 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访问的属性。

1. 将其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处理信号。

1. 包含"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属性更改时进行更新。

现在可以运行该应用程序。