Qt：窗口

菜单栏 QMenuBar

菜单添加快捷键

添加子菜单

添加分割线和添加图标

QMenuBar创建方式

工具栏 QToolBar

和菜单栏搭配

创建多个工具栏

状态栏 QStatusBar

状态栏中添加其他控件

浮动窗口 QDockWidget

对话框

对话框的内存释放问题

自定义对话框界面

模态对话框

消息对话框 QMessageBox

颜色对话框 QColorDialog

文件对话框 QFileDialog

字体对话框 QFontDialog

输入对话框 QInputDialog

前面学习的所有代码，都是基于 QWidget(控件)
QWidget 更多的是作为别的窗口的一个部分

Qt 窗口是通过 QMainWindow类来实现的
QMainWindow 是一个为用户提供主窗口程序的类，继承自 QWidget 类，并且提供了一个预定义的布局。
QMainWindow包含一个菜单栏(menu bar)、多个工具栏(tool bars)、多个浮动窗口(铆接部件，子窗口)(dock widgets)、一个状态栏(status bar)和一个中心部件(central widget)，它是许多应用程序的基础，如文本编辑器，图片编辑器等

如下图为QMainwindow中各组件所处的位置：

菜单栏 QMenuBar

Qt 中的菜单栏是通过 QMenuBar 这个类来实现的，一个主窗口最多只有一个菜单栏，位于主窗口顶部、主窗口标题栏下面
菜单栏中包含菜单，菜单中包含菜单项

具体图示如下：

窗口使用 Qt creator 时，就需要选择的是 QMainWindow 了，而不是之前的 QWidget 了：

main.cpp 如下：

最开始创建一个 QApplication 的对象，最后 a.exec() 执行程序

中间创建了 MainWindow 这样的对象，再通过 show() 方法显示窗口

这里的 MainWindow 时继承自 QMainWindow 的：

打开 ui 文件，上面出现了一个选项 "在这里输入"，也就是可以给菜单栏添加菜单了：

右侧的对象树这里，和之前就不一样了：

QWidget 创建出来的对象树只有一个 QWidget
QMainWindow 创建出来的对象树，有整个对象树的父结点 MainWindow，里面有一个 centralwidget 中央控件，还有 menubar 菜单栏、statusbar 状态栏

如果我们再菜单栏中输入文件，就会有下面的页面：

在右边输入，是创建新的菜单
在下面输入，是创建菜单项

我们输入几个菜单，运行程序，页面为：

下面给文件添加菜单项，再次运行程序：

此时右边的对象树的结构为：

上述是图形化界面的方式创建菜单，接下来使用代码的方式创建菜单，同样是在 MainWindow 的构造函数中编写代码：

运行程序，就有了创建的菜单和菜单项了：

此时点击菜单项是没有反应的，那么想要让它被点击时有反应，就需要使用到信号了：

菜单项被点击的时候会触发一个信号，触发 triggered

先在构造函数中完成新建和 handle 函数的绑定，以及退出和 close 函数的绑定：

再实现我们创建的 handle 函数，qDebug 打印：

运行程序，点击文件-新建时，就会打印 “触发新建操作!”：

点击退出，就会关闭窗口退出

菜单添加快捷键

例如记事本的菜单，每一个菜单后面的括号就是快捷键，按下 alt + 快捷键 即可触发：

通过给文本中添加 &F 这样的操作,就是添加了快捷键 alt+F：

效果如下：

菜单项添加快捷键与菜单添加快捷键的方式是一样的

下面创建两个菜单，每个菜单创建两个菜单项，都添加上快捷键：

添加子菜单

刚刚的例子都是：
菜单栏 -> 菜单 -> 菜单项

但是也有可能会有子菜单：
菜单栏 -> 菜单 -> 子菜单 -> 子菜单 -> 菜单项

也就是菜单中看着是一个菜单项，但是是其实有一个下拉标记，鼠标悬停在上面的时候，还会展开出一个子菜单

QMenuBar 可以通过 addMenu 添加菜单的
QMenu 也提供了 addMenu，可以添加子菜单

下面编写代码实现添加子菜单的功能：

效果为：

也可以给子菜单再添加子菜单：

添加分割线和添加图标

添加分割线

菜单里菜单项特别多，就可以通过分割线进行分组，把菜单中的若干菜单项可以分成几个部分

QMenu 中提供了 addSeparatqr 这样的函数

代码如下：

此时在两个菜单项之间，就有了一条分割线：

添加图标

想要添加图标，就需要使用前面学到的 QIcon 类，还需要使用 qrc机制将下载的图片放进来，具体的步骤参考前面博客的 qrc机制

代码如下：

此时再点击菜单，前面就带有我们传入进去的图标了：

注意：不止菜单项可以设置图标，菜单也可以设置图标，

