【QT】 控件 -- 显示类

---

1. 前言

之前我在上一篇文章【QT】-- 按钮类已经说了QT 控件按钮类方面的知识以及涉及到的各种属性/函数/使用方法，现在就来开始了解显示类的相关知识啦

2. 显示类控件

2.1 Label

QLabel 可以用来显示文本和图片，核心属性如下：

属性	说明
text	QLabel 中的文本。用于显示在标签上的文字内容。
textFormat	文本的格式： - Qt::PlainText：纯文本 - Qt::RichText：富文本（支持 HTML 标签） - Qt::MarkdownText：Markdown 格式 - Qt::AutoText：根据文本内容自动决定文本格式。
pixmap	QLabel 内部包含的图片。用于显示静态图像。
scaledContents	设置为 true 表示内容自动拉伸填充 QLabel；设为 false 则不会自动拉伸。
alignment	对齐方式。可以设置水平和垂直方向如何对齐，例如居中、左对齐等。
wordWrap	设置为 true 内部的文本会自动换行；设为 false 则内部文本不会自动换行。
indent	设置文本缩进。影响水平和垂直方向的缩进。具体生效的方向取决于 alignment 属性。
margin	内部文本和边框之间的边距。不同于 indent，margin 在上下左右四个方向都同时有效。
openExternalLinks	是否允许打开一个外部链接。当 QLabel 文本内容包含 URL 时，点击链接将尝试打开浏览器访问该 URL。
buddy	给 QLabel 关联一个“伙伴”，点击 QLabel 时能激活对应的伙伴控件。例如，如果伙伴是一个 QCheckBox，那么该 QCheckBox 将被选中。

1、显示不同文本

（1）在界面上创建四个 QLabel，尺存放大一些，objectName 分别为 label、label_2、label_3、label_4

（2）修改 widget.cpp，设置四个 label 的属性 ⭕

2、显示图片

虽然 QPushButton 也可以通过设置图标的方式设置图片，但是并非是一个好的选择，更多的时候还是希望通过 QLabel 来作为一个更单纯的显示图片的方式。

（1）在界面上创建一个 QLabel，objectName 为 label

（2）创建 resource.qrc 文件，并把图片导入到 qrc 中，修改 widget.cpp，给 QLabel 设置图片，给窗口（800 * 600）设置合适尺寸，修改代码，设置 scaledContents 属性，如下：

• 一旦程序运行起来，QLabel 的尺寸就固定了，如果拖动窗口大小，可以看到图片并不会随着窗口大小的改变而同步变化。

为了解决这个问题，可以在 Widget 中重写 resizeEvent 函数：

• 执行程序，此时改变窗口大小，图片也会随之变化：

注意：要记得把函数 在.h 文件中，声明一下

注意：这里的 resizeEvent 函数我们没有手动调用，但是能在窗口大小变化时被自动调用，这个过程就是依赖 C++ 中的多态来实现的。

• Qt 框架内部管理着 QWidget 对象表示我们的窗口，在窗口大小发生改变时，Qt 就会自动调用 resizeEvent 函数
• 但是由于实际上这个表示窗口的并非是 QWidget，而是 QWidget 的子类，也就是我们自己写的 Widget
• 此时虽然是通过父类调用函数，但是实际上执行的是子类的函数（也就是我们重写后的 resizeEvent）
• 获取到窗口的 event，进行 resize 处理

此处属于是多态机制的⼀种经典用法。通过上述过程就可以把自定义的代码插入到框架内部执行，相当于 “注册回调函数”

3、文本对齐、自动换行、缩进、边距

（1）创建四个 label，objectName 分别是 label 到 label_4，并且在 QFrame 中设置 frameShape 为 Box（设置边框之后看起来会更清晰一些）

QFrame 是 QLabel 的父类，其中 frameShape 属性用来设置边框性质：

