QT入门看这一篇就够了——超详细讲解

QT-GUI程序设计

QT程序构建原理

Qt项目的构建过程包含一个预编译环节，将Qt特有的文件转换为标准C++代码，再由编译器处理。

核心是元对象系统，它支持信号与槽、运行时类型信息等特性。为实现这些功能，Qt提供了三个关键工具：

• MOC（元对象编译器）：处理包含Q_OBJECT宏的C++头文件，生成实现元对象功能的中间代码。
• UIC（用户界面编译器）：将Qt Designer创建的.ui（XML格式）界面文件，转换为对应的C++头文件。
• RCC（资源编译器）：将资源集合文件.qrc中列出的图片、翻译文件等资源，编译并嵌入到最终的可执行程序中。

一个典型的Qt项目包含以下几类文件：

1. 项目配置文件（.pro）：指导构建过程。
2. C++源文件（.h, .cpp）：程序逻辑。
3. 窗口UI文件（.ui）：界面布局。
4. 资源文件（.qrc）：静态资源列表。

构建时，MOC、UIC、RCC首先处理各自的文件，生成标准的C++代码。随后，标准C++编译器（如g++）编译所有C++代码，链接Qt库，最终生成可执行文件。

下图清晰地展示了这一构建流程：

qmake

qmake是Qt主要的项目构建工具。它的核心作用是读取项目配置文件（.pro文件），并生成相应的Makefile。Makefile包含了编译和链接的所有指令，之后标准的make命令就可以根据它来构建项目。

对于Qt项目，qmake生成的Makefile会自动包含调用MOC、UIC和RCC的规则，简化了开发者处理这些特殊步骤的工作。

.pro文件中的配置使用变量形式。例如：

• TEMPLATE = app表示构建一个应用程序。
• TARGET = MyApp设置生成的可执行文件名称。
• SOURCES += main.cpp添加源文件。
• HEADERS += widget.h添加头文件。
• QT += core gui指定项目需要链接的Qt核心模块。如果需要其他模块，如数据库，则添加QT += sql。

项目配置文件（.pro文件）

Qt Creator创建项目时会自动生成.pro文件。理解其基本结构有助于管理项目。一个简单的示例如下：

TEMPLATE = app # 项目类型：应用程序 TARGET = MyApp # 目标文件名 QT += core gui # 使用的Qt模块 SOURCES += main.cpp \ widget.cpp HEADERS += widget.h FORMS += widget.ui # UI设计文件 RESOURCES += res.qrc # 资源文件

通过修改.pro文件，可以方便地添加/移除文件、更改构建选项或添加库依赖。

UI文件与主程序结构

UI文件
Qt Designer设计的界面保存为.ui文件，本质是XML格式，描述了窗口中的控件及其属性、布局。它不直接参与编译，而是由UIC工具在构建时转换为ui_xxxx.h头文件，供C++代码使用。

主程序文件组成
一个使用UI文件的典型Qt Widgets项目包含以下文件：

1. main.cpp：程序入口，创建应用和主窗口。

   #include"widget.h"#include<QApplication>intmain(intargc,char*argv[]){QApplicationa(argc,argv);// 管理应用生命期Widget w;// 创建主窗口实例w.show();// 显示窗口returna.exec();// 进入事件循环}

2. widget.h：主窗口类声明。

   #ifndefWIDGET_H#defineWIDGET_H#include<QWidget>namespaceUi{classWidget;}// 前置声明UI命名空间中的类classWidget:publicQWidget{Q_OBJECT// 必须的宏，用于启用信号槽等特性public:explicitWidget(QWidget*parent=nullptr);~Widget();private:Ui::Widget*ui;// 指向UI界面类的指针};#endif// WIDGET_H

