QT入门-可视化UI设计
2024-05-10 15:11:26
目录
1.效果展示
2.创建工程
3. 可视化UI界面布局设计
4.代码段相关
4.1文件展示
4.2 main.cpp
4.3 dialog.h
4.4 dialog.cpp
4.5 dialog.ui & ui_dialog.h
4.6 CMakeLists.txt
5. Sample code
前言：
本文用于工作之余，（新手）QT UI设计 个人学习记录，初衷是提升C/C++技能，纯属业余，不专业的地方，欢迎批评指正，感谢
1.效果展示
2.创建工程
记得勾选Generate form(会自动添加dialog.ui到项目中)
工程创建成功后，先编译运行一下，确保环境没有问题
3. 可视化UI界面布局设计
4.代码段相关
4.1文件展示
4.2 main.cpp
#main.cpp文件#include "dialog.h"#include <QApplication>int main(int argc, char *argv[])
{QApplication a(argc, argv); //定义并创建应用程序Dialog w; //定义并创建窗口w.show(); //显示窗口return a.exec(); //执行应用程序，开始消息循环和事件处理
}
4.3 dialog.h
#dialog.h文件#ifndef DIALOG_H
#define DIALOG_H#include <QDialog>QT_BEGIN_NAMESPACE
namespace Ui { class Dialog; } //ui_dialog.h(封装了可视化设计的界面)中定义的类，在此处声明，便于后面使用
QT_END_NAMESPACEclass Dialog : public QDialog
{Q_OBJECT //宏，使用QT信号和槽必须添加public:Dialog(QWidget *parent = nullptr);~Dialog();
private slots://槽函数void on_checkBox_UnderLine_clicked(bool checked);void on_checkBox_Italic_clicked(bool checked);void on_checkBox_Blob_clicked(bool checked);void setTextFontColor();private:Ui::Dialog *ui;//执行一个可视化的界面
};
#endif // DIALOG_H
4.4 dialog.cpp
#dialog.cpp文件#include "dialog.h"
#include "./ui_dialog.h" //According to dialog.ui to auto generate by QTDialog::Dialog(QWidget *parent): QDialog(parent), ui(new Ui::Dialog)
{ui->setupUi(this); //实现了各组件的各种设置，信息与槽的关联，ui_dialog.h中实现了setpuUi()//设置Diaglog右上角最小化、最大化、关闭{Qt::WindowFlags windowFlag = Qt::Dialog;windowFlag |= Qt::WindowMinimizeButtonHint;windowFlag |= Qt::WindowMaximizeButtonHint;windowFlag |= Qt::WindowCloseButtonHint;setWindowFlags(windowFlag);}//设置Diaglog右上角最小化、最大化、关闭//Linking signals <-> slotsconnect(ui->radioButton_Blue, &QRadioButton::clicked, this, &Dialog::setTextFontColor);connect(ui->radioButton_Red, &QRadioButton::clicked, this, &Dialog::setTextFontColor);connect(ui->radioButton_Black, &QRadioButton::clicked, this, &Dialog::setTextFontColor);
}Dialog::~Dialog()
{delete ui;
}void Dialog::on_checkBox_UnderLine_clicked(bool checked)
{QFont font = ui->plainTextEdit->font();font.setUnderline(checked);ui->plainTextEdit->setFont(font);
}void Dialog::on_checkBox_Italic_clicked(bool checked)
{QFont font = ui->plainTextEdit->font();font.setItalic(checked);ui->plainTextEdit->setFont(font);
}void Dialog::on_checkBox_Blob_clicked(bool checked)
{QFont font = ui->plainTextEdit->font();font.setBold(checked);ui->plainTextEdit->setFont(font);
}void Dialog::setTextFontColor()
{QPalette plet = ui->plainTextEdit->palette();Qt::GlobalColor color = Qt::black;if(ui->radioButton_Blue->isChecked()){color = Qt::blue;}else if(ui->radioButton_Red->isChecked()){color = Qt::red;}else if(ui->radioButton_Black->isChecked()){color = Qt::black;}plet.setColor(QPalette::Text,color);ui->plainTextEdit->setPalette(plet);
}
4.5 dialog.ui & ui_dialog.h
根据dialog.ui(和布局对应的XML文件)生成的ui_dialog.h文件（文件位置如下图），如果布局文件dialog.ui有任何改动，编译时会重新生成ui_dialog.h,所以修改ui_dialog.h文件没有意义
/********************************************************************************
** Form generated from reading UI file 'dialog.ui'
**
** Created by: Qt User Interface Compiler version 6.1.2
**
** WARNING! All changes made in this file will be lost when recompiling UI file!
********************************************************************************/#ifndef UI_DIALOG_H
#define UI_DIALOG_H#include <QtCore/QVariant>
#include <QtWidgets/QApplication>
#include <QtWidgets/QCheckBox>
#include <QtWidgets/QDialog>
#include <QtWidgets/QGroupBox>
#include <QtWidgets/QHBoxLayout>
#include <QtWidgets/QPlainTextEdit>
#include <QtWidgets/QPushButton>
#include <QtWidgets/QRadioButton>
#include <QtWidgets/QSpacerItem>
#include <QtWidgets/QVBoxLayout>QT_BEGIN_NAMESPACEclass Ui_Dialog
{
public:QVBoxLayout *verticalLayout;QGroupBox *Font;QHBoxLayout *horizontalLayout;QCheckBox *checkBox_UnderLine;QCheckBox *checkBox_Italic;QCheckBox *checkBox_Blob;QGroupBox *Color;QHBoxLayout *horizontalLayout_2;QRadioButton *radioButton_Black;QRadioButton *radioButton_Red;QRadioButton *radioButton_Blue;QSpacerItem *verticalSpacer_2;QPlainTextEdit *plainTextEdit;QSpacerItem *verticalSpacer;QHBoxLayout *horizontalLayout_3;QSpacerItem *horizontalSpacer;QPushButton *pushButton_OK;QPushButton *pushButton_Cancle;QSpacerItem *horizontalSpacer_2;QPushButton *pushButton_Exit;void setupUi(QDialog *Dialog){if (Dialog->objectName().isEmpty())Dialog->setObjectName(QString::fromUtf8("Dialog"));Dialog->resize(557, 345);Dialog->setMinimumSize(QSize(400, 300));Dialog->setMouseTracking(false);Dialog->setSizeGripEnabled(false);Dialog->setModal(false);verticalLayout = new QVBoxLayout(Dialog);verticalLayout->setObjectName(QString::fromUtf8("verticalLayout"));Font = new QGroupBox(Dialog);Font->setObjectName(QString::fromUtf8("Font"));horizontalLayout = new QHBoxLayout(Font);horizontalLayout->setObjectName(QString::fromUtf8("horizontalLayout"));checkBox_UnderLine = new QCheckBox(Font);checkBox_UnderLine->setObjectName(QString::fromUtf8("checkBox_UnderLine"));checkBox_UnderLine->setChecked(false);horizontalLayout->addWidget(checkBox_UnderLine);checkBox_Italic = new QCheckBox(Font);checkBox_Italic->setObjectName(QString::fromUtf8("checkBox_Italic"));horizontalLayout->addWidget(checkBox_Italic);checkBox_Blob = new QCheckBox(Font);checkBox_Blob->setObjectName(QString::fromUtf8("checkBox_Blob"));horizontalLayout->addWidget(checkBox_Blob);verticalLayout->addWidget(Font);Color = new QGroupBox(Dialog);Color->setObjectName(QString::fromUtf8("Color"));horizontalLayout_2 = new QHBoxLayout(Color);horizontalLayout_2->setObjectName(QString::fromUtf8("horizontalLayout_2"));radioButton_Black = new QRadioButton(Color);radioButton_Black->setObjectName(QString::fromUtf8("radioButton_Black"));horizontalLayout_2->addWidget(radioButton_Black);radioButton_Red = new QRadioButton(Color);radioButton_Red->setObjectName(QString::fromUtf8("radioButton_Red"));horizontalLayout_2->addWidget(radioButton_Red);radioButton_Blue = new QRadioButton(Color);radioButton_Blue->setObjectName(QString::fromUtf8("radioButton_Blue"));horizontalLayout_2->addWidget(radioButton_Blue);verticalLayout->addWidget(Color);verticalSpacer_2 = new QSpacerItem(20, 40, QSizePolicy::Minimum, QSizePolicy::Expanding);verticalLayout->addItem(verticalSpacer_2);plainTextEdit = new QPlainTextEdit(Dialog);plainTextEdit->setObjectName(QString::fromUtf8("plainTextEdit"));plainTextEdit->setEnabled(true);QFont font;font.setFamilies({QString::fromUtf8("Arial")});font.setPointSize(14);font.setBold(false);plainTextEdit->setFont(font);verticalLayout->addWidget(plainTextEdit);verticalSpacer = new QSpacerItem(18, 6, QSizePolicy::Minimum, QSizePolicy::Expanding);verticalLayout->addItem(verticalSpacer);horizontalLayout_3 = new QHBoxLayout();horizontalLayout_3->setObjectName(QString::fromUtf8("horizontalLayout_3"));horizontalSpacer = new QSpacerItem(18, 20, QSizePolicy::Expanding, QSizePolicy::Minimum);horizontalLayout_3->addItem(horizontalSpacer);pushButton_OK = new QPushButton(Dialog);pushButton_OK->setObjectName(QString::fromUtf8("pushButton_OK"));pushButton_OK->setAutoDefault(false);horizontalLayout_3->addWidget(pushButton_OK);pushButton_Cancle = new QPushButton(Dialog);pushButton_Cancle->setObjectName(QString::fromUtf8("pushButton_Cancle"));horizontalLayout_3->addWidget(pushButton_Cancle);horizontalSpacer_2 = new QSpacerItem(18, 20, QSizePolicy::Expanding, QSizePolicy::Minimum);horizontalLayout_3->addItem(horizontalSpacer_2);pushButton_Exit = new QPushButton(Dialog);pushButton_Exit->setObjectName(QString::fromUtf8("pushButton_Exit"));horizontalLayout_3->addWidget(pushButton_Exit);verticalLayout->addLayout(horizontalLayout_3);retranslateUi(Dialog);QObject::connect(pushButton_OK, &QPushButton::clicked, Dialog, qOverload<>(&QDialog::accept));QObject::connect(pushButton_Cancle, &QPushButton::clicked, Dialog, qOverload<>(&QDialog::accept));QObject::connect(pushButton_Exit, &QPushButton::clicked, Dialog, qOverload<>(&QDialog::close));//通过该函数将信号和槽关联起来QMetaObject::connectSlotsByName(Dialog);} // setupUivoid retranslateUi(QDialog *Dialog){Dialog->setWindowTitle(QCoreApplication::translate("Dialog", "Dialog by designer", nullptr));Font->setTitle(QCoreApplication::translate("Dialog", "\345\255\227\344\275\223", nullptr));checkBox_UnderLine->setText(QCoreApplication::translate("Dialog", "UnderLine", nullptr));checkBox_Italic->setText(QCoreApplication::translate("Dialog", "Italic", nullptr));checkBox_Blob->setText(QCoreApplication::translate("Dialog", "Blob", nullptr));Color->setTitle(QCoreApplication::translate("Dialog", "\351\242\234\350\211\262", nullptr));radioButton_Black->setText(QCoreApplication::translate("Dialog", "Black", nullptr));radioButton_Red->setText(QCoreApplication::translate("Dialog", "Red", nullptr));radioButton_Blue->setText(QCoreApplication::translate("Dialog", "Blue", nullptr));plainTextEdit->setPlainText(QCoreApplication::translate("Dialog", "First Sample!\n"
"\346\254\242\350\277\216\345\205\211\344\270\264......", nullptr));pushButton_OK->setText(QCoreApplication::translate("Dialog", "\347\241\256\345\256\232", nullptr));pushButton_Cancle->setText(QCoreApplication::translate("Dialog", "\345\217\226\346\266\210", nullptr));pushButton_Exit->setText(QCoreApplication::translate("Dialog", "\351\200\200\345\207\272", nullptr));} // retranslateUi};namespace Ui {class Dialog: public Ui_Dialog {};
} // namespace UiQT_END_NAMESPACE#endif // UI_DIALOG_H
4.6 CMakeLists.txt
CMakeLists.txt文件，相关字段做了解释，后面有需要在另写一篇文章总结一下CMake的常见用法
cmake_minimum_required(VERSION 3.5)#project用法：
#projet(项目名称 VERSION/*关键字*/ x.x.x LANGUAGES/*关键字*/ )
#VERSION <x.x.x> #用于指定工程的版本号，其中x表示非负整数 #project(sample VERSION 1.0.1)
#DESCRIPTION <project-description-string> #对工程的简短描述，用双引号引起来 #project(sample DESCRIPTION "my first sample code!")
#HOMEPAGE_URL <URL-string> #如project(sample HOMEPAGE_URL "www.baidu.com")
#LANGUAGES <>
project(VisualUIDesign VERSION 0.1 LANGUAGES CXX)set(CMAKE_INCLUDE_CURRENT_DIR ON)set(CMAKE_AUTOUIC ON) # 打开全局UIC
set(CMAKE_AUTOMOC ON) # 打开全局MOC
set(CMAKE_AUTORCC ON) # 打开全局RCC#指定C++版本为 C++11
set(CMAKE_CXX_STANDARD 11)
# 设置指定的C++编译器版本是必须的，如果不设置，或者为OFF，则指定版本不可用时，会使用上一版本
set(CMAKE_CXX_STANDARD_REQUIRED ON)# find_package指令用于查找并载入一个外部包的设置
# find_package(<PackageName> [version] [EXACT] [QUIET] [MODULE]
# [REQUIRED] [[COMPONENTS] [components...]]
# [OPTIONAL_COMPONENTS components...]
# [NAMES name1 [name2 ...]]
# [NO_POLICY_SCOPE])# REQUIRED可选字段。表示一定要找到包，找不到的话就立即停掉整个cmake。而如果不指定REQUIRED则cmake会继续执行
# COMPONENTS/components:可选字段，表示查找的包中必须要找到的组件(components），如果有任何一个找不到就算失败，类似于REQUIRED，导致cmake停止执行
# OPTIONAL_COMPONENTS和components：可选的模块，找不到也不会让cmake停止执行。
# <Begin>[配置模式下]，CMake会搜索一个由包提供的配置文件。指令返回后，<PackageName>_DIR变量保存了包含这一配置文件的目录名。
# 默认情况下，find_package指令使用<PackageName>作为包名进行搜索。如果使用了NAMES选项，就会使用NAMES选项后的列表中
# 的名称作为包名搜索<PackageName>Config.cmake文件/<package-name>-config.cmake 文件。可以使用CONFIGS选项替换
# 使用的配置文件名称。找到配置文件后，配置文件会被CMake读取并执行。配置文件是由包自身提供，所以具备了包的所有信息。配置
# 文件的完整路径会被存储在<PackageName>_CONFIG变量中。</End>find_package(QT NAMES Qt6 Qt5 COMPONENTS Widgets REQUIRED)
find_package(Qt${QT_VERSION_MAJOR} COMPONENTS Widgets REQUIRED)# message( [STATUS|WARNING|AUTHOR_WARNING|FATAL_ERROR|SEND_ERROR] "message to display" ...)
message(WARNING Qt${QT_VERSION_MAJOR} " message to display")
message(WARNING "Result = " Qt${QT_VERSION_MAJOR} " others message to display")set(PROJECT_SOURCESmain.cppdialog.cppdialog.hdialog.ui
)
#指定最终生成的目标文件，及生成目标文件所依赖的源文件${PROJECT_SOURCES}
if(${QT_VERSION_MAJOR} GREATER_EQUAL 6)qt_add_executable(VisualUIDesignMANUAL_FINALIZATION${PROJECT_SOURCES})
else()if(ANDROID)add_library(VisualUIDesign SHARED${PROJECT_SOURCES})else()add_executable(VisualUIDesign${PROJECT_SOURCES})endif()
endif()#以PRIVATE的方式链接目标文件所选要的库（ Qt${QT_VERSION_MAJOR}::Widgets 是前面find_package引入的外部包）
target_link_libraries(VisualUIDesign PRIVATE Qt${QT_VERSION_MAJOR}::Widgets)set_target_properties(VisualUIDesign PROPERTIESMACOSX_BUNDLE_GUI_IDENTIFIER my.example.comMACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
)# 该 qt_finalize_executable 调用将根据目标的属性为目标生成适当的部署设置。
# 如果用户忘记致电qt_finalize_executable，则不会生成部署设置，也不会出现错误或警告。
if(QT_VERSION_MAJOR EQUAL 6)qt_finalize_executable(VisualUIDesign)
endif()
5. Sample code
Sample Code Linkhttps://download.csdn.net/download/weixin_38244193/23527557https://download.csdn.net/download/weixin_38244193/23527557
QT入门-可视化UI设计相关推荐
- QT入门之UI设计界面
QT入门之UI设计界面 在UI设计界面中,可以观察到属性编辑器实际上就是对派生类的各个成员数据进行赋值.因为QLineEdit继承自QWidget,QWidget又继承自QObject,所以可以看出属 ...
- Qt：可视化UI设计
1.创建项目&修改组件的对象名字和显示文本内容 创建一个 Widget Application 项目类 QDialog,在创建窗体时选择基类 QDialog,生成的类命名为 QWDialog, ...
- Qt入门 【ui设计】
目录 ui界面介绍 UI界面demo 标签总结 ui界面介绍 Layouts: 布局管理器,组件在水平垂直方向布局. Spacers:分割器,在水平方向进行分割,便于拉伸或者压缩. Buttons:各 ...
- 想学ui设计从哪里入手？基础怎么入门学习UI设计呢？
对于零基础的小伙伴们来说,学习UI设计的头绪是比较大的,虽然有很多的书籍和视频可以供参考,但是很多人缺乏规律性,缺乏自学精神.因此零基础学习UI设计就相当吃力了.怎么样学习决定了你将来学完后的成果.优 ...
- 零基础如何去入门学习UI设计？学习步骤是什么？
本文由:"学设计上兔课网"原创,图片素材来自网络,仅供学习分享 零基础如何去入门学习UI设计?学习步骤是什么?零基础如何规划好学习UI设计呢,菜鸟学习UI设计有什么步骤.下面兔课菌 ...
- 学美工设计需要会哪些软件？零基础怎么入门学UI设计？
本文由:"学设计上兔课网"原创,图片素材来自网络,仅供学习分享 学美工设计需要会哪些软件?零基础怎么入门学UI设计?阿里巴巴的发展,带动了电子商务的运营,而电子商务的运营离不开淘宝 ...
- 入门学习ui设计就业方向有哪些?
入门学习ui设计就业方向有哪些?相信这个问题是很多人都关心的话题,今天千锋小编就给大家分析一下UI设计就业方向有哪些!解决你们的后顾之忧! 一.按工作内容分类 1.视觉设计师 作为产品终极视觉稿的输出 ...
- 数据可视化UI设计素材资源文件sketch大屏可视化数据展示
数据是企业的上帝之眼,数据可视化就发挥了很大的作用.很多从事B端产品设计的小伙伴在日常工作中遇到数据可视化的场景比较多,也得益于PSD素材较多,所以用的设计工具大多是Photoshop,但Photos ...
- 数据可视化UI设计素材资源文件psd大屏可视化数据展示Photoshop设计文件
大数据时代,基于大量数据进行有效的分析和挖掘,建立可视化大屏展示,提供震撼的效果让用户读懂数据,了解数据背后的价值.近几年该类应用场景越来越广泛,软件开发和设计中可视化展示放在越来越重要的位置,在此分 ...
- 零基础入门学习UI设计指南
第一步:认识设计启蒙必备知识 学习一项技能,尤其是已经有一定沉淀并在各行各业有广泛应用的技能,就一定要对它先有充分的认知.在开始正式学习前,你需要花足够的经历去了解和查阅它的起源.发展.应用.未来. ...
最新文章
- Oracle数据库名与Oracle实例名的关系
- 乐观锁、悲观锁简单分析，回忆旧（新）知识...
- tmap的使用_MapInfo教程--二次开发入门
- 实用知识点梳理：香农定理、IP地址划分、基带信号、数据链路层协议、RSTP与IPoverATM
- Android SDK 快速安装方法
- 解决Vue-Router报错：vue-router.esm.js:17 [vue-router] ＜router-link＞‘s tag prop is deprecated and has been
- 使用grunt合并压缩js、css文件
- Solidity safesub防止溢出
- paip.QQ音乐导出歌单总结
- 常用网盘资源搜索网站
- Perlin noise（一）
- Python安装包及初步认知
- html alpha使用方法,如何使用HTML5画布创建一个带Alpha通道的h264视频？
- Groovy+Spock单元测试
- SpringBoot 实现发送邮件
- 【PMAC】Chapter2：Pewin Pro32出现EAccessViolation
- php实现服务器访问统计,服务器端统计网站总访问人数
- 【Linux网络编程】域名转IP后的一些深层（计算机底层）的思考
- CSS聚光灯效果制作
- AVB传输协议数据包分析