• QFrame::Box：矩形边框
• QFrame::Panel：带有可点击区域的面板边框
• QFrame::WinPanel：Windows 风格的边框
• QFrame::HLine：水平线边框
• QFrame::VLine：垂直线边框
• QFrame::StyledPanel：带有可点击区域的面板边框，但样式取决于窗口主题。

（2）编写 widget.cpp，给这四个 label 设置属性，运行程序

• 此处设置的文本缩进，后续的行也会产生缩进，不仅仅是首行缩进

4、设置伙伴

（1）创建两个 label 和 两个 radioButton，objectName 分别为 label、label_2、radioButton_A、radioButton_B

此处把 label 中的文本设置为 “快捷键 &A” 这样的形式。

• 其中 & 后面跟着的字符就是快捷键，可以通过 alt + A 的方式来触发该快捷键。

• 但是注意，这里的快捷键和 QPushButton 的不同 需要搭配 alt 和 单个字母的方式才能触发。

• 绑定了伙伴关系之后，通过快捷键就可以选中对应的单选按钮 / 复选按钮。

（2）编写 widget.cpp，设置 buddy 属性【当然这里也可以使用 Qt Designer 直接设置】

• 可以看到，按下快捷键 alt + a 或者 alt + b，即可选中对应的选项

3.2 LCD Number

QLCDNumer 是一个专门用来显示数字的控件，类似于 “老式计算器” 的效果。

属性	说明
intValue	QLCDNumber 显示的数字值（整数）。与 value 联动，显示整数值。
value	QLCDNumber 显示的数字值（浮点数）。与 intValue 联动，设置此属性时会自动四舍五入到最近的整数。 例如，给 value 设为 1.5，intValue 的值就是 2。 设置 value 和 intValue 的方法名为 display，而不是 setValue 或 setIntValue。
digitCount	显示几位数字。设置可以显示的最大位数。
mode	数字显示形式： - QLCDNumber::Dec：十进制模式，显示常规的十进制数字。 - QLCDNumber::Hex：十六进制模式，以十六进制格式显示数字。 - QLCDNumber::Bin：二进制模式，以二进制格式显示数字。 - QLCDNumber::Oct：八进制模式，以八进制格式显示数字。 只有在十进制模式下才能显示小数点后的内容。
segmentStyle	设置显示风格： - QLCDNumber::Flat：平面的显示风格，数字呈现在一个平坦的表面上。 - QLCDNumber::Outline：轮廓显示风格，数字具有清晰的轮廓和阴影效果。 - QLCDNumber::Filled：填充显示风格，数字被填充颜色并与背景区分开。
smallDecimalPoint	设置较小的小数点。当启用时，小数点将使用更小的段来表示，节省空间并提高显示密度。

【实现倒计时功能】

（1）在界面上创建⼀个 QLCDNumber，初始值设为 10，objectName 为 lcdNumber

（2）修改 widget.h 代码，创建一个 QTimer 成员 和一个 handle 函数

（3）修改 widget.cpp，在构造函数中初始化 QTimer

• QTimer 表示定时器，通过 start 方法启动定时器之后，就会每隔一定周期触发一次 QTimer::timeout 信号

• 使用 connect 把 QTimer::timeout 信号和 Widget::updateTime 连接起来，意味着每次触发 QTimer::timeout 都会执行 Widget::updateTime

handle 实现

• 通过 intValue 获取到 QLCDNumber 内部的数值。
• 如果 value 的值归 0 了，就停止 QTimer，接下来 QTimer 也就不会触发 timeout 信号了。

• 可以看到每隔一秒钟，显示的数字就减少 1：通过 timer ms & lcd -1 实现

💡 欸，针对上面代码我们来两个操作 >

操作一：如果直接在上述 Widget 构造函数中，通过一个循环 + sleep 的方式是否可以呢？

• 显然，上面这段代码是不行的，循环会使 *Widget 的构造函数无法执行完毕*，此时界面是不能正确构造和显示的。

