QML和Qt Quick

1、Qt C++，QML，Qt Quick 是什么，区别和联系

Qt C++，QML，Qt Quick 是Qt框架中的不同技术，Qt C++ 是用于实现逻辑和数据的技术，而 QML 和 Qt Quick 是用于创建 GUI 的技术，它们可以相互配合，也可以单独使用，根据不同的需求和场景，开发者可以选择合适的技术来开发 Qt 应用程序；

• Qt C++ 是一个基于 C++ 的应用程序框架，它提供了一系列的 C++ 类库，用于实现 GUI、网络通信、数据库访问、多媒体处理等功能，Qt C++ 还支持元对象系统、信号和槽机制、模型视图架构等特性，Qt C++ 的优点包括高性能、稳定性、兼容性等；
• Qt Modeling Language（QML）是一种声明式语言，用于创建动态的 GUI，QML 采用 JSON 风格的语法，可以定义 UI 元素的属性、布局、行为、动画等，QML 还可以和 C++ 或其他语言进行交互，实现逻辑和数据的处理，QML 的优点包括简洁、灵活、可重用等；
• Qt Quick 是一个基于 QML 的应用程序框架，它提供了一系列的 QML 类型，用于创建高性能、流畅、响应式的 GUI，Qt Quick 还支持 OpenGL ES 渲染、粒子系统、着色器效果等高级功能，Qt Quick 的优点包括跨平台、易扩展、丰富的文档和示例等；

第一步：安装Qt

要使用QML和Qt Quick，您需要先安装Qt。可以从Qt的官网下载最新版本的Qt Creator，或者使用您的包管理器进行安装。安装完成后，打开Qt Creator并创建一个新项目。

第二步：创建QML文件

要在Qt中创建QML文件，请右键单击项目树中的“其他文件”并选择“QML文件”。这将在项目中添加一个名为“main.qml”的文件。在这个QML文件中，您可以添加UI页面以及一些交互元素，例如按钮、文本框等等。下面是一个简单的示例：

import QtQuick 2.0

Rectangle {
    width: 200
    height: 200
    color: "blue"

    Text {
        text: "Hello World!"
        anchors.centerIn: parent
        font.pixelSize: 36
    }
}

在这个示例中，我们导入了Qt Quick模块并定义了一个矩形元素。在矩形中，我们添加了一个文本元素，它会在矩形的中心显示“Hello World!”。运行这个QML文件时，应该可以看到一个蓝色的矩形，并且在中心显示了文本“Hello World!”。

第三步：将QML文件与C++集成

现在我们已经成功创建了一个简单的QML文件，接下来是将它与C++集成。为此，我们需要创建一个C++对象并使其可用于QML上下文中。以下是一个示例：

#include 
#include 

class Person : public QObject
{
    Q_OBJECT
    Q_PROPERTY(QString name READ getName WRITE setName NOTIFY nameChanged)

public:
    explicit Person(QObject *parent = nullptr) : QObject(parent) {}

    QString getName() const { return m_name; }
    void setName(const QString &name) {
        if (m_name != name) {
            m_name = name;
            emit nameChanged();
        }
    }

signals:
    void nameChanged();

private:
    QString m_name;
};

在这个示例中，我们定义了一个名为“Person”的类，它继承自QObject类。我们还使用Q_PROPERTY宏定义了一个属性（即“name”），它可以在QML中使用。这将允许我们从QML代码中访问和修改该属性。例如下面是如何在QML中使用这个类：

import QtQuick 2.0

Rectangle {
    width: 200
    height: 200
    color: "blue"

    Text {
        text: person.name
        anchors.centerIn: parent
        font.pixelSize: 36
    }

    Person {
        id: person
        name: "John Doe"
    }
}

在这个示例中，我们创建了一个新的Person对象并将其作为上下文对象传递给QML。在QML代码中，我们可以像访问JavaScript对象一样访问该对象的属性。在这种情况下，我们使用“person.name”来显示Person对象的名称属性。

第四步：在C++中调用QML函数

另一个有趣的示例是在C++代码中调用QML函数。以下是一个示例：

// main.cpp

#include 
#include 
#include 

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

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    QObject* rootObject = engine.rootObjects().first();
    QMetaObject::invokeMethod(rootObject, "showMessage",
                              Q_ARG(QString, "Hello from C++"));

    return app.exec();
}

在这个示例中，我们使用QMetaObject类的invokeMethod()函数从C++代码中调用了名为“showMessage”的函数。这个函数是在QML文件中实现的：

import QtQuick 2.0

Rectangle {
    width: 200
    height: 200
    color: "blue"

    Text {
        text: "Hello World!"
        anchors.centerIn: parent
        font.pixelSize: 36
    }

    function showMessage(msg) {
        console.log(msg)
        message.text = msg
    }

    Text {
        id: message
        text: "No message yet"
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
    }
}

在这个示例中，我们定义了一个名为“showMessage”的函数，它会打印出一个消息并将其显示在UI中。在C++代码中，我们使用invokeMethod()函数调用这个函数，并传递“Hello from C++”作为参数。当我们运行这个示例时，在UI底部会显示一条消息，“Hello from C++”。

总结：这篇文章介绍了QML和Qt Quick的基础知识，并通过几个C++示例代码帮助您更好地了解它们；