【GUI开发基础】

GUI开发基础

  • 🌟项目文件组成
    • ✨浅析Pro文件配置
  • 🌟Qt设计师
  • 🌟剖析UI文件运行机制
  • 🌟UI设计方式
    • ✨可视化UI设计
    • ✨代码化UI设计

在这里插入图片描述

🌟项目文件组成

创建一个QtGUI项目：

  • open QtCreator —> select Creator Project —> select Application(Qt)/Qt Widgets Application —> fix Project Name and Project Path—> select Build System : qmake —> fix Qt UI Class Name and Base Class Name —> skip translation —> select Build Version —> Completed

完成一个GUI项目的创建，我可以在项目所在文件夹看到一个GUI项目的文件组成。
在这里插入图片描述

  • .pro文件：存储Qt项目设置的文件。
  • .pro.user文件：用于记录打开工程的路径，所用的编译器、构建的工具链、生成目录、打开工程的qt-creator的版本等。 当更换编译环境时，要将其删除。
  • main.cpp文件：存放程序入口函数文件，里面通常只包含一个main函数。
  • mainwindow.cpp与mainwindow.h文件：是我刚刚创建的窗体类的源文件和头文件。
  • mainwindow.ui文件：一个XML格式存储的窗体上的元件及其布局的文件。

✨浅析Pro文件配置

//QT 字段后关联的是当前开发应用引入的QT模块，core gui是Qt用于GUI设计的类库模块，如果开发控制台程序就不用添加core gui
//pro文件中注释 使用‘#’
QT       += core gui
# sql					Qt提供的数据库模块
# network				Qt提供的网络模块
# xml					Qt提供的xml文件处理模块
# concurrent			Qt提供的一些高级工具，用于并发编程，特别是线程和进程管理。
# axcontainer			Qt提供的用于在应用程序中嵌入和管理ActiveX控件的模块。
# webenginewidgets		Qt提供的用于在应用程序中嵌入和显示Web内容的模块。
# multimedia			Qt提供的用于处理多媒体数据，包括音频、视频、图像等
# multimediawidgets		Qt提供的用于创建和处理多媒体小部件（widgets）的库

//如果高于Qt版本，QT引入widgets模块
greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

//CONFIG 指定项目配置和编译器选项。这些值在内部通过Qmake识别，具有特殊的含义。
CONFIG += c++17
# c++11					支持C++11语法。
# c++17					支持C++17语法。
# release				当前项目已发布模式构建。
# debug					当前项目已调试模式构建。ps：如果指定了有多个构建模式，以最后一个为生效版本。
# debug_and_release		当前项目构建debug和release两种模式。ps：一般可以去除这个选项，不然生成的路径下会创建debug和release两个不同的文件夹
# debug_and_release_target 默认设置此选项。如果还设置了debug_and_release，则调试和发布构建最终会在单独的调试和发布目录中。
# build_all 			当前项目的debug和release版本都会被构建

//定义项目名称 

TARGET = GUIDemo

//输出目录 $$PWD 表示PRO文件的位置   ./ 表示exe文件的位置
DESTDIR = $$PWD/../bin

//库文件目录 用于引入库文件路径
INCLUDEPATH += \

//依赖文件目录 
DEPENDPATH += \

//SOURCES 引入当前项目需要构建的源文件
SOURCES += \
    main.cpp \
    mainwindow.cpp


//HEADERS  引入当前项目需要构建的头文件
HEADERS += \
    mainwindow.h

//FORMS 引入当前项目需要构建的UI文件
FORMS += \
    mainwindow.ui

🌟Qt设计师

  • 📗Qt设计师是一个用于设计和使用图形用户界面(GUI)的工具，它基于Qt部件(Widgets)进行工作。

  • 📕通过Qt设计师，用户可以以所见即所得的方式构建和定制自己的窗口(Windows)或对话框(Dialogs)，并提供了不同的方法来测试它们。

  • 📘Qt设计师的核心优势在于其强大的信号-槽机制，能够无缝地将由Qt设计师创建的部件或窗体与手工编写的代码整合在一起，从而轻松地为图形元素定义行为。

  • 📙此外，Qt设计师设置的所有属性均可以在代码中动态地修改，增加了其灵活性和可扩展性。

  • 📓QtCreator这个IDE中已经集成了Qt设计师在其中，用户可以通过(快捷键Shift+F4)编辑窗口类的.ui文件来进入UI设计师界面。此外，QtCreator提供了独立的Qt设计师应用，方便用户在Visual Studio上通过Qt设计师来开发Qt图形界面。

