【Qt】深入探索Qt窗口与对话框：从创建到管理：QDockWidget(浮动窗口)、QDialog（对话框）_qt浮动窗口

前言：

在现代软件开发中，图形用户界面（GUI）的设计和实现是至关重要的一环。Qt，作为一个功能强大且跨平台的C++图形用户界面库，提供了丰富的组件和工具，使得开发者能够快速构建具有专业外观和感觉的应用程序。本文将深入探讨Qt中窗口和对话框的创建与管理，包括浮动窗口、对话框的介绍、模态与非模态对话框的区别，以及Qt内置的多种对话框类型。通过详细的代码示例和解释，本文旨在帮助Qt开发者更好地理解和应用这些GUI组件，以提升应用程序的用户体验和交互性。

1. 浮动窗口

浮动窗口的创建是通过 QDockWidget类 提供的构造方法 QDockWidget()函数 动态创建的；示例如
下：

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QDockWidget>
#include <QLabel>
#include <QPushButton>
#include <QVBoxLayout>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    // 给主窗口添加子窗口
    QDockWidget* dockWidget = new QDockWidget();
    this->addDockWidget(Qt::LeftDockWidgetArea, dockWidget);

    // 浮动窗口也是可以设置标题的
    dockWidget->setWindowTitle("这是一个浮动窗口");

    // 给浮动窗口里面添加一些控件
    // 不能直接给这个浮动窗口添加子控件，而是需要创建出一个单独的 QWidget, 把要添加的部件加入到 QWidget 中
    //  然后再把这个 QWidget 设置到 dockWidget 中
    QWidget* container = new QWidget();
    dockWidget->setWidget(container); // 由于 dockWidget 中只能包含一个 QWidget,
                                     // 要想添加更多的控件就只能往 QWidget 中进行添加了。（多套一层）
                                    // 为啥要这么设定，也有点不可考了，按理说，直接让 dockWidget 能添加更多的元素是合适的设定

    // 创建布局管理器，把布局管理器 设置到 QWidget 中
    QVBoxLayout* layout = new QVBoxLayout;
    container->setLayout(layout);

    // 创建其它控件添加到 layout 中
    QLabel* label = new QLabel("这是一个 QLabel");
    QPushButton* button = new QPushButton("这是一个按钮");
    layout->addWidget(label);
    layout->addWidget(button);

    // 设置浮动窗口允许停靠的位置
    dockWidget->setAllowedAreas(Qt::LeftDockWidgetArea | Qt::TopDockWidgetArea);
}

MainWindow::~MainWindow()
{
    delete ui;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

• Qt::LeftDockWidgetArea 停靠在左侧
• Qt::RightDockWidgetArea 停靠在右侧
• Qt::TopDockWidgetArea 停靠在顶部
• Qt::BottomDockWidgetArea 停靠在底部
• Qt::AllDockWidgetAreas 以上四个位置都可停靠

2. 对话框介绍

对话框是 GUI 程序中不可或缺的组成部分。一些不适合在主窗口实现的功能组件可以设置在对话框
中。对话框通常是一个顶层窗口，出现在程序最上层，用于实现短期任务或者简洁的用户交互。Qt常
用的内置对话框有：QFiledialog（文件对话框）、QColorDialog（颜色对话框）、QFontDialog
（字体对话框）、QInputDialog （输入对话框）和 QMessageBox（消息框） 。

Qt 中使用 QDailog 表示对话框
针对一个已有的项目，也可以创建一些类，继承自 QDialog 实现咱们一些自定义的对话框！

总体来时，基于 QDialog 作为父类创建出来的程序窗口和之前通过 QWidget 创建出来的窗口时非常相似的。

实际开发中，更多的情况，往往不是直接在创建的时候继承自 QDialog, 而是在代码中，创建额外的类，让额外的类继承自 QDailog。

2.1. 示例：主窗口中，通过点击按钮，弹出一个新的对话框。

QDialog 其实也是 QWidget 的子类， QWidget 的各种属性方法， QDialog 也能使用。

#include "mainwindow.h"
#include "ui_mainwindow.h"

#include <QDialog>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
}

