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>
   int main(int argc, char *argv[]) {
       QApplication a(argc, argv); // 管理应用生命期
       Widget w;                   // 创建主窗口实例
       w.show();                   // 显示窗口
       return a.exec();            // 进入事件循环
   }
   

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

   #ifndef WIDGET_H
   #define WIDGET_H
   #include <QWidget>
   namespace Ui { class Widget; } // 前置声明UI命名空间中的类
   class Widget : public QWidget {
       Q_OBJECT // 必须的宏，用于启用信号槽等特性
   public:
       explicit Widget(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(new Ui::Widget) {
       ui->setupUi(this); // 关键调用：构造UI界面，将控件置于当前窗口
   }
   Widget::~Widget() {
       delete ui; // 清理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!
********************************************************************************/

#ifndef UI_WIDGET_H
#define UI_WIDGET_H

#include <QtCore/QVariant>
#include <QtWidgets/QApplication>
#include <QtWidgets/QWidget>

QT_BEGIN_NAMESPACE

class Ui_Widget
{
public:

    void setupUi(QWidget *Widget)
    {
        if (Widget->objectName().isEmpty())
            Widget->setObjectName("Widget");
        Widget->resize(800, 600);

        retranslateUi(Widget);

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

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

};

namespace Ui {
    class Widget: public Ui_Widget {};
} // namespace Ui

QT_END_NAMESPACE

#endif // UI_WIDGET_H

UI设计

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

对比项目	可视化设计（使用Qt Designer）	代码化设计（纯C++编写）
开发效率	高，拖拽组件快速搭建界面。	较低，复杂界面编写代码量大。
灵活性	受限于设计器功能，某些动态或复杂布局实现不便。	极高，可精确控制界面生成逻辑。
可维护性	UI与逻辑分离（.ui vs .cpp），结构清晰。	UI创建代码与业务逻辑混合，需良好组织。
学习曲线	易于上手，直观。	需要熟悉Qt控件API及布局管理。
适用场景	标准对话框、数据录入界面等静态或半静态UI。	高度动态、可定制或需要程序化生成的界面。

可视化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>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    // MainWindow w;

    //创建一个新窗口
    QWidget window;
    window.resize(400,300);
    window.setWindowTitle("my first winds");

    //创建一个按钮
    QPushButton*button=new QPushButton("click me",&window);
    button->setGeometry(150,110,100,20);

    //显示窗口,非模态？
    window.show();
    // w.show();
    return a.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构建的典型命令流程：

mkdir build
cd build
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>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Dialog w;
    w.show();
    return a.exec();
}

dialog.h

//dialog.h
#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
#include <QCheckBox>
#include <QRadioButton>
#include <QPlainTextEdit>
#include <QPushButton>
//#include <QVBoxLayout>

class Dialog : public QDialog
{
    Q_OBJECT

private:
    QCheckBox   *chkBoxUnder;
    QCheckBox   *chkBoxItalic;
    QCheckBox   *chkBoxBold;

    QRadioButton    *radioBlack;
    QRadioButton    *radioRed;
    QRadioButton    *radioBlue;

    QPlainTextEdit  *txtEdit;

    QPushButton     *btnOK;
    QPushButton     *btnCancel;
    QPushButton     *btnClose;

    void    iniUI();            //UI创建与初始化
    void    iniSignalSlots();   //初始化信号与槽的链接

private slots:
    void do_chkBoxUnder(bool checked);  //Underline

    void do_chkBoxItalic(bool checked); //Italic

    void do_chkBoxBold(bool checked);   //Bold

    void do_setFontColor();             //设置文字颜色

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

};

#endif // DIALOG_H

dialog.cpp

#include    "dialog.h"
#include    <QHBoxLayout>
#include    <QVBoxLayout>

void Dialog::iniUI()
{
    //创建 Underline, Italic, Bold三个 CheckBox，并水平布局
    chkBoxUnder=new QCheckBox("Underline");
    chkBoxItalic=new QCheckBox("Italic");
    chkBoxBold=new QCheckBox("Bold");
    QHBoxLayout *HLay1=new QHBoxLayout();
    HLay1->addWidget(chkBoxUnder);
    HLay1->addWidget(chkBoxItalic);
    HLay1->addWidget(chkBoxBold);

    //创建 Black, Red, Blue三个 RadioButton，并水平布局
    radioBlack=new QRadioButton("Black");
    radioBlack->setChecked(true);           //缺省被选中
    radioRed=new QRadioButton("Red");
    radioBlue=new QRadioButton("Blue");
    QHBoxLayout *HLay2=new QHBoxLayout;
    HLay2->addWidget(radioBlack);
    HLay2->addWidget(radioRed);
    HLay2->addWidget(radioBlue);

    //创建 确定, 取消, 退出 三个 PushButton, 并水平布局
    btnOK=new QPushButton("确定");
    btnCancel=new QPushButton("取消");
    btnClose=new QPushButton("退出");
    QHBoxLayout *HLay3=new QHBoxLayout;
    HLay3->addStretch();
    HLay3->addWidget(btnOK);
    HLay3->addWidget(btnCancel);
    HLay3->addStretch();
    HLay3->addWidget(btnClose);

    //创建 文本框,并设置初始字体
    txtEdit=new QPlainTextEdit;
    txtEdit->setPlainText("Hello world\n手工创建");
    QFont   font=txtEdit->font();   //获取字体
    font.setPointSize(20);          //修改字体大小为20
    txtEdit->setFont(font);         //设置字体

    //创建 垂直布局，并设置为主布局
    //    VLay=new QVBoxLayout(this);
    QVBoxLayout *VLay=new QVBoxLayout(this);
    VLay->addLayout(HLay1);         //添加字体类型组
    VLay->addLayout(HLay2);         //添加字体颜色组
    VLay->addWidget(txtEdit);       //添加PlainTextEdit
    VLay->addLayout(HLay3);         //添加按键组
    setLayout(VLay);    //设置为窗口的主布局
}

void Dialog::iniSignalSlots()
{
    //三个设置颜色的 QRadioButton
    connect(radioBlue,SIGNAL(clicked()),this,SLOT(do_setFontColor()));
    connect(radioRed,SIGNAL(clicked()),this,SLOT(do_setFontColor()));
    connect(radioBlack,SIGNAL(clicked()),this,SLOT(do_setFontColor()));

    //三个设置字体的 QCheckBox
    connect(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()));
}

void Dialog::do_chkBoxUnder(bool checked)
{
    QFont   font=txtEdit->font();
    font.setUnderline(checked);
    txtEdit->setFont(font);
}

void Dialog::do_chkBoxItalic(bool checked)
{
    QFont   font=txtEdit->font();
    font.setItalic(checked);
    txtEdit->setFont(font);
}

void Dialog::do_chkBoxBold(bool checked)
{
    QFont   font=txtEdit->font();
    font.setBold(checked);
    txtEdit->setFont(font);
}

void Dialog::do_setFontColor()
{
    QPalette   plet=txtEdit->palette();
    if (radioBlue->isChecked())
        plet.setColor(QPalette::Text,Qt::blue);
    else if (radioRed->isChecked())
        plet.setColor(QPalette::Text,Qt::red);
    else if (radioBlack->isChecked())
        plet.setColor(QPalette::Text,Qt::black);
    else
        plet.setColor(QPalette::Text,Qt::black);

    txtEdit->setPalette(plet);
}

Dialog::Dialog(QWidget *parent)
    : QDialog(parent)
    {
        iniUI();            //界面创建与布局
        iniSignalSlots();   //信号与槽的关联
        setWindowTitle("创建UI");   //设置窗口标题
    }

Dialog::~Dialog()
{
}