下图是Qt设计师界面：
在这里插入图片描述

  • 布局和界面设计工具栏：窗口上方的一个工具栏，工具栏的按钮主要实现布局和界面设计。
  • 对象浏览器(Object Inspector)：窗口右上方的是Object Inspector，用树状视图显示窗体上各组件之间的布局包含关系，视图有两列，显示每个组件的对象名称和类名称。
  • 属性编辑器(Property Editor)：窗口右下方是属性编辑器，是界面设计时最常用到的编辑器。属性编辑器显示某个选中的组件或窗体的各种属性及其取值，可以在属性编辑器里修改这些属性的值。(PS：1.属性编辑器是按照组件的继承关系来展示属性值配置的。2.组件的属性值还可以在程序运行时来动态配置，通过代码来进行UI设计。)

🌟剖析UI文件运行机制

项目中的窗口类是如何与UI文件绑定的？

📖mainwindow.h解析：

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

//这里通过Qt的宏定义了Ui命名控件，你会发现Ui的类名竟然和窗口类的名称相同，这里的类名并不是当前类的名称
QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private:
//这里定义了一个指针，指向可视化设计的界面，在当前类中访问绑定的UI类的组件，都需要通过这个指针ui来访问。
    Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H

📖mainwindow.cpp解析：

#include "mainwindow.h"
#include "ui_mainwindow.h"//这个文件在我们创建项目时并没存在，它是在qmake编译项目时才会生成。

//执行父类QMainWindow的构造函数，创建Ui:MainWindow类的对象ui。这ui就是MainWindow中private部分定义的指针变量ui。
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
//执行了Ui:MainWindow类的setupUi()函数，这个函数实现窗口的生成与各种属性的设置、信号与槽的关联。
    ui->setupUi(this);
}

MainWindow::~MainWindow()
{
//简单地删除用new创建的指针ui。
    delete ui;
}

📖mainwindow.ui解析：

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>800</width>
    <height>600</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <widget class="QWidget" name="centralwidget"/>
  <widget class="QMenuBar" name="menubar"/>
  <widget class="QStatusBar" name="statusbar"/>
 </widget>
 <resources/>
 <connections/>
</ui>
//定义了窗口类中所有组件的属性、布局信息。

📖ui_mainwindow.h解析：

/********************************************************************************
** Form generated from reading UI file 'mainwindow.ui'
**
** Created by: Qt User Interface Compiler version 5.14.2
**
** WARNING! All changes made in this file will be lost when recompiling UI file!
********************************************************************************/

#ifndef UI_MAINWINDOW_H
#define UI_MAINWINDOW_H

#include <QtCore/QVariant>
#include <QtWidgets/QApplication>
#include <QtWidgets/QMainWindow>
#include <QtWidgets/QMenuBar>
#include <QtWidgets/QStatusBar>
#include <QtWidgets/QWidget>

QT_BEGIN_NAMESPACE

class Ui_MainWindow
{
public:
    QWidget *centralwidget;
    QMenuBar *menubar;
    QStatusBar *statusbar;

    void setupUi(QMainWindow *MainWindow)
    {
        if (MainWindow->objectName().isEmpty())
            MainWindow->setObjectName(QString::fromUtf8("MainWindow"));
        MainWindow->resize(800, 600);
        centralwidget = new QWidget(MainWindow);
        centralwidget->setObjectName(QString::fromUtf8("centralwidget"));
        MainWindow->setCentralWidget(centralwidget);
        menubar = new QMenuBar(MainWindow);
        menubar->setObjectName(QString::fromUtf8("menubar"));
        MainWindow->setMenuBar(menubar);
        statusbar = new QStatusBar(MainWindow);
        statusbar->setObjectName(QString::fromUtf8("statusbar"));
        MainWindow->setStatusBar(statusbar);

        retranslateUi(MainWindow);

        QMetaObject::connectSlotsByName(MainWindow);
    } // setupUi

    void retranslateUi(QMainWindow *MainWindow)
    {
        MainWindow->setWindowTitle(QCoreApplication::translate("MainWindow", "MainWindow", nullptr));
    } // retranslateUi

};

