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

利用上下文属性将 C++ 对象嵌入 QML 里需要遵循以下步骤：

1. 构建 C++ 类，使其能够注册到 QML 中
2. 创建 QML 文件，利用上下文属性将 C++ 对象嵌入到 QML 中
3. 在 QML 中使用 C++ 对象

下面我们用两个示例说明这个过程。

示例一

假设我们需要向 QML 注册名为 Person 的 C++ 类，并将其实例化之后添加到 QML 上下文属性 myObject 中。步骤如下：

1. 构建 C++ 类

在 person.h 头文件中定义 Person 类：

#include <QObject>

class Person : public QObject
{
    Q_OBJECT
    Q_PROPERTY(QString name READ name WRITE setName NOTIFY nameChanged)
    Q_PROPERTY(int age READ age WRITE setAge NOTIFY ageChanged)

public:
    explicit Person(QObject *parent = nullptr);

    QString name() const;
    void setName(const QString &name);

    int age() const;
    void setAge(int age);

signals:
    void nameChanged();
    void ageChanged();

private:
    QString m_name;
    int m_age;
};

在 person.cpp 文件中实现 Person 类：

#include "person.h"

Person::Person(QObject *parent) : QObject(parent)
{
}

QString Person::name() const
{
    return m_name;
}

void Person::setName(const QString &name)
{
    if (name == m_name)
        return;

    m_name = name;
    emit nameChanged();
}

int Person::age() const
{
    return m_age;
}

void Person::setAge(int age)
{
    if (age == m_age)
        return;

    m_age = age;
    emit ageChanged();
}

2. 注册 C++ 类到 QML 中

在 main.cpp 文件中，将 Person 类注册到 QML：

#include <QGuiApplication>
#include <QQmlApplicationEngine>

#include "person.h"

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

    qmlRegisterType<Person>("MyTypes", 1, 0, "Person");

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

使用 qmlRegisterType 函数将 Person 类注册到 QML 中，MyTypes 是该类型所在的命名空间，1, 0 是该类型的主版本和次版本号，Person 是该类型在 QML 中的名称。

3. 创建 QML 文件

在 QML 文件 main.qml 中，将 Person 实例化并添加到 myObject 中。

import QtQuick 2.9
import MyTypes 1.0

ApplicationWindow {
    visible: true
    width: 400
    height: 300

    // 利用上下文属性将 Person 对象嵌入到 QML 中
    property Person myObject: Person {
        name: "John"
        age: 30
    }

    // 在 QML 中使用 Person 对象
    Text {
        text: "Name: " + myObject.name + "\nAge: " + myObject.age
    }
}

在 QML 文件中，使用 property 声明 myObject 为上下文属性，并将其实例化为 Person 类型。接着，在 QML 中使用 myObject 里的属性和方法。

示例二

假设我们需要向 QML 注册名为 Calculator 的 C++ 类，并将其实例化之后添加到 QML 上下文属性 myObject 中。这个例子与例子一的区别在于，Calculator 类需要接收并处理 QML 中用户点击按钮的信号。步骤如下：

1. 构建 C++ 类

在 calculator.h 头文件中定义 Calculator 类：

#include <QObject>

class Calculator : public QObject
{
    Q_OBJECT

public:
    explicit Calculator(QObject *parent = nullptr);

public slots:
    int add(int a, int b);
};

在 calculator.cpp 文件中实现 Calculator 类：

#include "calculator.h"

Calculator::Calculator(QObject *parent) : QObject(parent)
{
}

int Calculator::add(int a, int b)
{
    return a + b;
}

2. 注册 C++ 类到 QML 中

在 main.cpp 文件中，将 Calculator 类注册到 QML 中：

#include <QGuiApplication>
#include <QQmlApplicationEngine>

#include "calculator.h"

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

    qmlRegisterType<Calculator>("MyTypes", 1, 0, "Calculator");

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

3. 创建 QML 文件

在 QML 文件 main.qml 中，将 Calculator 实例化并添加到 myObject 中。用户点击 Button 时，会触发 onClicked 信号，此时调用 Calculator 类中的 add 方法。

import QtQuick 2.9
import QtQuick.Controls 2.2
import MyTypes 1.0

ApplicationWindow {
    visible: true
    width: 400
    height: 300

    // 利用上下文属性将 Calculator 对象嵌入到 QML 中
    property Calculator myObject: Calculator {}

    // 在 QML 中使用 Calculator 对象
    TextField {
        id: input1
        anchors.top: parent.top
        text: "10"
    }

    TextField {
        id: input2
        anchors.top: input1.bottom
        text: "20"
    }

    Button {
        id: button1
        anchors.top: input2.bottom
        text: "Add"
        onClicked: {
            var result = myObject.add(parseInt(input1.text), parseInt(input2.text))
            output.text = result.toString()
        }
    }

    TextField {
        id: output
        anchors.top: button1.bottom
    }
}

注意，在 Calculator 类中声明的公有方法需要声明为 public slots，才能在 QML 中调用。

至此，我们已经完成了将一个 C++ 对象嵌入到 QML 的过程。在这两个示例中，我们使用了不同的方法，但它们的本质都是利用上下文属性将 C++ 对象嵌入到 QML 中。