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

一、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的方法的资料请关注代码网其它相关文章！

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

一、qml 技术详解

1.1 qml 简介

1.2 qml 的核心概念

1.3 qml 示例：简单按钮

1.4 qml 示例：自定义组件

二、c++ widgets 技术详解

2.1 c++ widgets 简介

2.2 c++ widgets 的核心概念

2.3 c++ widgets 示例：简单按钮

2.4 c++ widgets 示例：自定义控件

三、qml 与 c++ widgets 的对比

四、综合示例：结合 qml 和 c++

4.1 创建 c++ 类

4.2 注册 c++ 类到 qml

4.3 在 qml 中使用 c++ 类

五、总结

推荐阅读

C语言中文件读取中文乱码问题解析与解决方案

PyQt5 QItemSelection类使用小结

PyQt5 QStyleOptionViewItem类的具体使用

基于PyQt6实现智能视频分割器

VSCode中C/C++安装、配置以及使用的完整指南(适合新手小白)

Kotlin 中 infix 关键字的原理和使用场景解析

猜你喜欢

发表评论