QML and Qt Quick Basics

1. What are Qt C++, QML, and Qt Quick, their differences and connections

Qt C++, QML, Qt Quick are different technologies in the Qt framework, Qt C++ is the technology used to implement logic and data, while QML and Qt Quick are technologies used to create GUI, they can work with each other or be used alone, According to different needs and scenarios, developers can choose the appropriate technology to develop Qt applications;

• Qt C++ is a C++-based application framework, which provides a series of C++ class libraries for GUI, network communication, database access, multimedia processing and other functions. Qt C++ also supports meta-object system, signal and slot mechanism, Features such as model view architecture, the advantages of Qt C++ include high performance, stability, compatibility, etc.;
• Qt Modeling Language (QML) is a declarative language for creating dynamic GUIs. QML uses JSON-style syntax, which can define the properties, layout, behavior, animation, etc. of UI elements. QML can also be used with C++ or other languages Interaction, to achieve logic and data processing, the advantages of QML include simplicity, flexibility, reusability, etc.;
• Qt Quick is a QML-based application framework that provides a series of QML types for creating high-performance, smooth, and responsive GUIs. Qt Quick also supports advanced features such as OpenGL ES rendering, particle systems, and shader effects , the advantages of Qt Quick include cross-platform, easy expansion, rich documentation and examples, etc.;

Step 1: Install Qt

To use QML and Qt Quick, you need to install Qt first. The latest version of Qt Creator can be downloaded from the Qt website, or installed using your package manager. Once installed, open Qt Creator and create a new project.

Step 2: Create the QML file

To create a QML file in Qt, right click on "Other Files" in the project tree and select "QML File". This will add a file called "main.qml" to the project. In this QML file, you can add UI pages and some interactive elements, such as buttons, text boxes and so on. Here is a simple example:

import QtQuick 2.0

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

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

In this example, we import the Qt Quick module and define a rectangle element. Inside the rectangle, we add a text element that will display "Hello World!" in the center of the rectangle. When you run this QML file, you should see a blue rectangle with the text "Hello World!" in the center.

Step 3: Integrate QML files with C++

Now that we have successfully created a simple QML file, the next step is to integrate it with C++. For this we need to create a C++ object and make it available in the QML context. Here is an example:

#include <QObject>
#include <QString>

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;
};

In this example, we define a class called "Person", which inherits from the QObject class. We also define a property (namely "name") using the Q_PROPERTY macro, which can be used in QML. This will allow us to access and modify this property from QML code. For example, here's how to use this class in 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"
    }
}

In this example, we create a new Person object and pass it to QML as the context object. In QML code, we can access the properties of the object just like JavaScript objects. In this case, we use "person.name" to display the name property of the Person object.

Step 4: Call the QML function in C++

Another interesting example is calling QML functions from C++ code. Here is an example:

// main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QObject>

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();
}

In this example, we have called a function called "showMessage" from C++ code using the invokeMethod() function of the QMetaObject class. This function is implemented in the QML file:

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
    }
}

In this example, we define a function called "showMessage" which prints out a message and displays it in the UI. In the C++ code, we call this function using the invokeMethod() function and pass "Hello from C++" as a parameter. When we run this example, a message is displayed at the bottom of the UI, "Hello from C++".

Summary: This article introduces the basics of QML and Qt Quick, and helps you understand them better through several C++ sample codes;