【QT】常⽤控件详解(四）常用显示类控件类 Label && LCDNumber && ProgressBar && Calendar Widget

一、Label

1.1 属性

QLabel 可以⽤来显⽰⽂本和图⽚.
核⼼属性如下

1.2 显⽰不同格式的⽂本

1)在界⾯上创建三个QLabel
尺⼨放⼤⼀些.objectName分别为label,label_2,label_3

2. 修改widget.cpp,设置三个label的属性

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    ui->label->setTextFormat(Qt::RichText);
    ui->label->setText("这是一段纯文本");

    ui->label->setTextFormat(Qt::MarkdownText);
    ui->label_2->setText("<b> 这是一段富文本 </b>");

    ui->label->setTextFormat(Qt::AutoText);
    ui->label_3->setText("## 这是一段 markdown 文本");
}

1.3 显⽰图⽚

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

1. 在界⾯上创建⼀个QLabel, objectName 为label
   

2. 创建resource.qrc ⽂件,并把图⽚导⼊到qrc中
   

3. 修改widget.cpp,给QLabel设置图⽚

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    // 设置 label  ⼤⼩和窗⼝⼀样⼤
    ui->label->setGeometry(0, 0, 800, 800);

    QPixmap pixmap(":/hachimitsu.jpg");
    ui->label->setPixmap(pixmap);
}

这个图⽚本⾝的尺⼨是480*480,并没有把QLabel填充满.
4) 修改代码,设置scaledContents 属性

//设置内容伸缩
ui->label->setScaledContents(true);

再次运⾏,观察效果,可以看到图⽚已经被拉伸,可以把窗⼝填满了,但还是不能随意跟窗口着缩放图片.

5) 此时,如果拖动窗⼝⼤⼩,可以看到图⽚并不会随着窗⼝⼤⼩的改变⽽同步变化

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

1. 先声明函数

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui {
class Widget;
}
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

    void resizeEvent(QResizeEvent* event);
private:
    Ui::Widget *ui;
};
#endif // WIDGET_H

2. 函数实现

 #include "widget.h"
#include "ui_widget.h"
#include <QResizeEvent>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    ui->label->setGeometry(0, 0, 800, 800);

    QPixmap pixmap(":/hachimitsu.jpg");
    ui->label->setPixmap(pixmap);

    //设置内容伸缩
    ui->label->setScaledContents(true);
}

//重写 resizeEvent, 这个函数会在窗口大小发生时被自动调用
void Widget::resizeEvent(QResizeEvent* event)
{
    // 可以直接通过 this->width() 和 this->height() 设置 label 新的尺寸
    // 也可以通过 event 参数拿到新的尺寸
    // ui->label->setGeometry(0, 0, this->width(), this->height());
    ui->label->setGeometry(0, 0, event->size().width(), event->size().height());

    qDebug() << event->size();
}

Widget::~Widget()
{
    delete ui;
}

效果：无论怎拖拉，窗口都会适配图片的大小

注意:
此处的resizeEvent函数我们没有手动调用,但是能在窗口大小变化时被自动调用.这个过程就是依赖C++中的多态来实现的.Qt框架内部管理着QWidget对象表示咱们的窗口.在窗口大小发生改变时,Qt就会自动调用resizeEvent函数.
但是由于实际上这个表示窗口的并非是QWidget,而是QWidget的子类,也就是咱们自己写的Widget.此时虽然是通过父类调用函数,但是实际上执行的是子类的函数(也就是我们重写后的resizeEvent).
此处属于是多态机制的一种经典用法.通过上述过程,就可以把自定义的代码,插入到框架内部执行.相当于"注册回调函数”.