3. widget.cpp：主窗口类实现。

   #include"widget.h"#include"ui_widget.h"// 由UIC生成的UI类头文件Widget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui->setupUi(this);// 关键调用：构造UI界面，将控件置于当前窗口}Widget::~Widget(){deleteui;// 清理UI对象}

   ui->setupUi(this)是核心，它根据UI文件创建所有控件，设置其属性，并建立初始的信号槽连接。

4. widget.ui：在Qt Designer中编辑的界面文件。

5. ui_widget.h：构建时由widget.ui自动生成，包含界面控件的具体创建代码。开发者通常不直接修改此文件。

文件ui_widget.h的完整内容如下。

/******************************************************************************** ** Form generated from reading UI file 'widget.ui' ** ** Created by: Qt User Interface Compiler version 6.8.0 ** ** WARNING! All changes made in this file will be lost when recompiling UI file! ********************************************************************************/#ifndefUI_WIDGET_H#defineUI_WIDGET_H#include<QtCore/QVariant>#include<QtWidgets/QApplication>#include<QtWidgets/QWidget>QT_BEGIN_NAMESPACEclassUi_Widget{public:voidsetupUi(QWidget*Widget){if(Widget->objectName().isEmpty())Widget->setObjectName("Widget");Widget->resize(800,600);retranslateUi(Widget);QMetaObject::connectSlotsByName(Widget);}// setupUivoidretranslateUi(QWidget*Widget){Widget->setWindowTitle(QCoreApplication::translate("Widget","Widget",nullptr));}// retranslateUi};namespaceUi{classWidget:publicUi_Widget{};}// namespace UiQT_END_NAMESPACE#endif// UI_WIDGET_H

UI设计

可视化设计 vs. 代码化设计

可视化UI设计实践

使用Qt Creator内置的Qt Designer进行设计：

1. 创建项目：在Qt Creator中新建项目，模板选择“Qt Widgets Application”，并确保勾选“Generate form”。
2. 设计界面：在打开的设计器中，左侧为组件面板，可拖拽控件（如按钮、文本框）到中间的待设计窗体。右侧的对象检查器以树状图展示组件层次，属性编辑器用于修改选中组件的属性。
3. 设置伙伴关系：为提高可用性，可将标签(QLabel)与输入框(QLineEdit)设为伙伴。在设计模式下，使用“编辑伙伴”工具进行设置。这样，用户按下标签的快捷键（Alt+下划线字母）时，焦点会跳转到对应的输入框。
4. 管理资源：通过“新建Qt资源文件(.qrc)”将图片等资源加入项目。在属性编辑器中，可以为按钮图标等属性选择“选择资源”，方便地引用已添加的资源。

代码化UI设计实践

不依赖.ui文件，直接在C++代码中创建和布局控件。

1. 创建项目：与可视化设计类似，但在最后一步不勾选“Generate form”，项目中将不会包含.ui文件。
2. 编写界面创建代码：通常在窗口类的构造函数中完成。
   • 创建控件对象（new）。
   • 使用布局管理器（如QHBoxLayout,QVBoxLayout,QGridLayout）组织控件。
   • 将布局设置到窗口上。
   • 使用connect函数建立信号与槽的连接。

核心要点：在Qt中，当父对象（如窗口）被销毁时，会自动递归销毁其所有子对象（在该窗口上创建的控件）。因此，在代码中创建控件时指定父对象，是管理内存、防止泄漏的关键。

示例片段（在构造函数中）：

/#include"mainwindow.h"#include<QPushButton>#include<QWidget>#include<QApplication>intmain(intargc,char*argv[]){QApplicationa(argc,argv);// MainWindow w;//创建一个新窗口QWidget window;window.resize(400,300);window.setWindowTitle("my first winds");//创建一个按钮QPushButton*button=newQPushButton("click me",&window);button->setGeometry(150,110,100,20);//显示窗口,非模态？window.show();// w.show();returna.exec();}

CMake构建系统

除了qmake，Qt也支持使用CMake进行构建。CMake是一个跨平台的构建系统生成器，通过编写CMakeLists.txt文件来描述项目。