namespace Ui {
    class MainWindow: public Ui_MainWindow {};
} // namespace Ui

QT_END_NAMESPACE

#endif // UI_MAINWINDOW_H

通过查看ui_mainwindow.h文件的内容，发现它主要做了下面一些工作：

  1. 定义了一个Ui_MainWindow类，用于封装可视化设计的界面。
  2. 自动生成了界面各组件的类成员变量定义。在public部分为界面上每个组件定义了一个指针变量，变量的名称就是用户自定义的ObjectName。
  3. 定义了setupUi()函数，这个函数用于创建各个界面组件，并设置其位置、大小、文字内容、字体等属性，设置信号与槽的关联。

接下来，setupUi() 调用了函数 retranslateUi(MainWindow)，用来设置界面各组件的文本内容属性，如标签的文字、按键的文字、窗体的标题等。将界面上的文字设置的内容独立出来作一个函数retranslateUi ()，在设计多语言界面才会用到这个函数。(PS:在使用Qt提供的语言家设计多语言版本时，可以为界面中所有控件的文本重新命名。)

在这里插入图片描述

🌟UI设计方式

在Qt Creator中，UI设计主要分为两种方式：可视化UI设计和代码化UI设计。这两种方法各有优点，适用于不同的开发需求和场景。

✨可视化UI设计

📘可视化UI设计是通过Qt Creator内置的图形化设计工具（Qt Designer）来创建用户界面的方式。开发者可以直接拖放控件到窗体上，调整属性和布局，而无需编写代码。
这种方法通常涉及以下步骤：

  1. 拖放控件：从工具箱中拖放各种UI控件（如按钮、标签、文本框等）到设计窗口。
  2. 设置属性：通过属性编辑器调整控件的属性，如大小、位置、文本、颜色等。
  3. 布局管理：使用布局管理器（如水平布局、垂直布局、网格布局等）组织控件，以确保界面在不同窗口大小下的自适应。
  4. 信号与槽：在设计器中连接控件的信号与槽，实现控件之间的交互。

👍优点：

  1. 直观性强：通过图形化界面，设计过程更加直观和可视化。
  2. 效率高：无需编写大量的UI代码，设计速度快。
  3. 易于调整：可以直接在设计器中调整和查看UI效果。

👎缺点：

  1. 灵活性有限：对于一些复杂的界面和动态生成的控件，可能不如代码化设计灵活。
  2. 学习成本：需要熟悉Qt Designer的使用。

✨代码化UI设计

📘代码化UI设计是通过编写代码来创建和管理用户界面的方式。开发者使用Qt的C++或Python（通过PyQt或PySide）来手动定义控件、布局和交互逻辑。
这种方法通常涉及以下步骤：

  1. 定义控件：在代码中创建UI控件对象（如QPushButton、QLabel等）。
  2. 设置属性：通过代码设置控件的属性，如文本、大小、位置等。
  3. 布局管理：使用布局管理器对象（如QHBoxLayout、QVBoxLayout等）组织控件。
  4. 信号与槽：通过代码连接控件的信号与槽，实现交互逻辑。

👍优点：

  1. 灵活性强：可以实现高度自定义和复杂的UI设计，适合动态生成控件的场景。
  2. 可维护性：对于习惯代码化管理的开发者，更容易进行版本控制和代码管理。
  3. 更强的控制：开发者可以对控件的创建和管理进行精细控制。

👎缺点：

  1. 开发速度慢：需要编写大量的代码，初期开发速度较慢。
  2. 复杂性高：对于大型界面和复杂布局，代码化设计可能更加繁琐。

综合考虑
在实际开发中，很多开发者会综合使用这两种方法。例如，可以通过可视化UI设计快速创建初始界面，然后在代码中进行进一步的自定义和逻辑处理。这样既能提高开发效率，又能保证灵活性和可维护性。对于简单和标准化的界面设计，可视化UI设计更为合适；而对于需要高度定制和动态生成的界面，代码化UI设计则更为适用。
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/647868.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Nvidia 如何成为 AI 训练的超级强国

Nvidia 如何成为 AI 训练的超级强国