1.4 ⽂本对⻬,⾃动换⾏,缩进,边距

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设置属性.

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    //设置文字居中对齐
    ui->label->setAlignment(Qt::AlignHCenter | Qt::AlignVCenter);
    ui->label->setText("垂直水平居中的文本");

    //设置自动换行
    ui->label_2->setAlignment(Qt::AlignTop | Qt::AlignLeft);
    ui->label_2->setWordWrap(true);
    ui->label_2->setText("这是⼀个很⻓的⽂本这是⼀个很⻓的⽂本这是⼀个很⻓的⽂本这是⼀个很⻓的⽂本这是⼀个很⻓的⽂本这是⼀个很⻓的⽂本");

    //设置首行缩进
    ui->label_3->setAlignment(Qt::AlignTop | Qt::AlignLeft);
    ui->label_3->setIndent(20);
    ui->label_3->setText("这是⼀个很⻓的⽂本这是⼀个很⻓的⽂本这是⼀个很⻓的⽂本这是⼀个很⻓的⽂本这是⼀个很⻓的⽂本这是⼀个很⻓的⽂本");

    //设置边距
    ui->label_4->setAlignment(Qt::AlignTop | Qt::AlignLeft);
    ui->label_4->setMargin(20);
    ui->label_4->setText("这是⼀个很⻓的⽂本这是⼀个很⻓的⽂本这是⼀个很⻓的⽂本这是⼀个很⻓的⽂本这是⼀个很⻓的⽂本这是⼀个很⻓的⽂本");
}

3)运行程序,可以看到如下效果

• 第一个label垂直水平居中
• 第二个label设置了wordWrap,能够自动换行
• 第三个label设置了Indent,左侧和上方和边框有间距.右侧则没有.
• 第四个label设置了margin,四个方向均有间距(图上仅体现出三个方向,下方看不出来).

1.5 设置伙伴

1)创建两个label和两个radioButton.objectName分别问label , label_2,radioButton , radioButton_2

此处把label中的文本设置为"快捷键&A"这样的形式.其中&后面跟着的字符,就是快捷键.
可以通过alt+A的方式来触发该快捷键.

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

2. 编写widget.cpp,设置buddy属性
   当然这⾥也可以使⽤QtDesigner直接设置.

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    
     // 设置 label 的伙伴 widget
    ui->label->setBuddy(ui->radioButton);
    ui->label_2->setBuddy(ui->radioButton_2);
}

3. 运⾏程序,可以看到,按下快捷键alt+a或者alt+b,即可选中对应的选项.
   

二、LCDNumber

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

2.1 核⼼属性

2.2 倒计时实现

1)在界面上创建一个QLCDNumber,初始值设为10.
objectName为lcdNumber

2)修改widget.h 代码,创建一个QTimer成员,和一个updateTime函数

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui {
class Widget;
}
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

    QTimer* timer;
    void updateTime();

private:
    Ui::Widget *ui;
};
#endif // WIDGET_H

3)修改widget.cpp,在构造函数中初始化QTimer

• QTimer表示定时器.通过start方法启动定时器之后,就会每隔一定周期,触发一次QTimer : :timeout信号.
• 使用connect把QTimer ::timeout信号和widget::updateTime连接起来,
  意味着每次触发QTimer: :timeout都会执行widget: : updateTime

#include "widget.h"
#include "ui_widget.h"
#include <QTimer>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    //创建QTimer实例
    timer = new QTimer(this);
    //连接限号和槽，QTimer会每隔一段时间触发一个timeout 信号，现在把 timeout 信号和updateTimer连接起来
    //此时意味着每次触发 timeout 信号都会伴随 updateTime 的函数执行
    connect(timer, &QTimer::timeout, this, &Widget::updateTime);
    // 启动 QTimer ,并且规定每隔1000ms 触发一次timeout信号
    timer->start(1000);
}

4)修改widget.cpp,实现updateTime

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

void Widget::updateTime()
{
    qDebug() << "updateTime";

    int value = ui->lcdNumber->intValue();
    if(value <= 0)
    {
        //如果时间到，停止定时器
        timer->stop();
        return ;
    }

    ui->lcdNumber->display(value - 1);
}

5. 执⾏程序,可以看到每隔⼀秒钟,显⽰的数字就减少1

2.2 针对上述代码,存在两个问题:

1. 上述代码如果直接在Widget构造函数中,通过⼀个循环+sleep的⽅式是否可以呢?
   代码形如

 #include "widget.h"
#include "ui_widget.h"
#include <QTimer>
#include <thread>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    int value = ui->lcdNumber->intValue();
    while(true)
    {
        std::this_thread::sleep_for(std::chrono::seconds(1));
        if(value <= 0)
        {
            break;
        }
        ui->lcdNumber->display(value - 1);
    }

}

显然,这个代码是不⾏的.循环会使Widget的构造函数⽆法执⾏完毕,此时界⾯是不能正确构造和显⽰的.

