Detailed explanation and sample code of two methods of drawing UI in QT6

1. Detailed explanation of QML technology

1.1 Introduction to QML

QML is a declarative language used to design user interfaces. It is based on JavaScript, with concise syntax and powerful declarative features, suitable for rapid development of modern user interfaces.

1.2 Core concepts of QML

Components: Basic building blocks in QML, similar to classes in C++.
Properties: The properties of the component, used to define the appearance and behavior of the component.
Signals and Slots: Used for communication between components.
Statements: Used to define different states of components and their transformations.

1.3 QML Example: Simple Button

Here is a simple QML example showing how to create a button and respond to a click event.

// 
import QtQuick 2.15
import  2.15
 
ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: "QML Button Example"
 
    Button {
        text: "Click Me"
        : parent
        onClicked: {
            ("Button clicked!")
        }
    }
}

Explanation：

ApplicationWindowis the main window component in QML.
Buttonis a button component that sets text and click event handlers.

1.4 QML Example: Custom Components

The following example shows how to create a custom component and use it in the main window.

// 
import QtQuick 2.15
import  2.15
 
Button {
    property string customText: "Default Text"
    text: customText
    onClicked: {
        (customText + " clicked!")
    }
}
 
// 
import QtQuick 2.15
import  2.15
 
ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: "Custom QML Component"
 
    CustomButton {
        customText: "My Button"
        : parent
    }
}

Explanation：

Define a custom button component withcustomTextAttributes.
existUse this custom component in and set its properties.

2. Detailed explanation of C++ Widgets technology

2.1 Introduction to C++ Widgets

C++ Widgets is a traditional UI development technology of Qt, based on C++ classes and event-driven models. It provides rich control and layout management functions, suitable for developing complex application interfaces.

2.2 Core concepts of C++ Widgets

Controls (Widgets): LikeQPushButton、QLabeletc., used to build a user interface.
Layouts (Layouts): LikeQVBoxLayout、QHBoxLayoutetc., used to manage the arrangement of controls.
Signals and Slots: Used for communication between controls.

2.3 C++ Widgets Example: Simple Buttons

Here is a simple C++ Widgets example showing how to create a button and respond to a click event.

// 
#include <QApplication>
#include <QPushButton>
#include <QDebug>
 
int main(int argc, char *argv[]) {
    QApplication app(argc, argv);
 
    QPushButton button("Click Me");
    (200, 100);
    ();
 
    QObject::connect(&button, &QPushButton::clicked, []() {
        qDebug() << "Button clicked!";
    });
 
    return ();
}

Explanation：

QPushButtonis a button control that sets the text and size.
useQObject::connectConnect the click signal of the button to a lambda function to handle the click event.

2.4 C++ Widgets Example: Custom Controls

The following example shows how to create a custom control and use it in the main window.

// 
#ifndef CUSTOMBUTTON_H
#define CUSTOMBUTTON_H
 
#include <QPushButton>
 
class CustomButton : public QPushButton {
    Q_OBJECT
public:
    explicit CustomButton(const QString &text, QWidget *parent = nullptr);
    void setCustomText(const QString &text);
 
signals:
    void customClicked();
 
private slots:
    void onButtonClicked();
 
private:
    QString m_customText;
};
 
#endif // CUSTOMBUTTON_H
 
// 
#include ""
#include <QDebug>
 
CustomButton::CustomButton(const QString &text, QWidget *parent)
    : QPushButton(text, parent), m_customText(text) {
    connect(this, &QPushButton::clicked, this, &CustomButton::onButtonClicked);
}
 
void CustomButton::setCustomText(const QString &text) {
    m_customText = text;
}
 
void CustomButton::onButtonClicked() {
    qDebug() << m_customText << " clicked!";
    emit customClicked();
}
 
// 
#include <QApplication>
#include ""
 
int main(int argc, char *argv[]) {
    QApplication app(argc, argv);
 
    CustomButton button("My Button");
    (200, 100);
    ();
 
    QObject::connect(&button, &CustomButton::customClicked, []() {
        qDebug() << "Custom button clicked signal received!";
    });
 
    return ();
}

Explanation：

CustomButtonInherited fromQPushButton, added custom properties and signals.
existCreate and use the custom button in and connect its custom signal.

3. Comparison between QML and C++ Widgets

characteristic	QML	C++ Widgets
Grammar	Declarative, based on JavaScript	Imperative, based on C++
Development speed	Fast, suitable for UI design	Slower, suitable for complex logic
Performance	Rely on engine optimization, suitable for simple UI	High performance, suitable for complex applications
Flexibility	High, but complex logic needs to be combined with C++	High, suitable for complex logic
Learning curve	Lower, suitable for UI designers	Higher, suitable for C++ developers
Cross-platform support	excellent	excellent

4. Comprehensive example: Combining QML and C++

In actual projects, the advantages of QML and C++ are usually combined. The following example shows how to use C++ classes in QML.

4.1 Creating a C++ class

// 
#ifndef MYCPPCLASS_H
#define MYCPPCLASS_H
 
#include <QObject>
 
class MyCppClass : public QObject {
    Q_OBJECT
public:
    explicit MyCppClass(QObject *parent = nullptr);
    Q_INVOKABLE void doSomething();
 
signals:
    void somethingDone();
};
 
#endif // MYCPPCLASS_H
 
// 
#include ""
#include <QDebug>
 
MyCppClass::MyCppClass(QObject *parent) : QObject(parent) {}
 
void MyCppClass::doSomething() {
    qDebug() << "Doing something in C++!";
    emit somethingDone();
}

4.2 Register C++ class to QML

// 
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include ""
 
int main(int argc, char *argv[]) {
    QGuiApplication app(argc, argv);
 
    qmlRegisterType<MyCppClass>("", 1, 0, "MyCppClass");
 
    QQmlApplicationEngine engine;
    (QUrl(QStringLiteral("qrc:/")));
 
    return ();
}

4.3 Using C++ classes in QML

// 
import QtQuick 2.15
import  2.15
import  1.0
 
ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: "QML with C++ Example"
 
    MyCppClass {
        id: myCppClass
    }
 
    Button {
        text: "Call C++ Function"
        : parent
        onClicked: {
            ();
        }
    }
 
    Connections {
        target: myCppClass
        onSomethingDone: {
            ("C++ function executed!");
        }
    }
}

Explanation：

MyCppClassis a C++ class registered in QML.
Create an instance of the class in QML and call its methods.
useConnectionsComponents connect signals to C++ classes.

5. Summary

Qt6 provides two powerful UI drawing technologies: QML and C++ Widgets. QML is suitable for rapid development of modern user interfaces, while C++ Widgets is suitable for developing complex application logic. In actual projects, the advantages of both are usually combined to achieve the best development efficiency and user experience.

The above is the detailed explanation of the two methods of drawing UI in QT6 and the detailed example code. For more information on the method of drawing UI in QT6, please pay attention to my other related articles!