周三&#xff0c;英伟达公布了第一季度的财务业绩&#xff0c;再次超出了分析师的预期。在截至 4 月 28 日的季度中&#xff0c;该公司的利润同比飙升 262%&#xff0c;股价一度创下 1000 美元以上的新高。 目前&#xff0c;英伟达的市值超过 2.3 万亿美元&#xff0c;是全球第…
阅读更多...
从0开始学统计-什么是相关？

从0开始学统计-什么是相关？

1.什么是统计学相关? 在统计学中&#xff0c;“相关”&#xff08;Correlation&#xff09;是指两个变量之间的线性关系程度。相关关系可以表明两个变量在某种程度上共同变化的趋势&#xff0c;但不意味着因果关系。相关的主要衡量方法是相关系数&#xff08;Correlation Coe…
阅读更多...
【Linux-INPUT输入的子系统】

【Linux-INPUT输入的子系统】

Linux-INPUT输入的子系统 ■ input 子系统简介■ input 驱动编写流程■ ■ input 子系统简介 input 子系统就是管理输入的子系统&#xff0c; input 子系统分为 input 驱动层、 input 核心层、 input 事件处理层&#xff0c;最终给用户空间提供可访问的设备节点 ■ input 驱…
阅读更多...
shell脚本实战--批量修改文件名

shell脚本实战--批量修改文件名

字符串截取 先来了解一下shell字符串相关操作的变量 # 从开头删除匹配最短 ## 从开头删除匹配最长 % 从结尾削除匹配最短 %% 从结尾删除匹配最长#指定字符内容截取 a*c 匹配开头为a&#xff0c;中间任意个字符&#xff0c;结尾为c的字符串 a*C 匹配…
阅读更多...
web学习笔记（五十八）

web学习笔记（五十八）

目录 1. v-model 双向数据绑定 2. 事件修饰符 3. 路径别名 4. setup语法糖 4.1 语法糖的概念 4.2 setup语法糖 5. 配置代理服务器 1. v-model 双向数据绑定 v-model 双向数据绑定只能使用在表单标签&#xff1b; v-model双向数据绑定原理&#xff1a;采用 Object.de…
阅读更多...
C++的哈希 哈希表 哈希桶

C++的哈希 哈希表 哈希桶

目录 Unordered系列关联式容器 什么是哈希 哈希表 闭散列 载荷因子α 扩容 查找 删除 字符串哈希算法 最终代码 开散列 插入 查找 删除 最终代码 完整代码 Unordered系列关联式容器 C98中&#xff0c;STL提供了底层为红黑树结构的一系列关联式容器&#xff0…
阅读更多...
模仿高效网络进行目标检测——知识蒸馏

模仿高效网络进行目标检测——知识蒸馏

摘要 链接&#xff1a;https://openaccess.thecvf.com/content_cvpr_2017/papers/Li_Mimicking_Very_Efficient_CVPR_2017_paper.pdf 当前的基于卷积神经网络&#xff08;CNN&#xff09;的目标检测器需要从预训练的ImageNet分类模型中初始化&#xff0c;这通常非常耗时。在本…
阅读更多...
高效的大型语言模型适应方法：提升基础性的解决方案

高效的大型语言模型适应方法：提升基础性的解决方案

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
人工智能在鼻咽癌领域的最新应用｜【医学AI·论文速递·05-27】

人工智能在鼻咽癌领域的最新应用｜【医学AI·论文速递·05-27】

小罗碎碎念 2024-05-27&#xff5c;文献速递 接下来打算把人工智能在主流癌种治疗中的应用&#xff0c;每天和大家做一期推送&#xff0c;方便大家了解各自领域最新的一个进展。 因为小罗的课题是鼻咽癌相关的&#xff0c;所以这一期推文就先从人工智能在鼻咽癌中最新的应用开…
阅读更多...
50-Qt控件详解:Input Display

50-Qt控件详解:Input Display

#ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QMainWindow> //1.Combo Box控件 #include<QComboBox> //2.QFontComboBox控件 #include<QFontComboBox> #include<QLabel>//3.Line Edit控件 #include<QLineEdit> #include <QPushButton…
阅读更多...
面向浏览器端免费开源的三维可视化编辑器，包含BIM轻量化，CAD解析预览等特色功能。

面向浏览器端免费开源的三维可视化编辑器，包含BIM轻量化，CAD解析预览等特色功能。