如果给 QMenu 设置图标，当前 QMenu 是长在 QMenuBar 上的，此时文本就不显示，图标覆盖了文本
如果给子菜单设置图标，，图标和文本是都能显示的

QMenuBar创建方式

我们上面创建菜单栏，都是通过下面的方式创建的：

如果咱们创建的项目，没有勾选自动生成 uī 文件，此时上述代码是 ok 的
如果勾选了自动生成 ui 文件，上述代码则会引起内存泄露
因为 Qt 已经给你生成了一个 QMenuBar 了

例如我们打开 ui 文件，右侧对象树就很清楚的显示，Qt 已经创建了一个 menubar 了

正是因为之前程序自己已经创建好了一个 QMenuBar，所以当设置新的 QMenuBar 进来的时候，就会导致旧的 QMenuBar 脱离了 Qt 的对象树了，也就意味着后续就无法对这个对象进行释放了
也就意味着会引起内存泄露

上述程序如果窗口关闭，对象树释放，此时进程也就结束了，进程结束，自然所有内存都回收给系统，上述内存泄露也不会造成影响
但是如果这样的代码是出现在一个多窗口的程序中，如果涉及到窗口的频繁跳转切换 (窗口的频繁创建销毁)，上述内存泄露就会更严重一些

针对于上述问题，我们可以通过下面的方式创建：

这样写的好处是：

如果 QMenuBar 已经存在，直接获取并返回
如果 QMenuBar 不存在，就先创建一个新的，再返回

工具栏 QToolBar

工具栏是应用程序中集成各种功能实现快捷键使用的一个区域。可以有多个，也可以没有，它并不是应用程序中必须存在的组件。它是一个可移动的组件，它的元素可以是各种窗口组件，它的元素通常以图标按钮的方式存在

如下图为工具栏的示意图：

下面创建工具栏：

添加菜单栏, 使用的是 setMenuBar
菜单栏只能有一个，重复设置，新的替换旧的 (set 就包含了"替换")
添加工具栏, 使用的是 addToolBar
工具栏可以有多个，重复设置，就会出现多个工具栏 (add 不包含"替换")

效果为：

但是典型的工具栏，这里展示的一般是图标，而不是文本

QAction 显示图标，使用 setlcon函数即可

导入图标同样是需要创建 qrc 文件，具体细节见前面的 qrc机制的博客：

此时代码新增：

效果为：

通过上述的结果，我们也能得知：
QAction 如果出现在工具栏上，也会产生图标覆盖文本这样的情况

注意：
如果我们给 QAction 设置了文本，即使文本在工具栏中被图标覆盖了，但是会以 toolTip 的方式来存在，也就是鼠标悬停上去的时候，就会显示出一段提示信息

toolTip 默认显示我们设置的 QAction 的文本，也可以手动设置更完整的提示信息：

此时鼠标放在工具栏上的效果为：

和菜单栏搭配

工具栏往往也是和菜单栏搭配使用的
工具栏中的 QAction 也可以出现在菜单中

代码新增内容：

此时的菜单项中也就有了保存和打开：
此时在工具栏点击，和在菜单项中点击，所起到的效果是一样的

如果一个 QAction 既是 QMenu 的子元素，又是 QToolBar 的子元素，那么释放的时候，是否会重复 delete
答案当然是：只会释放一次，不会重复 delete，设计 Qt 的大佬早都考虑到这个问题了

创建多个工具栏

创建两个工具栏，并且每个工具栏里面都有两个 action：

默认情况下，两个工具栏都是在顶上并且是紧挨着的：

并且上述的两个工具栏前面，鼠标放在上面按住就能够随意的拖动到任意位置：
此时这个工具栏称之为 "浮动" 状态

可以设置工具栏出现的初始位置(上下左右...)
可以设置工具栏允许停放到哪些边缘
可以设置工具栏是否允许浮动
可以设置工具栏是否可以移动

设置工具栏出现的初始位置

设置工具栏出现的初始位置，可以使用 MainWindow 提供的 addToolBar，在里面传入对应的参数即可，其中需要传入的参数是枚举类型 Qt::ToolBarArea：

Qt::LeftToolBarArea 停靠在左侧
Qt::RightToolBarArea 停靠在右侧
Qt::TopToolBarArea 停靠在顶部
Qt::BottomToolBarArea 停靠在底部
Qt::AllToolBarAreas 以上四个位置都可停靠

所以下图框出来的含义就是：让工具栏2停靠在左侧

效果为：

设置工具栏允许停放到哪些边缘

QToolBar 有一个自己的方法，setAllowedAreas 来设置工具栏允许停放到哪些边缘

这行代码的含义就是：
可以允许拖动到左侧和右侧，但是不能拖到顶部和底部

设置工具栏是否允许浮动