操作二：如果直接在上述 Widget 构造函数中，另起一个线程，在新线程中完成循环 + sleep 是否可以呢？

• 上面在 thread 的构造函数中传递了 一个 lambda 表达式，然后在在 lambda 表达式内部，定义了一个无限循环（while (true)），用于持续更新 QLCDNumber 的显示值。

这个代码同样也是不行的

“理想很美好，现实很骨感”

• Qt 中规定：任何对于 GUI 上内容的操作必须在主线程中完成
• 像 Widget 构造函数，以及 connect 连接的 slot 函数，都是在主线程中调用的。
• 而我们自己创建的线程则不是，当我们自己的线程中尝试对界面元素进行修改时，Qt 程序往往会直接崩溃。

这样的约定主要是因为 GUI 中的状态往往是牵一发动全身的，修改一个地方，就需要同步的对其他内容进行调整。

• 比如调整了某个元素的尺存，就可能影响到内部的文字位置，或者其他元素的位置。这里一连串的修改都是需要按照一定的顺序来完成的。

• 由于多线程执行的顺序无法保障，因此 Qt 从根本上禁止了其他线程修改 GUI 状态，避免后续的一系列问题。

• 对于 Qt 的槽函数来说，默认情况下，槽函数都是由主线程调用到，在槽函数中修改界面是没有任何问题的。

综上所述，使用定时器是实现上述功能的最合理方案。后续如果也有类似的需要 “周期性修改界面状态” 的需求也需要优先考虑使用定时器。

3.3 ProgressBar

使用 QProgress Bar 表示一个进度条

• 注意：不要把 ProgessBar 拼写成 ProcessBar

属性	说明
minimum	进度条最小值。定义进度条的起始值，默认为 0。
maximum	进度条最大值。定义进度条的结束值，默认为 100。
value	进度条当前值。表示进度条中已完成的部分，介于 minimum 和 maximum 之间。
alignment	文本在进度条中的对齐方式： - Qt::AlignLeft：左对齐 - Qt::AlignRight：右对齐 - Qt::AlignCenter：居中对齐 - Qt::AlignJustify：两端对齐
extVisible	进度条的数字是否可见。设置为 true 时显示进度数值，false 则隐藏。
orientation	进度条的方向是水平还是垂直。 - Qt::Horizontal：水平方向 - Qt::Vertical：垂直方向
invertAppearance	是否朝反方向增长进度。如果设为 true，则进度从最大值向最小值递减。
textDirection	文本的朝向。影响文本在进度条中的排列方向。
format	展示的数字格式： - %p：表示进度的百分比（0-100） - %v：表示进度的数值（0-100） - %m：表示剩余时间（以毫秒为单位） - %t：表示总时间（以毫秒为单位）

【实现进度条按时间增长功能】

（1）在界面上创建进度条，objectName 为 progressBar，其中最小值设为 0，最大值设为 100，当前值设为 0：

（2）修改 widget.h，创建 QTimer 和 handle 函数

---

这里有个小小的问题：虽然在 widget.h 中用到了 QTimer，但是却没在 widget.h 文件中包含 头文件，为什么这个代码编译没有出错呢？

上述问题其实是通过 Qt 内部提供的一个特殊技巧来实现的。

• 在 Qt 中有一个专门的头文件（#include ），这个头文件中包含了 Qt 中所有类的 “前置声明”（class QWidget，class QPushButton，class QTimer）。

• 这个头文件我们一般不会直接接触到，但是包含其它的 Qt 的头文件，都会间接的包含到这个头文件。

• 如果 Widget 类的前面以及提供了 QTimer 类的声明的话，此时就可以在 Widget 中声明 QTimer 的指针 / 引用类型的成员。

• 后续如果要真正使用 QTimer 的头文件（包括创建实例，使用里面的成员），仍然要包含 QTimer 的头文件（包含了 QTimer 的详细的类的定义）。

那么Qt 为什么要使用上述技巧呢？上述技巧能解决什么问题？有什么提升呢？

