QT6中绘制UI的两种方法详解与示例代码

更新时间：2025年05月18日 11:09:31 作者：code_shenbing

Qt6 提供了两种主要的 UI 绘制技术：QML (Qt Meta-Object Language) 和 C++ Widgets,这两种技术各有优势,适用于不同的开发场景,本文将详细介绍这两种技术,并通过示例代码展示它们的用法,需要的朋友可以参考下

一、QML 技术详解

1.1 QML 简介

QML 是一种声明式语言，用于设计用户界面。它基于 JavaScript，具有简洁的语法和强大的声明式特性，适合快速开发现代化的用户界面。

1.2 QML 的核心概念

组件 (Components)：QML 中的基本构建块，类似于 C++ 中的类。
属性 (Properties)：组件的属性，用于定义组件的外观和行为。
信号与槽 (Signals and Slots)：用于组件间的通信。
状态 (States)：用于定义组件的不同状态及其转换。

1.3 QML 示例：简单按钮

以下是一个简单的 QML 示例，展示如何创建一个按钮并响应点击事件。

// main.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
 
ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: "QML Button Example"
 
    Button {
        text: "Click Me"
        anchors.centerIn: parent
        onClicked: {
            console.log("Button clicked!")
        }
    }
}

解释：

ApplicationWindow 是 QML 中的主窗口组件。
Button 是一个按钮组件，设置了文本和点击事件处理程序。

1.4 QML 示例：自定义组件

以下示例展示如何创建一个自定义组件并在主窗口中使用它。

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

解释：

CustomButton.qml 定义了一个自定义按钮组件，具有 customText 属性。
在 main.qml 中使用该自定义组件，并设置其属性。

二、C++ Widgets 技术详解

2.1 C++ Widgets 简介

C++ Widgets 是 Qt 的传统 UI 开发技术，基于 C++ 类和事件驱动模型。它提供了丰富的控件和布局管理功能，适合开发复杂的应用程序界面。

2.2 C++ Widgets 的核心概念

控件 (Widgets)：如 QPushButton、QLabel 等，用于构建用户界面。
布局 (Layouts)：如 QVBoxLayout、QHBoxLayout 等，用于管理控件的排列方式。
信号与槽 (Signals and Slots)：用于控件间的通信。

2.3 C++ Widgets 示例：简单按钮

以下是一个简单的 C++ Widgets 示例，展示如何创建一个按钮并响应点击事件。

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

解释：

QPushButton 是一个按钮控件，设置了文本和大小。
使用 QObject::connect 连接按钮的点击信号到一个 lambda 函数，处理点击事件。

2.4 C++ Widgets 示例：自定义控件

以下示例展示如何创建一个自定义控件并在主窗口中使用它。

// CustomButton.h
#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
 
// CustomButton.cpp
#include "CustomButton.h"
#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();
}
 
// main.cpp
#include <QApplication>
#include "CustomButton.h"
 
int main(int argc, char *argv[]) {
    QApplication app(argc, argv);
 
    CustomButton button("My Button");
    button.resize(200, 100);
    button.show();
 
    QObject::connect(&button, &CustomButton::customClicked, []() {
        qDebug() << "Custom button clicked signal received!";
    });
 
    return app.exec();
}

解释：

CustomButton 继承自 QPushButton，添加了自定义属性和信号。
在 main.cpp 中创建并使用该自定义按钮，并连接其自定义信号。

三、QML 与 C++ Widgets 的对比

特性	QML	C++ Widgets
语法	声明式，基于 JavaScript	命令式，基于 C++
开发速度	快速，适合 UI 设计	较慢，适合复杂逻辑
性能	依赖引擎优化，适合简单 UI	高性能，适合复杂应用
灵活性	高，但复杂逻辑需结合 C++	高，适合复杂逻辑
学习曲线	较低，适合 UI 设计师	较高，适合 C++ 开发者
跨平台支持	优秀	优秀

四、综合示例：结合 QML 和 C++

在实际项目中，通常会结合 QML 和 C++ 的优势。以下示例展示如何在 QML 中使用 C++ 类。