默认是 true，允许浮动的，设置为 false 就不允许浮动了：

此时运行程序，再拖动工具栏，拖进中间区域，就无法成功了

设置工具栏是否可以移动

同样的，默认是 true，允许移动的，设置为 false 就不允许移动了：

此时就无法按下鼠标拖动工具栏了

状态栏 QStatusBar

状态栏就是程序最下面的部分，以画图板为例，下面就是画图板的状态栏：

因为 ui 文件已经帮我们创建出了 status bar，所以这里和上面的 menu bar 一样，如果存在就获取，不存在就创建：

再给状态栏添加内容：

运行结果如下所示：

注意：

通过 showMessage 可以在状态栏中显示一个文本
此时这个文本存在的时间可以自定义，timeout 参数是一个单位为 ms 的时间，如果 timeout 为 0(不填)，消息就会持久存在

状态栏中添加其他控件

添加控件有两种方式：

addwidget：从左往右添加
addPermanentWidget：从右往左添加

代码如下：

效果为：

addWidget的第二个参数，就是拉伸系数，表示状态栏分为了三份，第一个 Label 占用一份，第二个 Label 占用两份

不光可以添加 Label，也可以添加进度条：

效果为：

也可以继续添加按钮，这次采用从右往左添加的方式添加：

效果为：

浮动窗口 QDockWidget

浮动窗口可以认为是窗口中的子窗口

创建浮动窗口的代码如下：

由于浮动窗口并没有添加内容，所以效果并不明显，所以下面添加一些控件到 Widget 中，再把这个 Widget 添加到 DockWidget 中

注意：
由于 dockwidget 中只能包含一个 QWidget，要想添加更多的控件就只能往 QWidget 中进行添加了(多套一层)

此时运行程序：

也可以设置浮动窗口允许停靠的位置：

上述代码表示允许停靠到左侧和顶部，右侧和底部不允许停靠

对话框

Qt 中使用 QDialog 类表示对话框

用的内置对话框有：
QFiledialog'(文件对话框)、QColorDialog(颜色对话框)、QFontDialog(字体对话框)、QInputDial0g(输入对话框)和QMessageBox(消息框)

我们在前面创建项目时，继承过 QWidget、QMainWindow，下面我们继承 QDialog，看看和前面的窗口有什么不同：

总体来说，基于 QDialog 作为父类创建出来的程序窗口和之前通过 QWidget 创建出来的非常相似的，运行程序的窗口，右上角与之前不同：

QDialog 是继承自 QWidget 的，此外，还有 QDIalog 自身的属性：

注意：

实际开发中，更多的情况，往往不是直接在创建项目的时候继承自 QDialog，而是在代码中，创建额外的类，让额外的类继承自 QDialog
主窗口，一般不会作为一个对话框，主窗口可以再产生出一些其他的对话框

对话框的内存释放问题

下面我们在主窗口中，通过点击按钮，弹出一个新的对话框

图形化界面的方式创建一个按钮：

按钮的槽函数如下：

运行后，点击按钮，就会弹出对话框：

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

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

所以一个程序运行过程中，可以无数次点击这个按钮，进一步的就产生出无数个这样的对象了，这就会导致内存泄露

虽然是把父元素设为 this，QMainwindow 被销毁的时候，此时QDialog 是会随之销毁
但是架不住 QDialog 会在 QMainWindow 之前就存在很多个

所以就需要我们在代码中手动解决这个问题：

如果把 delete 放到槽函数中，很明显，点击按钮后，对话框就会一闪而过

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

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

自定义对话框界面

要想自定义对话框，就需要继承自 QDialog 创建类

有两种方式：

纯代码的方式来自定义 QDialog 界面
通过图形化的方式

纯代码的方式

首先创建一个按钮：

此时再选择文件-新建文件或项目，选择 C++-C++ Class：

输入类名为 Dialog，继承自 QDIalog，勾选 Add Q_OBJECT 是为了使用信号槽：

此时就生成 dialog.h 和 dialog.cpp：

槽函数实现如下：

上述代码在 new Dialog 时，传入了 this，由于这个窗口是后续手动释放的，所以加不加入到对象树都可以，如果想加入，就需要进行下面的操作：

原本自动生成的 Dialog 的构造函数是无参的，所以想传入 this，就需要给 Dialog 的构造函数加上参数

dialog.h：

dialog.cpp：

下面的代码，依旧是没有特殊的界面：

所以接下来在 dialog.cpp 文件的构造函数中，给 dialog 创建出控件：

此时点击弹出对话框，就会有创建的 Label 和 pushButton 了：

接着实现点击关闭按钮，就能够关闭对话框，也就是将关闭按钮的 clicked 信号和 handle 函数关联起来：

此时就能够在对话框中添加自己想要的控件了