一个基础的Qt项目CMakeLists.txt示例：

cmake_minimum_required(VERSION 3.16) project(MyQtApp VERSION 1.0 LANGUAGES CXX) # 项目名和语言 set(CMAKE_CXX_STANDARD 17) # 设置C++标准 # 查找所需的Qt组件 find_package(Qt6 REQUIRED COMPONENTS Core Widgets) # 设置自动处理MOC、UIC、RCC set(CMAKE_AUTOMOC ON) set(CMAKE_AUTOUIC ON) set(CMAKE_AUTORCC ON) # 添加可执行目标，并指定源文件 add_executable(MyQtApp main.cpp widget.cpp widget.h) # 为可执行目标链接Qt库 target_link_libraries(MyQtApp Qt6::Core Qt6::Widgets)

使用CMake构建的典型命令流程：

mkdirbuildcdbuild cmake..make./MyQtApp

CMake在管理大型项目或需要复杂构建逻辑时更具优势，且是Qt 6推荐使用的构建系统之一。

参考与实践要点

为应用程序设置图标

1. 准备一个ICO格式的图标文件（如myapp.ico），将其放在项目源码目录。
2. 在项目的.pro配置文件中添加一行：

   RC_ICONS = myapp.ico

3. 重新构建项目。生成的可执行文件以及窗口标题栏将使用该图标。

信号与槽的连接

无论是可视化设计还是代码设计，信号与槽的连接都是实现交互的核心。

• 可视化设计：可在Qt Designer的“信号/槽编辑器”中进行图形化连接，或直接在代码中通过ui->对象名访问控件并使用connect。
• 代码化设计：在初始化函数中，对所有需要交互的控件手动调用connect函数建立连接。

• 传统方式：

connect(sender,SIGNAL(signal()),receiver,SLOT(slot()));

• 新语法：

connect(sender,&Sender::signal,receiver,&Receiver::slot);

• 自动连接：

  • 槽函数命名为on_objectName_signal()时，系统自动连接。

  childdialog窗口：在里面定义了一个自定义信号。
  
  
  mainwindow主窗口：
  
  当点击主窗口的按钮出发显示子对话窗口，然后子界面emit发出信号被相应的槽函数捕捉。达到页面切换的效果。
  

示例：代码化设计一个界面

main.cpp

//main.cpp#include"dialog.h"#include<QApplication>intmain(intargc,char*argv[]){QApplicationa(argc,argv);Dialog w;w.show();returna.exec();}

dialog.h

//dialog.h#ifndefDIALOG_H#defineDIALOG_H#include<QDialog>#include<QCheckBox>#include<QRadioButton>#include<QPlainTextEdit>#include<QPushButton>//#include <QVBoxLayout>classDialog:publicQDialog{Q_OBJECTprivate:QCheckBox*chkBoxUnder;QCheckBox*chkBoxItalic;QCheckBox*chkBoxBold;QRadioButton*radioBlack;QRadioButton*radioRed;QRadioButton*radioBlue;QPlainTextEdit*txtEdit;QPushButton*btnOK;QPushButton*btnCancel;QPushButton*btnClose;voidiniUI();//UI创建与初始化voidiniSignalSlots();//初始化信号与槽的链接privateslots:voiddo_chkBoxUnder(boolchecked);//Underlinevoiddo_chkBoxItalic(boolchecked);//Italicvoiddo_chkBoxBold(boolchecked);//Boldvoiddo_setFontColor();//设置文字颜色public:Dialog(QWidget*parent=nullptr);~Dialog();};#endif// DIALOG_H

dialog.cpp