4.1 创建 C++ 类

// MyCppClass.h
#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
 
// MyCppClass.cpp
#include "MyCppClass.h"
#include <QDebug>
 
MyCppClass::MyCppClass(QObject *parent) : QObject(parent) {}
 
void MyCppClass::doSomething() {
    qDebug() << "Doing something in C++!";
    emit somethingDone();
}

4.2 注册 C++ 类到 QML

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

4.3 在 QML 中使用 C++ 类

// main.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
import com.example 1.0
 
ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: "QML with C++ Example"
 
    MyCppClass {
        id: myCppClass
    }
 
    Button {
        text: "Call C++ Function"
        anchors.centerIn: parent
        onClicked: {
            myCppClass.doSomething();
        }
    }
 
    Connections {
        target: myCppClass
        onSomethingDone: {
            console.log("C++ function executed!");
        }
    }
}

解释：

MyCppClass 是一个 C++ 类，注册到 QML 中。
在 QML 中创建该类的实例，并调用其方法。
使用 Connections 组件连接 C++ 类的信号。

五、总结

Qt6 提供了两种强大的 UI 绘制技术：QML 和 C++ Widgets。QML 适合快速开发现代化的用户界面，而 C++ Widgets 适合开发复杂的应用程序逻辑。在实际项目中，通常会结合两者的优势，以实现最佳的开发效率和用户体验。

以上就是QT6中绘制UI的两种方法详解与示例代码的详细内容，更多关于QT6绘制UI的方法的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

C++获取当前时间戳的几种常用方法
在我们写程序时,通过写时间戳可以方便我们进行日志记录、调试、计算程序运行时间、缓存过期控制等,因此下面介绍使用C++代码获取时间戳的方法以及一些常见的应用场景,需要的朋友可以参考下
2025-08-08
C语言基础之二分查找知识最全汇总
这篇文章主要介绍了C语言基础之二分查找知识最全汇总,文中有非常详细的二分查找基础知识详解,对正在学习C语言基础的小伙伴们有非常好的帮助,需要的朋友可以参考下
2021-04-04
C++获取项目路径的两种方式详解
这篇文章主要介绍了C++获取项目路径的两种方式的相关资料,需要的朋友可以参考下，希望能够给你带来帮助
2021-10-10
C语言排序之堆排序
这篇文章主要介绍了C语言排序之堆排序，文章基于C语言的相关资料展开详细内容，具有一定的参考资料，需要的小伙伴可以参考一下
2022-04-04
C++学习之指针的使用详解
这篇文章主要为大家详细介绍了C++中指针的相关知识，文中的示例代码讲解详细，对我们的学习或工作有一定的价值，感兴趣的小伙伴可以了解一下
2023-03-03
C语言绘制曲线图的示例代码
这篇文章主要介为大家详细绍了如何使用C语言绘制统计图中的曲线图,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2024-02-02
C/C++中typedef的用法大全
typedef用法一共七种，分别是：为基本数据类型起别名、为结构体起别名、为指针类型起别名、为数组类型起别名、为枚举类型起别名、为模版函数起别名。本文就来分别讲讲这7个用法的具体实现吧
2023-04-04
从零实现一个 C++ 轻量级日志系统原理与实践指南
本文从零开始手搓一个简易C++日志工具,详细介绍了日志系统的理念、设计、实现及优化,核心包括：日志格式化时间和等级,基于策略模式实现异步刷新,使用RAII机制实现自动刷新,以及对线程安全和可重入性的深度考量,最后还提供了优化方向,帮助读者完善日志系统
2026-05-05
详解C++中左值与右值的概念与应用
左值（Lvalue）和右值（Rvalue）是C++和其他编程语言中用来区分表达式的概念。这篇文章主要为大家详细介绍了它们的概念与应用，需要的可以参考一下
2023-03-03
C++ 头文件系列(set)详解
一般而言，每个C++/C程序通常由头文件和定义文件组成。头文件作为一种包含功能函数、数据接口声明的载体文件，主要用于保存程序的声明，而定义文件用于保存程序的实现。
2017-02-02