第二章 常用控件 | 2.3 标签-QLabel

QLabel标签一个非常基础且常用的控件，用于在用户界面上显示文本或图片，一般不接受用户输入。

1. 效果演示

演示标签的字体设置、文本换行、加载静态和动态图片

2. 属性和方法

QLabel有很多属性，完整的可查看帮助文档，这里列出常用的属性和方法。

2.1 文本

可以获取和设置按钮上显示的文本

QString text() const;
void setText(const QString &text);

2.2 对齐方式

用于设置标签中的内容在水平和垂直两个方向上的对齐方式，比如左对齐、右对齐、上对齐、下对齐、水平居中、垂直居中等。

// 获取和设置文本的对齐方式
Qt::Alignment alignment() const;
void setAlignment(Qt::Alignment);

其中，Qt::Alignment是一个枚举，常用取值如下：

枚举	值	含义
Qt::AlignLeft	0x0001	水平方向-左对齐
Qt::AlignRight	0x0002	水平方向-右对齐
Qt::AlignHCenter	0x0004	水平方向-居中对齐
Qt::AlignTop	0x0020	垂直方向-上对齐
Qt::AlignBottom	0x0040	垂直方向-下对齐
Qt::AlignVCenter	0x0080	垂直方向-居中对齐
Qt::AlignCenter（AlignVCenter | AlignHCenter）	0x0084	垂直方向和水平方向-居中对齐

上面的每一个宏，都代表16进制中的一位，可以进行或（|）操作，来同时设置多个对齐方式。
该属性，既可以在Qt设计师右侧的属性窗口中修改，也可以在代码中动态地获取和修改

2.3 自动换行

标签的自动换行策略，就是让文本在到达标签右边界时自动换行显示，而不是一直横向延伸（被截断或超出）。

// 获取和设置文本是否允许换行
// 换行时：在 word-breaks处，不会将一个完整的单词显示在两行
bool wordWrap() const; // 判断是否允许换行
void setWordWrap(bool on); // 设置是否允许换行 

2.4 图像

可以将一个QPixmap对象设置到标签上，让标签从显示文字变为显示图片

// 获取和设置显示的图像
const QPixmap *pixmap() const;
void setPixmap(const QPixmap &pixmap);

3. 从零实现

从零写代码实现整体效果，以演示标签的属性以及信号槽的用法

3.1 布局

在UI设计师界面，拖拽对应的控件，修改显示的文字、控件的名称，然后完成布局

• 合理地使用了水平、垂直、栅格布局
• 合理地使用弹簧
• 合理地调整Layout的各种参数，来设置外边距、内边距
• 合理地调整字体大小
• 在设计阶段，设置标签的背景色

即可完成以下效果，多操作自然就熟练了(完成后的代码，会一并共享给大家的~)

3.2 添加资源文件

把用到的静态和动态图片，作为资源文件添加到项目中，如下：

3.3 代码实现

3.3.1 字体设置

首先，在mywidget.h中，声明相应的槽函数，如下：

#include <QButtonGroup>
#include <QTimer>

class MyWidget : public QWidget {

private slots:
    // 字体设置
    void onBtnGroupAlignmentClicked(int id);
    void onChkFontClicked(bool checked);

    void onTimeout();

private:
    QButtonGroup* btnGroupAlignment;
    QTimer* timer;
};

然后，在mywidget.cpp的构造中，关联槽函数，如下：

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

    this->setWindowTitle("明王讲QT | 第二章 常用控件 | 2.3 标签QLabel");

    // 1. 对齐和字体设置
    // 对齐
    ui->lblFont->setText("2024-12-12 12:10:00");

    btnGroupAlignment = new QButtonGroup(this);
    btnGroupAlignment->addButton(ui->radioAlignLeft, 0);
    btnGroupAlignment->addButton(ui->radioAlignCenter, 1);
    btnGroupAlignment->addButton(ui->radioAlignRight, 2);

    connect(btnGroupAlignment, &QButtonGroup::idClicked, this, &MyWidget::onBtnGroupAlignmentClicked);
    ui->radioAlignCenter->click();

    // 字体
    connect(ui->chkBold, &QCheckBox::clicked, this, &MyWidget::onChkFontClicked);
    connect(ui->chkItalic, &QCheckBox::clicked, this, &MyWidget::onChkFontClicked);
    connect(ui->chkUnderline, &QCheckBox::clicked, this, &MyWidget::onChkFontClicked);

    // 定时器
    timer = new QTimer(this);
    connect(timer, &QTimer::timeout, this, &MyWidget::onTimeout);
    timer->start(500);
}