主要解决的是编译速度的问题。

• C/C++ 代码，编译速度在其他语言横向对比中是非常慢的。
• C++ 编译速度慢和 #include 头文件有直接关系
• 由于 include 关系错综复杂，所以尽可能减少 include 头文件的个数就可以有效地减少编译时间。
• Qt 中就使用 class 前置声明的方式来尽量减少头文件的包含。通过前置声明的方式，Qt 中每个头文件包含的其它头文件数量都能得到一定的降低。

---

（3）修改 widget.cpp，初始化 QTimer，此处设置 100 ms 触发一次 timeout 信号，也就是 ⼀秒钟触发 10 次，并且实现 handle

在实际开发中，进度条的取值往往是根据当前任务的实际进度来进行设置的

• 比如需要读取一个很大的文件，就可以获取文件的总的大小和当前读取完毕的大小，来设置进度条的比例。

• 由于前面我们介绍了 Qt 禁止在其他线程修改界面，因此进度条的更新往往也是需要搭配定时器来完成的。

• 通过 定时器周期触发信号，主线程调用对应的 slot 函数，再在 slot 函数中对当前的任务进度进行计算，并更新进度条的界面效果。

---

【实现其他颜色进度条】

上述的进度条是用绿色表示的，但是考虑到有些人可能不喜欢绿⾊，因此我们改成一个红色的进度条。

QProgressBar 同样也是 QWidget 的子类，因此我们可以使用 styleSheet 通过样式来修改进度条的颜色。

（1）代码不变，然后去在 Qt Designer 右侧的属性编辑器中找到 QWidget 的 styleSheet 属性（之前有讲过），编辑内容：其中的 chunk 是选中进度条中的每个 “块”，使用 QProgressBar::text 则可以选中文本。

• 但是我们发现当我们设置完之后，进度条中的数字会跑到左上角，因此我们还需要把 QProcessBar 的 alignment属性设置为垂直水平居中

此时就可以得到同上面效果一样，但是颜色不同的进度条了，同样的，通过上述方式，也可以修改文字的颜色，字体大小等样式。

3.4 Calendar Widget

QCalendarWidget 表示⼀个 “日历”，形如：

核心属性	说明
selectDate	当前选中的日期。
minimumDate	最小日期，定义用户可以选择的最早日期。
maximumDate	最大日期，定义用户可以选择的最晚日期。
firstDayOfWeek	每周的第一天（也就是日历的第一列）是周几。
gridVisible	是否显示表格的边框，默认为 true 显示边框。
selectionMode	是否允许选择日期。可以设置为单选或不选。
navigationBarVisible	日历上方标题是否显示，默认为 true 显示导航栏。
horizontalHeaderFormat	日历上方标题显示的日期格式，控制顶部标题栏的内容。
verticalHeaderFormat	日历第一列显示的内容格式，控制左侧垂直标题栏的内容。
dateEditEnabled	是否允许日期被编辑，默认为 false 不可编辑。

重要信号	说明
selectionChanged(const QDate&)	当选中的日期发生改变时发出。参数是一个 QDate 类型，保存了新的选中日期。
activated(const QDate&)	当双击一个有效的日期或者按下回车键时发出。参数是一个 QDate 类型，保存了选中的日期。
currentPageChanged(int, int)	当年份月份改变时发出。参数表示改变后的新年份和月份，分别为 int 类型。

【获取选中的日期】

（1）在界面上创建一个 QCalendarWidget 和一个 label，objectName 分别为 calendarWidget，label

（2）给 QCalendarWidget 添加 slot 函数 selectionChanged

• 上面当选择不同的日期时，label 中的内容也会随之改变

3. 共勉 🔥

【★,°:.☆(￣▽￣)/$:.°★ 】那么本篇到此就结束啦，如果有不懂 和 发现问题的小伙伴可以在评论区说出来哦，同时我还会继续更新关于【QT】的内容，请持续关注我 ！！