目录
前言
本文主要介绍 Qt 为我们提供的一些常见的显示类控件,主要有 QLabel、QLCDNumber、QProgressBar、QCalendarWidget;
一、QLabel控件
1、属性介绍
text:文本内容属性
textFormat:文本格式属性
pixmap:QLabel中的图片
scaledContents:是否自动拉伸
alignment:对齐方式
wordWrap:标签内文本是否自动换行
indent:设置文本缩进,水平和垂直方向都生效
margin:内部文本与边框的间距
openExternalLinks:是否允许打开一个外部链接
buddy:给QLabel关联一个伙伴,点击QLabel时会激活对应的伙伴
2、实战演练
(1)文本格式属性
关于textFormat,主要有如下四种设置
Qt::PlaintText 纯文本
Qt::RichText 富文本(支持html)
Qt::MarkdownText markdowm 格式
Qt::AutoText 根据文本内容自动决定格式
下面,我们分别可以尝试以下这四种格式模式
1)拖拽出如下四个QLabel
2)分别给这四个Label设置格式
(2)图片属性
我们通过QLabel还可以显示图片;
1)创建qrc文件并导入图片资源(前面介绍过,这里直接跳过)
2)拖拽创建一个Label控件
3)设置图片
拓展:
当我们拖动窗口控制大小时,图片的大小并不会改变,因为我们的QLabel设置的大小是固定的,不会发生改变,要想我们拖动窗口扩大窗口时也扩大label,我们需要引入一个新的概念,事件!关于事件这里粗略提一下,当我们拖拽改变窗口大小时,会触发一个resizeEvent的事件函数,这个函数是虚函数,我们可以重写来设置窗口大小发生改变时所做的动作,如下所示;
此时便可以实现我们拖拽改变窗口大小的同时改变label标签大小,从而改变图片大小;
(3)对齐、换行、缩进、边距属性
关于Alignment(对齐方式)主要有以下取值
Qt::AlignLeft:水平方向靠左。
Qt::AlignRight:水平方向靠右。
Qt::AlignHCenter:水平方向居中。
Qt::AlignJustify:水平方向调整间距两端对齐。
Qt::AlignTop:垂直方向靠上。
Qt::AlignButton:垂直方向靠下。
Qt::AlignVCenter:垂直方向居中。
Qt::AlignCenter:等价于 Qt::AlignHCenter | Qt::AlignVCenter。
我们直接通过代码来测试这些属性;我们还是创建四个QLabel
1)拖拽四个QLabel,并设置边框
2)分别测试属性功能
(4)伙伴属性
我们创建两个QRadioButton与两个文本,并给这两个文本设置快捷键与伙伴属性;
1)拖拽创建控件
这里Label中 &后面接的字符就是快捷键,可以通过 alt + 字符来触发快捷键,如上可以通过alt + a 与 alt + b 触发对应快捷键
2)设置buddy属性
此时我们便可以通过快捷键选择绑定伙伴的按钮;
二、QLCDNumber控件
该控件是用于显示老式计算器数字的控件,类似于计算机中数字显示,电梯楼层数字显示等;
1、属性介绍
intValue:QLCDNumber显示数字的值(int)
value:QLCDNumber显示数字的值(double)
digitCount:显示几位数字
mode:数字显示模式
segmentStyle:设置显示风格
smallDecimalPoint:设置比较小的小数点
注意:
1、其中前两个属性的唯一区别是一个是整型,一个是浮点型,这两个设置数字的值使用的不是 setIntValue 和 setValue,而是统一使用display;
2、mode的值可以是如下几种
QLCDNumber::Dec:十进制模式
QLCDNumber::Hex:十六进制模式
QLCDNumber::Bin:二进制模式
QLCDNumber::Oct:八进制模式
只有十进制才显示小数点后面内容
3、segmentStyle 的值可以是如下几种
QLCDNumber::Flat:平面显示风格
QLCDNumber::Outline:轮廓显示风格
QLCDNumber::Filled:填充显示风格
2、实战演练
设置一个倒计时的计时器
1)拖拽创建QLCDNumber,并设置初始值为10
2)设计倒计时逻辑
我们需要设计一个定时器,而 Qt 内置了一个定时器类,我们可以直接使用这个定时器类,这个定时器通过 start 方法启动后,每隔一段时间,触发一次 QTimer::timeout 信号;
我们可以通过 connect 将这个timeout信号跟槽函数连接起来,达到每隔一段时间完成某个动作这样的逻辑;
三、QProgressBar控件
这个控件也很容易理解,就是我们所说的进度条;
1、属性介绍
minimum:进度条最小值
maximum:进度条最大值
value:进度条当前值
alignment:文本在进度条中的对齐方式
textVisible:进度条的数字是否可见
orientation:进度条的方向是水平还是垂直的
invertAppearance:是否朝反方向增长进度
textDirection:文本的朝向
format:展示数字的格式
注意:
1、关于 alignment 的参数设置与 QLabel 中 alignment 参数设置相同;
2、关于 format 的参数主要有如下几种
%p:表示进度的百分比(1~100)
%v:表示进度的数值(1~100)
%m:表示进度剩余时间(毫秒)
%t:表示进度的总时间(毫秒)
2、实战演练
设置进度条随时间增长,这就又要涉及我们前面刚学过的定时器了;
1)拖拽创建一个进度条,最小值设为0,最大值设为100,初始值设置为0
2)在头文件声明定时器与定时器相关槽函数
3)初始化定时器与实现进度条按时间增长逻辑
四、QCalendarWidget控件
说白了,该控件就是要给日历控件;
1、属性介绍
selectDate:当前选中的日期
minimumDate:最小日期
maximumDate:最大日期
firstDayofWeek:每周的第一天(日历的第一列)是周几
gridVisible:是否显示表格的边框
selectionMode:是否允许选择日期
navigationBarVisible:日历上方标题是否显示
horizontalHeaderFormat:日历上方标题显示的日期格式
verticalHeaderFormat:日历第一列显示的内容格式
dateEditEnable:是否允许日期被编辑
除了上述接口我们需要了解以外,我们还需要知道日历类为我们提供的一些信号
selectionChange(const QDate&):当选中日期发生改变时发出,形参为改变后的日期
activated(const QDate&):当双击一个有效日期或按下回车键时发出,形参为改变后的日期
currentPageChange(int, int):当年份月份发生改变时发出,形参表示改变后的新年份与月份
2、实战演练
我们点击日历上日期,显示在标签内;
1)拖拽创建日历控件
2)设计槽函数
右键转达到槽,选择clicked;