#include"dialog.h"#include<QHBoxLayout>#include<QVBoxLayout>voidDialog::iniUI(){//创建 Underline, Italic, Bold三个 CheckBox，并水平布局chkBoxUnder=newQCheckBox("Underline");chkBoxItalic=newQCheckBox("Italic");chkBoxBold=newQCheckBox("Bold");QHBoxLayout*HLay1=newQHBoxLayout();HLay1->addWidget(chkBoxUnder);HLay1->addWidget(chkBoxItalic);HLay1->addWidget(chkBoxBold);//创建 Black, Red, Blue三个 RadioButton，并水平布局radioBlack=newQRadioButton("Black");radioBlack->setChecked(true);//缺省被选中radioRed=newQRadioButton("Red");radioBlue=newQRadioButton("Blue");QHBoxLayout*HLay2=newQHBoxLayout;HLay2->addWidget(radioBlack);HLay2->addWidget(radioRed);HLay2->addWidget(radioBlue);//创建 确定, 取消, 退出 三个 PushButton, 并水平布局btnOK=newQPushButton("确定");btnCancel=newQPushButton("取消");btnClose=newQPushButton("退出");QHBoxLayout*HLay3=newQHBoxLayout;HLay3->addStretch();HLay3->addWidget(btnOK);HLay3->addWidget(btnCancel);HLay3->addStretch();HLay3->addWidget(btnClose);//创建 文本框,并设置初始字体txtEdit=newQPlainTextEdit;txtEdit->setPlainText("Hello world\n手工创建");QFont font=txtEdit->font();//获取字体font.setPointSize(20);//修改字体大小为20txtEdit->setFont(font);//设置字体//创建 垂直布局，并设置为主布局// VLay=new QVBoxLayout(this);QVBoxLayout*VLay=newQVBoxLayout(this);VLay->addLayout(HLay1);//添加字体类型组VLay->addLayout(HLay2);//添加字体颜色组VLay->addWidget(txtEdit);//添加PlainTextEditVLay->addLayout(HLay3);//添加按键组setLayout(VLay);//设置为窗口的主布局}voidDialog::iniSignalSlots(){//三个设置颜色的 QRadioButtonconnect(radioBlue,SIGNAL(clicked()),this,SLOT(do_setFontColor()));connect(radioRed,SIGNAL(clicked()),this,SLOT(do_setFontColor()));connect(radioBlack,SIGNAL(clicked()),this,SLOT(do_setFontColor()));//三个设置字体的 QCheckBoxconnect(chkBoxUnder,SIGNAL(clicked(bool)),this,SLOT(do_chkBoxUnder(bool)));connect(chkBoxItalic,SIGNAL(clicked(bool)),this,SLOT(do_chkBoxItalic(bool)));connect(chkBoxBold,SIGNAL(clicked(bool)),this,SLOT(do_chkBoxBold(bool)));//三个按钮与窗口的槽函数关联connect(btnOK,SIGNAL(clicked()),this,SLOT(accept()));connect(btnCancel,SIGNAL(clicked()),this,SLOT(reject()));connect(btnClose,SIGNAL(clicked()),this,SLOT(close()));}voidDialog::do_chkBoxUnder(boolchecked){QFont font=txtEdit->font();font.setUnderline(checked);txtEdit->setFont(font);}voidDialog::do_chkBoxItalic(boolchecked){QFont font=txtEdit->font();font.setItalic(checked);txtEdit->setFont(font);}voidDialog::do_chkBoxBold(boolchecked){QFont font=txtEdit->font();font.setBold(checked);txtEdit->setFont(font);}voidDialog::do_setFontColor(){QPalette plet=txtEdit->palette();if(radioBlue->isChecked())plet.setColor(QPalette::Text,Qt::blue);elseif(radioRed->isChecked())plet.setColor(QPalette::Text,Qt::red);elseif(radioBlack->isChecked())plet.setColor(QPalette::Text,Qt::black);elseplet.setColor(QPalette::Text,Qt::black);txtEdit->setPalette(plet);}Dialog::Dialog(QWidget*parent):QDialog(parent){iniUI();//界面创建与布局iniSignalSlots();//信号与槽的关联setWindowTitle("创建UI");//设置窗口标题}Dialog::~Dialog(){}