MainWindow::~MainWindow()
{
    delete ui;
}


void MainWindow::on_pushButton_clicked()
{
    QDialog* dialog = new QDialog(this);
    dialog->setWindowTitle("对话框的标题");
    // 设置对话框尺寸
    dialog->resize(400, 300);
    // 通过 show 方法就能显示出对话框
    dialog->show();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

注意：不同界面上的其它控件，此处 QDialog 每次按下按钮，都会创建一个新的 QDialog 对象，并进行显示。
每次点击都会创建新的对话框对象！

QDialog* dialog = new QDialog(this); 
1

一个程序运行过程中，可以有无数次点击这个按钮，进一步的就产生了无数个这样的对象了！（内存泄漏。）
确实，是把父元素 this, QMainWindow 被销毁的时候，此时 QDialog 是会随之销毁 ，但是架不住QDialog 会再 QMainWindow 之前就存在很多个（就怕你这一个对象占用内存很多，或者你的机器本身剩余的内存很少呢（嵌入式系统））

void MainWindow::on_pushButton_clicked()
{
    QDialog* dialog = new QDialog(this);
    dialog->setWindowTitle("对话框的标题");
    // 设置对话框尺寸
    dialog->resize(400, 300);
    // 通过 show 方法就能显示出对话框
    dialog->show();

    delete dialog;
}
1
2
3
4
5
6
7
8
9
10
11

如果把 delete 放到这里，很明显，对话框就会一闪而过。

正确的做法，应该是让用户点击 对话框 关闭按钮的时候，再来触发 delete 操作。

dialog->setAttribute(Qt::WA_DeleteOnClose);
1

只要给 dialog 设置上上述属性，此时就会在关闭的时候自动进行 delete, Qt 内置的功能。

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QDialog>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
}

MainWindow::~MainWindow()
{
    delete ui;
}