ES 3DEditor &#x1f30d;Github地址 https://github.com/mlt131220/ES-3DEditor &#x1f30d;在线体验 https://editor.mhbdng.cn/#/ 基于vue3与ThreeJs&#xff0c;具体查看Doc 主要功能&#xff1a; 模型导入展示&#xff0c;支持OBJ、FBX、GLTF、GLB、RVT、IFC、SEA、3…
阅读更多...
5.23 Linux中超时检测方式+模拟面试

5.23 Linux中超时检测方式+模拟面试

1.IO多路复用的原理&#xff1f; IO多路复用使得一个或少量线程资源处理多个连接的IO事件的技术。对于要处理的多个阻塞的IO操作&#xff0c;建立集合并存储它们的文件描述符&#xff0c;利用单个阻塞函数去监控集合中文件描述符事件到达的情况&#xff0c;&#xff08;如果到…
阅读更多...
k8s部署presto

k8s部署presto

&#xff08;作者&#xff1a;陈玓玏&#xff09; 一、前提条件 已部署k8s&#xff1b;已部署hadoop和hive&#xff0c;可参考以下链接&#xff1a; https://blog.csdn.net/weixin_39750084/article/details/136750613?spm1001.2014.3001.5502 https://blog.csdn.net/wei…
阅读更多...
【Linux-时间管理和内核定时器】

【Linux-时间管理和内核定时器】

Linux-时间管理和内核定时器 ■ 设置系统节拍率■ 高节拍率和低节拍率的优缺点&#xff1a;■ jiffies 系统节拍数■ get_jiffies_64 这个函数可以获取 jiffies_64 的值■ 处理绕回■ 使用 jiffies 判断超时 ■ jiffies 和 ms、 us、 ns 之间的转换函数在这里插入代码片■ 内核…
阅读更多...
Python语言基础学习（下）

Python语言基础学习（下）

目录 一、顺序语句 二、条件语句 (1) if (2) if - else (3) if - elif - else 缩进和代码块 空语句 pass 三、循环语句 while 循环 for 循环 continue break 四、函数 创建函数 调用函数 函数返回 函数变量 函数递归 关键字参数 五、列表和元组 创建列表 …
阅读更多...
CNCAP2024主动安全解析

CNCAP2024主动安全解析

一、新增场景 车辆自动紧急制动系统&#xff08;AEB C2C&#xff09;在 2021 版基础上新增了叉路口场景、高速公路追尾场景和 AEB 误作用场景&#xff1b;VRU 自动紧急制动&#xff08;AEB VRU&#xff09;试验在 2021 版基础上新增了交叉路口场景&#xff0c;同时对已有场景进…
阅读更多...
你真的了解HTTPS协议吗

你真的了解HTTPS协议吗

前言 在 HTTP 协议中有可能存在信息窃听或身份伪装等安全问题。使用 HTTPS 通信机制可以有效地防止这些问题。本文即将带大家来了解这些。 任何事物都有两面性&#xff0c;为了满足HTTP协议的快&#xff0c;但导致了它有如下的不足&#xff1a; 通信采用明文&#xff08;不加…
阅读更多...
IDEA 2024.1安装与破解

IDEA 2024.1安装与破解

一、下载 官网地址&#xff1a;https://www.jetbrains.com/idea/download/other.html 二、安装 傻瓜式安装即可 三、破解 3.1 破解程序 网站&#xff1a;https://3.jetbra.in/ 3.2 获取激活码 点击*号部分即可复制成功
阅读更多...
深入解析RPC技术：原理、实现与应用

深入解析RPC技术：原理、实现与应用

RPC&#xff08;Remote Procedure Call&#xff0c;远程过程调用&#xff09;是一种计算机通信协议&#xff0c;允许一个程序&#xff08;客户端&#xff09;在本地调用另一个程序&#xff08;服务器&#xff09;中的函数或方法&#xff0c;并获取返回结果&#xff0c;就像调用…
阅读更多...
Dubbo生态之sentinel限流

Dubbo生态之sentinel限流

1. 限流算法 我们知道&#xff0c;在分布式架构中&#xff0c;当服务请求量过大时&#xff0c;容易对服务器造成不可预知的压力&#xff0c;因此&#xff0c;我们在客户端请求的时候&#xff0c;进行限流&#xff0c;起到一个保护的作用 常见的限流算法有: 计数器限流&#x…
阅读更多...
最新文章

Copyright @ 2022~2023