最后，实现这两个槽函数，如下：

#include <QDateTime>

void MyWidget::onBtnGroupAlignmentClicked(int id) {
    if ( id == 0 ) {
        ui->lblFont->setAlignment(Qt::AlignLeft);
    } else if ( id == 1 ) {
        ui->lblFont->setAlignment(Qt::AlignCenter);
    } else if ( id == 2 ) {
        ui->lblFont->setAlignment(Qt::AlignRight);
    }
}

void MyWidget::onChkFontClicked(bool checked) {
    QFont font = ui->lblFont->font();

    font.setBold(ui->chkBold->isChecked());
    font.setItalic(ui->chkItalic->isChecked());
    font.setUnderline(ui->chkUnderline->isChecked());

    ui->lblFont->setFont(font);
}

void MyWidget::onTimeout() {
    // 获取当前系统时间
    QDateTime currentTime = QDateTime::currentDateTime();

    // 将当前时间转换为字符串格式
    QString timeString = currentTime.toString("yyyy-MM-dd hh:mm:ss");

    // 显示
    ui->lblFont->setText(timeString);
}

3.3.2 文本换行

首先，在mywidget.h中，声明相应的槽函数，如下：

class MyWidget : public QWidget {

private slots:
    // 文本换行
    void on_btnDisableWrap_clicked();
    void on_btnEnableWrap_clicked();
}

然后，在mywidget.cpp的构造中，为标签设置文本，如下：

MyWidget::MyWidget(QWidget* parent) : QWidget(parent), ui(new Ui::MyWidget) {

    // 2. 文本换行
    ui->lblWordWrap->setWordWrap(true);
    ui->lblWordWrap->setText(
        "Qt is a powerful and versatile cross-platform application and UI framework that enables developers to create sophisticated and responsive graphical "
        "user interfaces (GUIs) for desktop, mobile, and embedded systems.");
}

最后，实现这两个槽函数，如下：

void MyWidget::on_btnDisableWrap_clicked() {
    ui->lblWordWrap->setWordWrap(false);
}

void MyWidget::on_btnEnableWrap_clicked() {
    ui->lblWordWrap->setWordWrap(true);
}

3.3.3 加载静态图片

在mywidget.cpp的构造中，加载静态图片，如下：

MyWidget::MyWidget(QWidget* parent) : QWidget(parent), ui(new Ui::MyWidget) {

    // 3. 静态图片
    ui->lblPic1->setScaledContents(true);
    ui->lblPic2->setScaledContents(true);
    ui->lblPic3->setScaledContents(true);
    ui->lblPic4->setScaledContents(true);

    QPixmap px1, px2, px3, px4;
    px1.load(":/res/apple.png");
    px2.load(":/res/orange.png");
    px3.load(":/res/watermelon.png");
    px4.load(":/res/strawberry.png");

    ui->lblPic1->setPixmap(px1);
    ui->lblPic2->setPixmap(px2);
    ui->lblPic3->setPixmap(px3);
    ui->lblPic4->setPixmap(px4);
}

3.3.4 加载Gif动画

动态图片下载网站：https://vsgif.com/

在mywidget.cpp的构造中，加载动态图片，如下：

#include <QMovie>

MyWidget::MyWidget(QWidget* parent) : QWidget(parent), ui(new Ui::MyWidget) {
    
    // 4. 动态图片
    ui->lblGif1->setScaledContents(true);
    ui->lblGif2->setScaledContents(true);
    ui->lblGif3->setScaledContents(true);
    ui->lblGif4->setScaledContents(true);

    QMovie* movie = new QMovie(":/res/gif1.gif");
    ui->lblGif1->setMovie(movie);
    movie->start();

    QMovie* movie2 = new QMovie(":/res/gif2.gif");
    ui->lblGif2->setMovie(movie2);
    movie2->start();

    QMovie* movie3 = new QMovie(":/res/gif3.gif");
    ui->lblGif3->setMovie(movie3);
    movie3->start();

    QMovie* movie4 = new QMovie(":/res/gif4.gif");
    ui->lblGif4->setMovie(movie4);
    movie4->start();
}

4. 点赞、获取源码

看到这里的小伙伴，去B站给明王一个【免费的点赞】吧，你的支持，是我持续更新优质内容的动力，感谢~

源码下载地址
链接: https://pan.baidu.com/s/1K5LvII_tVeDSkPzuqDMpIA
提取码: ming