常用控件 (二)

显示类控件

QLabel

QLabel 控件，可以用来显示文本和图片；

QLabel核心属性如下:

属性	说明
text	QLabel中的文本内容
textFormat	QLabel中文本内容的格式:Qt:: PlainText 纯文本; Qt::RichText 富文本(支持html标签); 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 就会被选中.

eg1: 显示三个不同格式文本(普通文本、html文本、markdown文本)

第一个QLabel显示普通文本,第二个文本框显示html文本，第三个文本框显示markdown文本

1. 在文本框1中输入<b> 你好< /b>，文本框2中给输入相同的东西,下面是C++代码:
   
2. 在文本框1中输入**你好 **,在问本框3中输入同样的内容:
   

eg2: 设置一个铺满窗口的图片;
图片素材如下:

因此对应的C++代码:

可以看到，我们的坤坤就已经铺满全屏了，但是这有一个问题，就是随着我们拉动我们的widget窗口的大小，我们发现，我们的坤坤，还是保持原有大小，并没有随着窗口的改变而铺满全场:

这是为什么?
因为上面的设置是在widget构造函数里面设置的，是一次性的，当程序跑起来过后，坤坤会铺满初始屏幕，但是之后窗口大小在发生改变的话，那么坤坤还是会保持原样不回变化;
显然，这样的结果是不合理的，我们现在希望，坤坤能够随着窗口的大小的改变而发生改变:
为了解决这个问题,我们可以在Widget中重写resizeEvent函数，这个函数会在窗口大小发生变化时自动调用，更改过后的C++代码:

注意: 上面的resizeEvent函数我们没有手动调用，但是能够在窗口大小发生变化时被自动调用，这个过程就是依赖于C++中的多态来实现的。Qt框架内部管理着QWidget对象表示咱们的窗口。在这个窗口发生改变的时候，Qt就会自动调用resizeEvent函数；但是由于实际上这个表示窗口的并非是QWidget，而是Widget。此时虽然是通过父类调用函数，，但是实际上执行的是子类的函数，也就是我们重写过后的resizeEvent函数。此处这种用法实际上叫“事件”，是另一种表示用户操作的用法，在之前我们就已经学习了使用信号来表示用户的操作，但是现在同样可以使用“事件”来表示用户的操作;

eg3: 文本对齐、自动换行、缩进、边距;

1. 文本对齐
   
   上图是文本在QLabel中的原始对齐方式，垂直对其+靠左对齐，现在我们想让他居中对齐，也就是垂直对齐+水平对齐
   
2. 自动换行
   
   我们可以发现，当文本内容很长的时候，QLabel是不会自动换行的，那么后续的内容也就无法被看到，为了解决这个问题，我们只需开启自动换行功能即可:
   
3. 缩进
   
   上图是没有设置缩进的情况;
   下面我们使用C++代码来设置缩进
   
4. 边距
   
   上图是没有设置边距的样子
   下面使用C+代码来设置边距:

eg4: 设置伙伴

对应的C++代码:

通过设置伙伴过后，我们发现，选项之间不仅可以使用点击来进行切换，还可以使用“alt + A”或"alt + B"的快捷键来进行切换;
注意: 此处把QLabel中的文本设置为“快捷键&A”这样的形式，其中&符号后面跟着的字符，就是快捷键，可以通过alt+A的方式来触发该快捷键；但是这里的快捷键与QPushButton中的快捷键不同，就是这里的快捷键需要搭配alt和单个字母的方式才能触发;

QLCDNumber

QLCDNumer 是⼀个专⻔⽤来显⽰数字的控件. 类似于 “⽼式计算器” 的效果.

核心属性

属性	说明
intValue	QLCDNumber 显⽰的数字值(int).
value	QLCDNumber 显⽰的数字值(double).和 intValue 是联动的.例如给 value 设为 1.5, intValue 的值就是 2.另外, 设置 value 和 intValue 的⽅法名字为 display , ⽽不是 setValue 或者 setIntValue .
digitCount	显⽰⼏位数字.
mode	数字显⽰形式.(只有⼗进制的时候才能显⽰⼩数点后的内容.)
segmentStyle	设置显⽰⻛格.
smallDecimalPoint	设置⽐较⼩的 ⼩数点.

