【C++ Qt】快速上手 显⽰类控件（Label、LCDNumber、ProcessBar、CalendarWidget）
每日激励：“不设限和自我肯定的心态：I can do all things。 — Stephen Curry”
绪论：
本文围绕Qt中常用的显示类控件展开，重点讲解了 QLabel（文本/图片显示）、QLCDNumber（数字显示）、QProgressBar（进度条） 和 QCalendarWidget（日历控件） 的核心属性、使用场景及代码实例，帮助快速上手Qt界面开发中的基础显示功能。
————————
早关注不迷路，话不多说安全带系好，发车啦（建议电脑观看）。
显示类控件
Label
QLabel 可以⽤来显⽰⽂本和图⽚
| 属性 | 说明 |
|---|---|
| text | QLabel 中的⽂本 |
| textFormat | ⽂本的格式： Qt::PlainText 纯⽂本（最普通的文本） Qt::RichText 富⽂本(⽀持 html 标签、内容更丰富的文本、就类似word工具) Qt::MarkdownText markdown 格式 （提供各种特殊符号表示各种的样式 / 格式） Qt::AutoText 根据⽂本内容⾃动决定⽂本格式 |
| pixmap | QLabel 内部包含的图⽚. |
| scaledContents | 设为 true 表⽰内容⾃动拉伸填充 QLabel 、设为 false 则不会⾃动拉伸（让图片自动填充满） |
| alignment | 对⻬⽅式。可以设置⽔平和垂直⽅向如何对⻬（靠左/靠右/居中…） |
| wordWrap | 设为 true 内部的⽂本会⾃动换⾏. 设为 false 则内部⽂本不会⾃动换⾏ |
| indent | 设置⽂本缩进。⽔平和垂直⽅向都⽣效. |
| margin | 内部⽂本和边框之间的边距。不同于于 indent, 但是是上下左右四个⽅向都同时有效. ⽽ indent 最多只是两个⽅向有效(具体哪两个⽅向有效取决于 alignment ) |
| openExternalLinks | 是否允许打开⼀个外部的链接. (当 QLabel ⽂本内容包含 url 的时候涉及到) |
| buddy | 给 QLabel 关联⼀个 “伙伴” , 这样点击 QLabel 时就能激活对应的伙伴 例如：伙伴如果是⼀个 QCheckBox, 那么该 QCheckBox 就会被选中 |
代码实例
设置文本格式：
- ui文件中拖拽三个 label 控件
- 构造函数中设置label的文本格式（textFormat）
- 第一个：纯文本（setTextFormat）、setText：这是一段纯文本
- 第二个：富文本…、使用
<b>xxxxx</b>加粗标签 - 第三个：markdown、使用 # 设置标题
比较简单源码就不放了（如下）
设置图片QPixmap
- 拖拽label、使用qrc机制，添加图片
- 将QLabel设置和窗口一样大，并且把QLabel左上角设置到窗口的左上角这里
- 将label的geometry的x y设置成 0 0 并且获取窗口的宽高给到label（直接this->width、… 即可）
- 直接写死某个数值，称为 “硬编码”（要保证数值不改变）
- label添加图片：创建QPixmap对象构造图片路径
- 将该对图片象设置（setpixmap）到label中、其中可能还会填不满因为要保证图片大小足够大
- 若不够大可以通过scaledContents进行拉伸填充
源码如下：
#include "widget.h"
#include "ui_widget.h"
#include <QLabel>
Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);QLabel* label = new QLabel(this);label->setGeometry(0,0,this->width(),this->height());//获取窗口的宽和高给到labellabel->setScaledContents(true);QPixmap pixmap(":/1.jpg");label->setPixmap(pixmap);
}Widget::~Widget()
{delete ui;
}
但可能还会有点问题，因为是在构造函数中设置的尺寸，所以这个尺寸设置是一次性的，若窗口再次发生改变（修改窗口大小）QLabel中的图片就不会变化了
解决办法
- 首先了解概念：Qt中的操作会有两类概念：信号、事件
- 当用户拖拽修改窗口大小的时候，就会触发resize事件（resizeEvent）、从A拖到B的过程的他是 连续的一系列的触发 resizeEvent 事件
- 可以让 Widget 窗口类，重写父类QWidget的resizeEvent虚函数，该函数在鼠标拖动窗口尺寸时会被返回调用执行，所以重写该函数，当父类调用该函数时就会调用到子类中的重写的该函数（多态~）
- 重写（声明+定义）void resizeEvent（QResizeEvent* event）
- 此时的event就会窗口的实时大小
- 所以对于label的大小就能通过event对象获取高度和宽度动态的改变
附：其中QResizeEvent不能直接使用，需要添加头文件 #
include <QResizeEvent>
源码如下：
#include "widget.h"
#include "ui_widget.h"
#include <QLabel>
#include <QDebug>
#include <QResizeEvent>
Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);ui->label->setGeometry(0,0,this->width(),this->height());ui->label->setScaledContents(true);//设置自动拉伸QPixmap pixmap(":/1.jpg");ui->label->setPixmap(pixmap);//设置图片
}Widget::~Widget()
{delete ui;
}void Widget::resizeEvent(QResizeEvent * event)
{qDebug() << event->size();//打印查看当前窗口大小ui->label->setGeometry(0,0,event->size().width(),event->size().height());//ui->label->setGeometry(0,0,this->width(),this->height());
}
⽂本对⻬, ⾃动换⾏, 缩进, 边距
-
构建几个label，设置边框：QFrame
- 通过设置边框 frameShape：Box
-
构造函数中设置 label 的不同属性
-
Text：“这是一段文本”
-
Alignment：
- Qt::AlignHCenter（水平居中）
- Qt::AlignVCenter（垂直居中）
- AlignRight（靠右对齐）
- AlignTop（靠上对齐）…
-
自动换行（WordWrap）：
-
自动换行：
-
不换行：
-
-
设置缩进
-
Text：文本
-
Indent：50（单位：像素）
-
注意：此处的缩进即使文本换行了，后面的也仍然会缩进，而非首行缩进
-
若要实现首行缩进可以使用：CSS（QSS）中 text-indent 属性实现首行缩进
-
-
设置边距
- Margin：边距（单位：像素）
- 其中上下左右都会设置到，其中当边距过大可能会导致文本无法显示（如下图，并且还保持缩进）
-
QLabel 伙伴
- ui文件中拖拽两个 RadioButuon：选项1/2 、和两个label 快捷键
- 并设置快捷键：设置方法在文本后面添加 (&A)，A代表某个键位的值 如上&T
- 将label通过Buddy进行设置和RadioButuon的关联
- QLabel中的文本可以指定快捷键
- 但功能较弱，必须 在文本中使用 & 跟上字符来表示快捷键（不过加上括号会更好理解点！）
-
LCD Number
QLCdNumber是一个专门用来显示数字的控件，类似“老式计算机”的效果
| 属性 | 说明 |
|---|---|
| intValue | QLCDNumber 显⽰的数字值(int). |
| value | QLCDNumber 显⽰的数字值(double) 和 intValue 是联动的. 例如给 value 设为 1.5, intValue 的值就是 2 另外, 设置 value 和 intValue 的⽅法名字为 display , ⽽不是 setValue 或者 setIntValue . |
| digitCount | 显⽰⼏位数字 |
| mode | 数字显⽰形式. 1.QLCDNumber::Dec ：⼗进制模式，显⽰常规的⼗进制数字。 2. QLCDNumber::Hex ：⼗六进制模式，以⼗六进制格式显⽰数字。 3. QLCDNumber::Bin ：⼆进制模式，以⼆进制格式显⽰数字。 4. QLCDNumber::Oct ：⼋进制模式，以⼋进制格式显⽰数字。 只有⼗进制的时候才能显⽰⼩数点后的内容. |
| segmentStyle | 设置显⽰⻛格. 1. QLCDNumber::Flat ：平⾯的显⽰⻛格，数字呈现在⼀个平坦的表⾯上。 2. QLCDNumber::Outline ：轮廓显⽰⻛格，数字具有清晰的轮廓和阴影效果。 3. QLCDNumber::Filled ：填充显⽰⻛格，数字被填充颜⾊并与背景区分开。 |
| smallDecimalPoint | 设置⽐较⼩的 ⼩数点. |
其中注意在设置value和intValue的方法名字为 display，而不是setValue/setIntValue（这种设计是不太好的所以自己设计时就尽量保持一致）
实例：倒计时 QTimer的使用
- ui文件中拖拽上 LCD Number
- 设置显示初始值：10，然后要实现每秒钟 -1 的效果
- C++标准库中没有提供定时器的实现，boost里面提供了对应的功能
- Qt中也封装了对应的定时器（结合信号槽机制）
- QTimer 这个类对象，就会自动不断 产生 timeout 信号
- 可以通过start方式来开启定时器
- 并且参数中设定触发timeout信号的周期，
- 结合connect，把这个 timeout 信号绑定到槽函数中
- 就可以执行持续触发槽函数，从而修改LCDNumber中的数字的逻辑
- 将QTimer对象写成 类成员变量，并构造到对象树中
- 把 QTimer 的 timeout 信号和咱们自己的槽函数（handle）进行连接
- 启动定时器，参数是触发timeout的周期，单位是 ms
- 编写handle槽函数（定义在Widget的类函数）
- 先拿到LCDNumber中的数字，通过ui找到lcdNumber在获取数字(intvalue)
- 判断value是否小于0
- 若小于则调用stop，停止定时器
- 每次将lcdNumber的value中的值设置（display） - 1
源码：
widget.cpp
#include "widget.h"
#include "ui_widget.h"
#include <QTimer>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);ui->lcdNumber->display(10);//注意是displaytimer = new QTimer(this);//注意不要使用成 QTimetimer->start(1000);//发送信号的时间 10000connect(timer,&QTimer::timeout,this,&Widget::handle);}Widget::~Widget()
{delete ui;
}void Widget::handle(){int v = ui->lcdNumber->intValue();if(v > 0){ui->lcdNumber->display(v - 1);//注意是display}else{timer->stop();//暂定}
}不使用Qtime来实现：
- 拖拽LCDNumber
- 获取 lcd 对象中的 intvalue（整形）
- 循环判断value值（若小于0则直接退出）
- 内部使用C++11的 std::this_thread::sleep_for(std::chrono::seconds(1)) 进行休眠1s
- 每次设置value-1
- 但写在 widget 构造函数中并没有效果，因为显示在构造后面（具体如下图）
所需要需要修改：
- 使用thread（这是操作系统提供的api）
- 内部使用lambda表达式
- 实现和上面一样
- 但这样写也会出现错误，因为界面有一个专门的线程负责维护更新（主线程、main函数所在的线程），对于GUI来说，内部包含了许多隐藏状态，Qt为了保证修改界面的过程中，线程是不会收到影响的，Qt禁止了其他线程直接修改界面
因为：
- 对于一个图形化界面会有许多的变量，进很容易出现线程安全，所以就要求所有对界面的修改操作必须在主线程中完成！！
- 对于Qt的槽函数来说，默认情况下，槽函数都是由主线程调用的，所以使用槽函数修改界面是没问题的
- a.exec 就会时主线程进入“事件循环”，一直循环，每执行一次循环，都会有固定的事情要操作（其中的槽函数调用就是通过这里完成）
ProgressBar进度条
使⽤ QProgressBar 表⽰⼀个进度条
一些核心属性：
| 属性 | 说明 |
|---|---|
| minimum | 进度条最⼩值 |
| maximum | 进度条最⼤值 |
| value | 进度条当前值 |
| alignment | ⽂本在进度条中的对⻬⽅式： Qt::AlignLeft : 左对⻬ Qt::AlignRight : 右对⻬ Qt::AlignCenter : 居中对⻬ Qt::AlignJustify : 两端对⻬ |
| textVisible | 进度条的数字是否可⻅. |
| orientation | 进度条的⽅向是⽔平还是垂直 |
| invertAppearance | 是否是朝反⽅向增⻓进度 |
| textDirection | ⽂本的朝向. |
| format | 展⽰的数字格式. %p ：表⽰进度的百分⽐（0-100） 、 %v ：表⽰进度的数值（0-100）、 %m ：表⽰剩余时间（以毫秒为单位） 、 %t ：表⽰总时间（以毫秒为单位） |
实例：进度条
让个这个进度条的进度跟随时间增长（每隔100ms 进度条数值增长1）
- 拖拽ProgressBar到界面上
- 创建Qtimer 成员变量 timer
- 构造函数中：
- new上空间并且挂上对象树
- 连接connect连接槽函数
- 将 timer 对象和 handle 进行连接，通过 Qtimer::timeout 信号进行触发
- 创建handle成员函数
- 注意启动timer定时器（100ms）
- handle函数：
- 获取当前进度条的当前数值，通过ObjectName调用value获取
- 判断若value >= 100
- 代表进度条满了就可以停止定时器了
- 并直接返回
- 每次 让value值增加1
源码：
#include "widget.h"
#include "ui_widget.h"
#include <QTimer>
Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);timer = new QTimer();timer->start(100);//设置100ms周期的持续发送timeout信号//设置槽函数，让其实现ProcessBar的递增connect(timer,&QTimer::timeout,this,&Widget::handle);
}Widget::~Widget()
{delete ui;
}void Widget::handle(){//1. 获取process的值int value = ui->progressBar->value();ui->progressBar->setValue(value+1);//每次进来都让其+1if(value >= ui->progressBar->maximum()){//若够了或者timer->stop();//停止信号}}
其中在widget.h中用到了QTimer，却可以不用该文件中声明头文件，是因为在其他文件中声明，所以就能使用（在.h中不添加、在.cpp中添加）
- 因为在Qt内部提供了体术技巧：Qt中有一个专门的头文件，这个头文件包含了Qt中所有类的前置声明
- 这个头文件，一般不会直接接触到，但是包含了其他Qt的头文件，都会间接包含到这个头文件中，当然这并不代表你可以不写头文件，你必须在某个文件中添加头文件
为啥要提供这种技巧？
主要是解决编译速度的问题~
- 因为C/C++代码编译速度是较慢的
- 因为include头文件的文本替换是比较慢的~
- 因此尽可能减少头文件的个数，就能有效编译时间，Qt 使用 class 前置声明的方式尽量减少头文件的包含（这样某个文件中定义了该头文件其他文件就不需要再包含了）
一些互联网大厂，甚至会有专门的“编译集群”（分布式编译）
使用QSS将进度条改成红色的
QSS机制可以使用 styleSheet 通过样式来修改进度条的颜⾊.
- 实现方法点击processBar控件右侧属性找到 styleSheet / 右击控件选择 “编辑样式表”
- 内部样式设置
QProgressBar::chunk {background-color: #FF0000;} 1. QProgressBar::chunk：代表指定控件，选择器针对那个控件生效 2. {} 内部填写样式
其中注意的是：进度条具体的进度设置一般是根据时间任务类型灵活设置的（这里就简单的实现了）
例如：要读取某个文件，就可以先获取该文件的总大小，每读取一部分数据（就可以算出读了多少数据段）进行更新进度条的数值
Calendar Widget
核⼼属性
| 属性 | 说明 |
|---|---|
| selectDate | 当前选中的⽇期 |
| minimumDate | 最⼩⽇期 |
| maximumDate | 最⼤⽇期 |
| firstDayOfWeek | 每周的第⼀天(也就是⽇历的第⼀列) 是周⼏ |
| gridVisible | 是否显⽰表格的边框 |
| selectionMode | 是否允许选择⽇期 |
| navigationBarVisible | ⽇历上⽅标题是否显⽰ |
| horizontalHeaderFormat | ⽇历上⽅标题显⽰的⽇期格式 |
| verticalHeaderFormat | ⽇历第⼀列显⽰的内容格式 |
| dateEditEnabled | 是否允许⽇期被编辑 |
重要信号
| 信号 | 说明 |
|---|---|
| selectionChanged(const QDate&) | 当选中的⽇期发⽣改变时发出 |
| activated(const QDate&) | 当双击⼀个有效的⽇期或者按下回⻋键时发出，形参是⼀个QDate类型，保存了选中的⽇期 |
| currentPageChanged(int, int) | 当年份⽉份改变时发出，形参表⽰改变后的新年份和⽉份 |
实例
- ui文件中拖拽 calendar Widget、label
- 通过label中显示选择的日期
- 通过selectionChanged信号进行获取用户选中的日期，创建信号槽函数
- 槽函数编写：
- 获取选中日期 （selectDate）放到QDate对象中
- 将label中的文本修改为了 date 时间（需要配合QDate::toString转换成字符串）
void Widget::on_calendarWidget_selectionChanged()
{
// qDebug() << ui->calendarWidget->selectedDate();QDate date = ui->calendarWidget->selectedDate();ui->label->setText(date.toString());
}
本章完。预知后事如何，暂听下回分解。
如果有任何问题欢迎讨论哈！
如果觉得这篇文章对你有所帮助的话点点赞吧！
持续更新大量C++ Qt细致内容，早关注不迷路。