图形化的方式

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

创建一个按钮，并右键转到槽创建一个槽函数后，再点击文件-新建：

上述这个操作就是创建出一个 ui 文件以及对应的类

接着选择没有按钮的对话框：

后续就下一步完成即可

此时就会有两个 ui 文件：
dialog.ui：对话框的 ui 文件
mainwindow.ui：主窗口的 ui 文件

在 dialog.ui 中创建：

此时编写弹出对话框按钮的槽函数：

就实现了图形化界面的方式自定义对话框

模态对话框

model：为 true，表示模态对话框，为 false，表示非模态对话框

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

我们前面写的几个代码，都是"非模态"对话框

把 .show() 换成 .exec() 即可产生模态对话框

消息对话框 QMessageBox

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

消息对话框 QMessageBox 是应用程序中最常用的界面元素，消息对话框主要用于为用户提示重要信息，强制用户进行选择操作

下面几个，是 QMessageBox 已经给我们提供好的图标了：

槽函数代码编写：

运行程序，首先是弹出对话框按钮：

点击按钮，弹出的对话框如下所示：

关于按钮，我们可以使用 QMessageBox 自带的标准按钮：

也可以将槽函数改为：

此时点击哪个按钮，就可以通过 qDebug 打印的信息看到

还可以通过更快地方式创建出 QMessageBox，在按钮的槽函数中通过一个 warning 函数即可完成创建：

点击弹出对话框按钮，即可弹出下图所示的对话框：

同样，也可以根据 warning 函数的返回值，判断用户点击的是哪个按钮：

点击 OK/Cancel 按钮，都能显示出来：

颜色对话框 QColorDialog

颜色对话框的功能是允许用户选择颜色，继承自 QDialog类

Qt QColorDialog 的功能就是内置了调色板，效果就和刚才看到的画图板的调色板非常类似的

getColor 这个函数就能够弹出一个模态对话框，用户选择颜色之后，点击确定，对话框关闭getColor 返回的值就是用户选择的颜色值

getColor 是一个静态函数，static，与刚刚的 warning 函数一样，QMessageBox::warning，不必创建对话框对象，就可以直接使用

槽函数中的代码为：

弹出的对话框如下，可以选择对应的颜色：

点击 OK 后，下面就会以 AGRB 的形式打印出我们选择的颜色：

注意：
AGRB，A表示不透明度，后三位是0-1的小数，1就对应整数的255，0就对应整数的0

除了打印出选择的颜色，也可以做一些其他的工作：

此时点击颜色后，窗口的背景色也就被修改了：

sprintf 的写法也能做到上面的效果：

文件对话框 QFileDialog

文件对话框用于应用程序中需要打开一个外部文件或需要将当前内容存储到指定的外部文件

getOpenFileName：打开文件
getSaveFileName：保存文件

运行程序后，显示刚刚创建的两个按钮：

点击这两个按钮，就会有下面的界面：

此处的打开/保存这里的功能都是需要额外去实现的，并不是说直接一按保存就真的保存了

想要实现这些功能，我们后面的 Qt 针对文件的操作会讲到

字体对话框 QFontDialog

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

运行程序，点击按钮就会弹出下面的字体对话框：

当用户在这里设置好了属性并且点击 ok ，此时函数就会返回一个 QFont 对象，通过 qDebug 打印出来：

当然也可以分开打印，不一次性全部打印出来：

此时打印信息为：

下面我们可以把用户选择的字体相关属性，设置到按钮上：

选择字体后，点击 OK，按钮的字体就被改变了：

输入对话框 QInputDialog

Qt 中提供了预定义的输入对话框类: QInputDialog，用于进行临时数据输入的场合

让用户输入一个具体的数据，可以是整数，可以是浮点数，还可以是字符串(以类似于下拉框)

QInputDialog 提供了几个静态函数，用与完成上述的输入场景：

getDouble
getInt
getltem

槽函数的实现：

此时点击按钮后，弹出的输入对话框如下所示：

浮点数输入对话框和整数输入对话框比较类型，下面看条目输入对话框的使用：

此时点击按钮后的结果为：

用户可以选择我们代码中输入的这几个条目，也可以选择自己输入

Qt：窗口到此学习结束

Qt：窗口

菜单栏 QMenuBar

菜单添加快捷键

添加子菜单

添加分割线和添加图标

QMenuBar创建方式

工具栏 QToolBar

和菜单栏搭配

创建多个工具栏

状态栏 QStatusBar

状态栏中添加其他控件

浮动窗口 QDockWidget

对话框

对话框的内存释放问题

自定义对话框界面

模态对话框

消息对话框 QMessageBox

颜色对话框 QColorDialog

文件对话框 QFileDialog

字体对话框 QFontDialog

输入对话框 QInputDialog

相关文章