2. 上述代码如果是在Widget构造函数中,另起⼀个线程,在新线程中完成循环+sleep是否可以呢?
   代码形如

#include "widget.h"
#include "ui_widget.h"
#include <QTimer>
#include <thread>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    
    std::thread t([this](){
        int value = this->ui->lcdNumber->intValue();
        while(true)
        {
            std::this_thread::sleep_for(std::chrono::seconds(1));
            if(value <= 0)
            {
                break;
            }
            this->ui->lcdNumber->display(value - 1);
        }
    });

}

这个代码同样是不行的.Qt 中规定,任何对于GUl上内容的操作,必须在主线程中完成.像Widget构造函数,以及connect连接的slot 函数,都是在主线程中调用的.而我们自己创建的线程则不是.

当我们自己的线程中尝试对界面元素进行修改时,Qt程序往往会直接崩溃.

这样的约定主要是因为GUI中的状态往往是牵一发动全身的,修改一个地方,就需要同步的对其他内容进行调整.
比如调整了某个元素的尺寸,就可能影响到内部的文字位置,或者其他元素的位置.这里一连串的修改,都是需要按照一定的顺序来完成的.
由于多线程执行的顺序无法保障,因此Qt从根本上禁止了其他线程修改GUI状态,避免后续的一系列问题.

综上所述,使⽤定时器,是实现上述功能的最合理⽅案.

后续如果我们也有类似的需要"周期性修改界⾯状态"的需求,也需要优先考虑使⽤定时器.

三、 ProgressBar

使用QProgressBar表示一个进度条.

注意,不要把ProgessBar拼写成ProcessBar !

3.1 属性

1)在界⾯上创建进度条, objectName为progressBar

其中最⼩值设为0,最⼤值设为100.当前值设为0.

2)修改widget.h,创建QTimer和updateProgressBar函数.

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui {
class Widget;
}
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

    QTimer * timer;
    void updateProgressBar();

private:
    Ui::Widget *ui;
};
#endif // WIDGET_H

3. 修改widget.cpp,初始化QTimer

• 此处设置100ms触发⼀次timeout信号.也就是⼀秒钟触发10次.

#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(this);
    connect(timer, &QTimer::timeout, this, &Widget::updateProgressBar);
    timer->start(1000);
}

4)修改widget.cpp,实现updateProgressBar

void Widget::updateProgressBar()
{
    int value = ui->progressBar->value();
    if(value >= 100)
    {
        timer->stop();
        return;
    }
    ui->progressBar->setValue(value + 1);
}

5)运行程序,可以看到进度条中的进度在快速增长.

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

3.2 创建⼀个红⾊的进度条

不要忘了，QProgressBar同样也是Qwidget 的子类,因此我们可以使用styleSheet通过样式来修改进度条的颜色.

1. 在界⾯上创建⼀个进度条.
   2)在 Qt Designer右侧的属性编辑器中,找到QWidget的styleSheet属性.编辑如下内容:
   其中的 chunk是选中进度条中的每个"块".使用QProgressBar : :text则可以选中文本.
   

如果不设置对齐属性，进度条中的数字会显示在左上角。这可能是Qt自身的bug，目前只能通过手动设置对齐方式来解决。

好看的样式

QProgressBar {
    /* 进度条背景（未完成区域） */
    background-color: #444;
    /* 进度条高度，可按需调整 */
    height: 20px; 
    /* 边框样式，可选 */
    border: 1px solid #666; 
    /* 边框圆角，可选 */
    border-radius: 4px; 
    /* 让文本强制居中（核心！） */
    text-align: center; 
}

QProgressBar::chunk {
    /* 已完成进度的颜色 */
    background-color: rgb(255, 0, 0); 
    /* 进度块圆角，和外层匹配 */
    border-radius: 3px; 
}

四、Calendar Widget

4.1 核⼼属性

重要信号

4.2 获取选中的日期

1)在界面上创建一个Qcalendarwidget和一个labelobjectName为calendarwidget , label

2)给Qcalendarwidget添加slot函数

void Widget::on_calendarWidget_selectionChanged()
{
    QDate date = ui->calendarWidget->selectedDate();
    qDebug() << date;

    ui->label->setText(date.toString());
}

3. 执⾏程序,可以看到当选择不同的⽇期时,label中的内容就会随之改变.
   

🚩总结