QT学习日记 | 显示类控件

目录

前言

一、QLabel控件

1、属性介绍

2、实战演练

（1）文本格式属性

（2）图片属性

（3）对齐、换行、缩进、边距属性

（4）伙伴属性

二、QLCDNumber控件

1、属性介绍

2、实战演练

三、QProgressBar控件

1、属性介绍

2、实战演练

四、QCalendarWidget控件

1、属性介绍

2、实战演练

---

前言

        本文主要介绍 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；