void MainWindow::on_pushButton_clicked()
{
    QDialog* dialog = new QDialog(this);
    dialog->setWindowTitle("对话框的标题");
    // 设置对话框尺寸
    dialog->resize(400, 300);
    // 通过 show 方法就能显示出对话框
    dialog->show();

    // delete dialog; //窗口只会一闪而过
    // 正确做法应该式把 delet 和关闭按钮的信号给关联起来
    // 在用户点击关闭的时候， 触发 delete
    // Qt 为了让咱们写的方便，直接给 QDialog 设置了一个属性，可以通过属性，完成上述效果
    dialog->setAttribute(Qt::WA_DeleteOnClose);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

2.2. 创建自定义对话框

要想自定义对话框，就需要继承自 QDialog 创建类。
1）纯代码的方式来自定义 QDialog 界面
2）通过图形化界面的方式

2.2.1. 纯代码的方式

创建一个C++类：

指定QDialog 为父类：

Add Q_OBJECT，让其可以使用信号槽。

// dialog.h
#ifndef DIALOG_H
#define DIALOG_H

#include <QWidget>
#include <QDialog>

class Dialog : public QDialog
{
    Q_OBJECT
public:
    Dialog(QWidget* parent); // QWidget* parent：加到对象树上

    void handle();
};

#endif // DIALOG_H
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// dialog.cpp
#include "dialog.h"
#include <QPushButton>
#include <QLabel>
#include <QVBoxLayout>

Dialog::Dialog(QWidget* parent) : QDialog(parent)
{
    // 创建一些控件，加入到 Dialog 中。（以 Dialog 作为父窗口）

    QVBoxLayout* layout = new QVBoxLayout();
    this->setLayout(layout);

    QLabel* label = new QLabel("这是一个对话框", this);
    QPushButton* button = new QPushButton("关闭", this);

    layout->addWidget(label);
    layout->addWidget(button);

    connect(button, &QPushButton::clicked, this, &Dialog::handle);
}

void Dialog::handle()
{
    this->close();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// mainwindow.cpp
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include "dialog.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
}

MainWindow::~MainWindow()
{
    delete ui;
}


void MainWindow::on_pushButton_clicked()
{
    Dialog* dialog = new Dialog(this);
    dialog->resize(400, 300);
    dialog->setAttribute(Qt::WA_DeleteOnClose);
    dialog->show();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

2.2.2. 图形化界面的方式

关键操作，是创建出一个新的 ui 文件出来

这个操作是，创建出一个 ui文件及其对应的类

// dialog.cpp
#include "dialog.h"
#include "ui_dialog.h"

Dialog::Dialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Dialog)
{
    ui->setupUi(this);
}

Dialog::~Dialog()
{
    delete ui;
}

void Dialog::on_pushButton_clicked()
{
    this->close();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// mainwindow.cpp
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include "dialog.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
}

MainWindow::~MainWindow()
{
    delete ui;
}


void MainWindow::on_pushButton_clicked()
{
    // 弹出一个自定义对话框了
    Dialog* dialog = new Dialog(this);
    dialog->setAttribute(Qt::WA_DeleteOnClose);
    dialog->show();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

3. 模态对话框 和 非模态对话框

model bool
模态 / 非模态

模态：弹出对话框中的时候，此时用户无法操作父窗口，必须得完成对话框内部的操作，关闭对话框之后，才能操作父窗口。（用于特别关键的场合，用户必须做出决策）
非模态：弹出对话框的时候，用户可以操作父窗口。（其它不是特别重要的场景）

非模块可以点击出很多的窗口。
前面几个代码，都是“非模态”对话框。
如何产生模态对话框？
把 dialog->show(); 换成 dialog->exec(); 即可

4. Qt 内置对话框

Qt 提供了多种可复用的对话框类型，即 Qt 标准对话框。Qt 标准对话框全部继承于 QDialog类。常用标准对话框如下：

4.1. 消息对话框 QMessageBox

QMessageBox 用来显示一个消息给用户，并且让用户进行一个简单的选则

Qt 内置的图标类型：

enum Icon {
    // keep this in sync with QMessageDialogOptions::Icon
    NoIcon = 0,
    Information = 1,
    Warning = 2,
    Critical = 3,
    Question = 4
};
1
2
3
4
5
6
7
8

Qt 内置的按钮类型：

enum StandardButton {
    // keep this in sync with QDialogButtonBox::StandardButton and QPlatformDialogHelper::StandardButton
    NoButton           = 0x00000000,
    Ok                 = 0x00000400,
    Save               = 0x00000800,
    SaveAll            = 0x00001000,
    Open               = 0x00002000,
    Yes                = 0x00004000,
    YesToAll           = 0x00008000,
    No                 = 0x00010000,
    NoToAll            = 0x00020000,
    Abort              = 0x00040000,
    Retry              = 0x00080000,
    Ignore             = 0x00100000,
    Close              = 0x00200000,
    Cancel             = 0x00400000,
    Discard            = 0x00800000,
    Help               = 0x01000000,
    Apply              = 0x02000000,
    Reset              = 0x04000000,
    RestoreDefaults    = 0x08000000,

    FirstButton        = Ok,                // internal
    LastButton         = RestoreDefaults,   // internal

    YesAll             = YesToAll,          // obsolete
    NoAll              = NoToAll,           // obsolete

    Default            = 0x00000100,        // obsolete
    Escape             = 0x00000200,        // obsolete
    FlagMask           = 0x00000300,        // obsolete
    ButtonMask         = ~FlagMask          // obsolete
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

void MainWindow::on_pushButton_clicked()
{
    // 创建 QMessageBox
    QMessageBox* messageBox = new QMessageBox(this);
    messageBox->setWindowTitle("对话框窗口标题");
    messageBox->setText("这是对话框的文本");
    messageBox->setIcon(QMessageBox::Warning);
    messageBox->setStandardButtons(QMessageBox::Ok | QMessageBox::Save | QMessageBox::Cancel);

    // 非模态的弹窗， QMessageBox 使用场景更多是模态的
    // messageBox->show(); // 非模态的
    // 弹出模态对话框， 当对话框处于弹出状态的时候，代码就会在 exec 这一直阻塞，只到对话框被关闭
    messageBox->exec(); // 模态的

    // delete messageBox; //因为模态的被阻塞住了，所以可以使用delete 而不会一闪而过
    messageBox->setAttribute(Qt::WA_DeleteOnClose);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

• 如果想自定义按钮呢？
  
  
  标准按钮可以用 exec() 返回值来进行操作，自定义按钮就只能使用 connect 来连接信号槽了！

void MainWindow::on_pushButton_clicked()
{
    // 创建 QMessageBox
    QMessageBox* messageBox = new QMessageBox(this);
    messageBox->setWindowTitle("对话框窗口标题");
    messageBox->setText("这是对话框的文本");
    messageBox->setIcon(QMessageBox::Warning);

    // 在标准按钮中，根本没有办法进行信号槽的连接（按钮是 QMessageBox 自己生成的）
    messageBox->setStandardButtons(QMessageBox::Ok | QMessageBox::Save | QMessageBox::Cancel);

    // 自定义按钮
    QPushButton* button = new QPushButton("按钮", messageBox);
    messageBox->addButton(button, QMessageBox::AcceptRole);
    // connect 连接信号槽，来针对当前点击的按钮来进行一些相关操作


    // 非模态的弹窗， QMessageBox 使用场景更多是模态的
    // messageBox->show(); // 非模态的
    // 弹出模态对话框， 当对话框处于弹出状态的时候，代码就会在 exec 这一直阻塞，只到对话框被关闭
    // 用户点击按钮，使对话框关闭之后，此时就能通过 exec 的返回值，来知道用户点击的哪个按钮，从而执行一些对应的逻辑了
    int result = messageBox->exec(); // 模态的
    if (result == QMessageBox::Ok) {
        qDebug() << "Ok";
    } else if (result == QMessageBox::Save) {
        qDebug() << "Save";
    } else if (result == QMessageBox::Cancel) {
        qDebug() << "Cancel";
    }

    // delete messageBox; //因为模态的被阻塞住了，所以可以使用delete 而不会一闪而过
    messageBox->setAttribute(Qt::WA_DeleteOnClose);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

其实还有更便捷的方法：

void MainWindow::on_pushButton_clicked()
{
    int result = QMessageBox::warning(this, "对话框标题", "对话框文本", QMessageBox::Ok | QMessageBox::Cancel);
    if (result == QMessageBox::Ok) {
        qDebug() << "Ok";
    } else if (result == QMessageBox::Cancel) {
        qDebug() << "Cancel";
    }
}
1
2
3
4
5
6
7
8
9

下面这些类型都可以用：

NoIcon = 0,
Information = 1,
Warning = 2,
Critical = 3,
Question = 4
1
2
3
4
5

4.2. 颜色对话框 QColorDialog

颜色对话框的功能是允许用户选择颜色。继承自 QDialog 类。颜色对话框如下图示：
Qt内置了颜色板的功能
getColor() 这个函数就能弹出一个模态框，用户选择颜色之后，点击确定后，对话框关闭，getColor 返回的值就是用户选择的颜色！
getColor(): 它是一个静态函数，static, QMessageBox::warning, 不必创建对话框对象，就可以直接使用！

void MainWindow::on_pushButton_clicked()
{
//    QColorDialog* dialog = new QColorDialog(this);
//    dialog->exec(); // 不常用
//    delete dialog;

    // 函数的返回值就是用户的颜色
    QColor color = QColorDialog::getColor(QColor(0, 255, 0), this, "选择颜色");
    qDebug() << color;

    // 可以基于用户选择的颜色，修改窗口的背景色
    // 可以通过 QSS 的方式设置背景色
    QString style = "background-color: rgb(" + QString::number(color.red()) + ", " + QString::number(color.green())
                + ", " + QString::number(color.blue()) + ");";
    // 或者使用 sprintf() 进行拼接
    char style2[1024] = {0};
    sprintf(style2, "background-color: rgb(%d, %d, %d)", color.red(), color.green(), color.blue());

    this->setStyleSheet(style2);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

这里的ARGB,中的A标示的是不透明度，后面的RGB值用小数表示。

4.3. 文件对话框 QFileDialog

通过 QFileDialog 可以选择一个文件，能够获取到这个文件的路径。
打开文件 / 保存文件
getOpenFileName / getSaveFileName

void MainWindow::on_pushButton_clicked()
{
    QString filePath = QFileDialog::getOpenFileName(this);
    qDebug() << filePath;
}

void MainWindow::on_pushButton_2_clicked()
{
    QString filePath = QFileDialog::getOpenFileName(this);
    qDebug() << filePath;
}
1
2
3
4
5
6
7
8
9
10
11

还可以设置过滤器的。

在此处，仅仅只是将文件的地址打印出来，但是实际上此处的 打开 / 保存 这里这里的功能是需要额外去实现的！并不是说直接一按保存就真的保存了。

4.4. 字体对话框 QFontDialog

Qt 中提供了预定义的字体对话框类 QFontDialog，⽤于提供选择字体的对话框部件。

void MainWindow::on_pushButton_clicked()
{
    bool ok = false;
    QFont font = QFontDialog::getFont(&ok);
    qDebug() << "ok = " << ok;
    qDebug() << font;
    qDebug() << font.family();
    qDebug() << font.pointSize();
    qDebug() << font.bold();
    qDebug() << font.italic();

    // 把选择的字体设置到按钮上
    ui->pushButton->setFont(font);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

当用户这里设置好了属性并且点击 OK 的时候，函数就返回一个 QFont 对象。

4.5. 输入对话框 QInputDialog

Qt 中提供了预定义的输入对话框类：QInputDialog，用于进行临时数据输入的场合。
这个数据可以是整数，可以是浮点数，还可以字符串。（以类似于下拉框的方式让用户选择）
QInputDialog 提供了几个静态函数：
getDouble、getInt、getItem

void MainWindow::on_pushButton_clicked()
{
    int result =  QInputDialog::getInt(this, "整数输入对话框：", "请输入一个整数：");
    qDebug() << result;
}

void MainWindow::on_pushButton_2_clicked()
{
    double result = QInputDialog::getDouble(this, "浮点数输入对话框", "请输入一个浮点数");
    qDebug() << result;
}

void MainWindow::on_pushButton_3_clicked()
{
    QStringList items;
    items.push_back("111");
    items.push_back("222");
    items.push_back("333");
    items.push_back("444");
    QString item = QInputDialog::getItem(this, "条目输入：", "请输入条目", items);
    qDebug() << item;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

总结：

本文详细介绍了Qt中窗口和对话框的创建和管理方法。首先，我们探讨了浮动窗口的创建，通过QDockWidget类动态生成，并展示了如何添加控件和设置停靠位置。接着，文章深入介绍了对话框的概念和使用，包括如何通过QPushButton触发对话框的弹出，以及如何创建自定义对话框，无论是通过纯代码方式还是图形化界面的方式。此外，文章还区分了模态对话框和非模态对话框，并解释了它们适用的不同场景。

在Qt内置对话框的部分，文章逐一介绍了QMessageBox、QColorDialog、QFileDialog、QFontDialog和QInputDialog等对话框的用途和实现方法。每个对话框都提供了特定的功能，如消息提示、颜色选择、文件操作、字体选择和数据输入，极大地丰富了应用程序的交互性。通过使用这些内置对话框，开发者可以避免重复造轮子，同时确保应用程序的用户界面保持一致性和专业性。

最后，文章还提到了Qt窗口程序中的其他重要组件，如菜单栏、工具栏、子窗口和状态栏，这些都是构建一个完整应用程序不可或缺的部分。通过本文的学习，Qt开发者应该能够更加熟练地运用Qt提供的各种工具和组件，创建出既美观又实用的GUI应用程序。

Qt 窗口程序

1. 菜单栏(QMenuBar) => 菜单（QMenu）=>菜单项（QAction）
2. 工具栏（QToolBar）(具有多个) => 菜单项（QAction）
3. 子窗口（QDockWidget）=> QWidget => 放置其它控件
4. 状态栏（QStatusBar）=> QWidget
5. 对话框（QDialog）=> 自己手动继承的方式，针对 QDialog 进行扩展 QMessageBox、QFileDialog、QColorDialog、QFontDialog、QInputDialog