eg1: 倒计时
在界面上创建一个QLCDNUmber，并设置初始值为10

然后，现在我们希望每隔1s就减少1，因此我们需要一个定时器，在Qt官方中，已经为我们内置好对应的定时器了，我们只用包含对应的头文件进行使用即可，这个定时器的大致工作原理就是，这个定时器会间隔一定的周期发出一个timeout信号，我们只需要捕捉这个信号，然后进行操作即可，这个周期可以有我们程序员自己设置，因此对应的C++代码为:

针对上诉这个问题，存在两个问题;

1. 我们能不能在Widget构造中自己写一个循环，然后自己sleep一秒，然后再进行减1操作呢?
   我们写代码来实践一下:
   
   最终呈现出来的结果就是，窗口再经过10s过后才出来的，并且一出来就显示数字0，并没有出现像上诉一样的倒计时显示;
   这其实也是能够理解的，因为我们是将这个倒计时代码段写在Widget的构造函数内部的，在构造函数内部窗口都还没构造出来，而QLCDNumber控件又是依赖于Widget窗口的，自然的在没有Widget窗口之前不回存在QLCDNumber，当10s时间过去后，value最后一次被设置的值为0，那么最后一次显示出来的就是0;
2. 我们用另一个线程来专门进行倒计时，让主线程完成窗口的创建:
   
   我们可以看到，程序直接出现了错误，因为，对于一个GUI程序来说，他们只允许主线程来操作各种控件，不允许多线程来操作，因为在多线程下可能出现线程安全和效率低下的问题,因此Qt官方直接就禁止了其它线程来修改窗口上的控件

QProgressBar

使⽤ QProgressBar 表⽰⼀个进度条.

核⼼属性

属性	说明
minimum	进度条最⼩值
maximum	进度条最⼤值
value	进度条当前值
alignment	⽂本在进度条中的对⻬⽅式.
textVisible	进度条的数字是否可⻅.
orientation	进度条的⽅向是⽔平还是垂直
invertAppearance	是否是朝反⽅向增⻓进度
textDirection	⽂本的朝向.
format	展⽰的数字格式.

eg1: 设计一个进度条按照时间进行增长，100ms增长1次

对应的C++代码如下:

注意: 在实际开发中, 进度条的取值, 往往是根据当前任务的实际进度来进⾏设置的.
⽐如需要读取⼀个很⼤的⽂件, 就可以获取⽂件的总的⼤⼩, 和当前读取完毕的⼤⼩, 来设置进
度条的⽐例.
由于上⾯我们介绍了 Qt 禁⽌在其他线程修改界⾯, 因此进度条的更新往往也是需要搭配定时
器来完成的.
通过定时器周期触发信号, 主线程调⽤对应的 slot 函数. 再在 slot 函数中对当前的任务进度进
⾏计算, 并更新进度条的界⾯效果.

eg2: 创建一个其它颜色的进度条
可以通过前文我们学习的QSS来进行修改:

同理，对应的属性设置:

最后实现出来的效果如下:

QCalendarWidget

QCalendarWidget 表⽰⼀个 “⽇历” , 形如:

核⼼属性

属性	说明
selectDate	当前选中的⽇期
minimumDate	最⼩⽇期
maximumDate	最⼤⽇期
firstDayOfWeek	每周的第⼀天(也就是⽇历的第⼀列) 是周⼏
gridVisible	是否显⽰表格的边框
selectionMode	是否允许选择⽇期
navigationBarVisible	⽇历上⽅标题是否显⽰
horizontalHeaderFormat	⽇历上⽅标题显⽰的⽇期格式
verticalHeaderFormat	⽇历第⼀列显⽰的内容格式
dateEditEnabled	是否允许⽇期被编辑

重要信号:

信号	说明
selectionChanged(const QDate&)	当选中的⽇期发⽣改变时发出
activated(const QDate&)	当双击⼀个有效的⽇期或者按下回⻋键时发出，形参是⼀个QDate类型，保存了选中的⽇期
currentPageChanged(int,int)	当年份⽉份改变时发出，形参表⽰改变后的新年份和⽉份

eg1：
获取选中的⽇期

并且给activated信号和selectionChanged信号绑定对应的槽函数:

最后运行效果: