【Qt开发】显示类控件（一）-＞ QLabel

目录

[1 -> 概述](#1 -> 概述)

[1.1 -> 核心使命](#1.1 -> 核心使命)

[1.2 -> 多种能力](#1.2 -> 多种能力)

[1.3 -> 外观与布局](#1.3 -> 外观与布局)

[2 -> 核心属性](#2 -> 核心属性)

[3 -> 代码示例](#3 -> 代码示例)

[3.1 -> 显示不同格式的文本](#3.1 -> 显示不同格式的文本)

[3.2 -> 显示图片](#3.2 -> 显示图片)

[3.3 -> 文本对齐，自动换行，缩进，边距](#3.3 -> 文本对齐，自动换行，缩进，边距)

[3.4 -> 设置伙伴](#3.4 -> 设置伙伴)

[4 -> 总结](#4 -> 总结)

---

1 -> 概述

在 Qt 强大的图形界面控件家族中，如果说 QPushButton 是勤劳的实干家，QLineEdit 是信息的收集员，那么 QLabel 无疑就是一位低调而至关重要的信息使者 。它是构建用户界面的基石，是连接程序与用户视觉感知的最直接桥梁。尽管其外表简单，但 QLabel的内在却蕴含着不容小觑的灵活性与力量。

1.1 -> 核心使命

QLabel 最基本、最核心的职责是显示不可编辑的文本或图像。这里的"静态"并非指内容不可变，而是指用户无法像在输入框里那样直接对其进行编辑。它是应用程序向用户展示信息的单向窗口，例如：

• 窗口标题：说明当前视图或功能的名称。

• 状态说明：显示诸如"操作成功"、"加载中..."等提示信息。

• 项目描述：为其他复杂的输入控件（如组合框、滑块）提供文字说明，引导用户操作。

• 结果展示：输出计算的结果、读取的数据等。

正是通过这些简洁明了的文本，QLabel 为用户提供了理解界面功能和程序状态的上下文，是保证软件易用性的关键元素。

1.2 -> 多种能力

1. 图像的天然容器：QLabel 可以轻松地显示图片，支持主流的图像格式。从一个小小的图标到一个复杂的示意图，它都能完美承载。开发者可以控制图像的缩放方式，使其适应标签的大小，保持原始比例，或仅仅是居中展示。

2. 富文本的舞台 ：除了纯文本，QLabel 还支持 HTML 子集的富文本渲染。这意味着你可以通过简单的 HTML 标签，在标签中实现多彩的文字 、不同的字体和大小 、粗体/斜体 ，甚至超链接。这使得它能够呈现更加丰富和具有层次感的视觉信息，而无需动用更复杂的文本编辑器控件。

3. 动画与交互的载体 ：通过将其内容设置为一个动态的 GIF 图片，QLabel 瞬间化身为一个动画播放器，常用于展示加载动画或状态指示动画。此外，虽然它本身不可编辑，但它可以发射信号，例如当用户点击其中的超链接或将鼠标悬停在其上时，为界面增添了一丝交互性。

1.3 -> 外观与布局

• 对齐方式：开发者可以精确控制内容（文本或图片）在 QLabel 区域内的对齐方式，包括水平方向上的左对齐、居中、右对齐，以及垂直方向上的顶端对齐、居中、底端对齐。这确保了界面元素在任何大小下都能保持整洁和美观。

• 文本换行：对于长文本，QLabel 提供了自动换行功能，确保所有信息都能完整地呈现给用户，避免被截断。

• 伙伴关系：QLabel 有一个经典特性------"伙伴"功能。通过为此标签设置一个"伙伴"控件（如 QLineEdit），当用户按下标签中指定的快捷键时，输入焦点便会自动转移到伙伴控件上。这极大地提升了键盘操作的可访问性和效率，是专业桌面应用的标准实践。

2 -> 核心属性

|-----------------------|-------------------------------------------------------------------------------------------------------------------------------------------|
| 属性 | 说明 |
| text | QLabel 中的文本 |
| textFormat | 文本的格式 * 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 就会被选中 |

3 -> 代码示例

3.1 -> 显示不同格式的文本

1. 在界面上创建3个 QLabel

2. 修改 widget.cpp，设置3个 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::PlainText);
    ui->label->setText("这是一段纯文本");

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

    ui->label_3->setTextFormat(Qt::MarkdownText);
    ui->label_3->setText("# 这是Markdown格式");
}

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

3. 运行程序，观察效果

3.2 -> 显示图片

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

1. 在界面上创建一个 QLabel，objectName 为 label

2. 创建 resource.qrc 文件，并把图片导入到 qrc 中

3. 修改 widget.cpp，给 QLabel 设置图片，并设置将窗口填满

观察效果，此时，如果拖动窗口大小，可以看到图片并不会随着窗口大小的改变而同步变化。

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

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

#include <QDebug>
#include <QResizeEvent>

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

    // 先把 QLabel 设置成和窗口一样大, 并且把这个 QLabel 左上角设置到窗口的左上角这里
    // 让整个 QLabel 铺满整个窗口
    QRect windowrect = this->geometry();
    ui->label->setGeometry(0, 0, windowrect.width(), windowrect.height());

    QPixmap pixmap(":/suo.jpg");
    ui->label->setPixmap(pixmap);
    // 启动自动拉伸. 此时图片就能够填充满整个窗口了
    ui->label->setScaledContents(true);
}

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

// 此处的形参 event 是非常有用的, 这里就包含了触发这个 resize 事件这一时刻, 窗口的尺寸的数值
void Widget::resizeEvent(QResizeEvent *event)
{
    qDebug() << event->size();
    ui->label->setGeometry(0, 0, event->size().width(), event->size().height());
}

执行程序，此时改变窗口大小，图片也会随之变化。

与此同时，在控制台里也能够看到尺寸变化的过程。

注意：

此处的 resizeEvent 函数没有手动调用，但是能在窗口大小变化时被自动调用。

这个过程就是依赖 C++ 中的多态来实现。Qt 框架内部管理着 QWidget 对象表示窗口。在窗口大小发生改变时，Qt 就会自动调用 resizeEvent 函数。

但是由于这个表示窗口的并非是 QWidget，而是 QWidget 的子类，也就是自己写的 Widget。此时虽然是通过父类调用函数，但是实际上执行的是子类的函数（也就是重写后的 resizeEvent）。

此处属于多态机制的一种经典用法。通过上述过程，就可以把自定义的代码，插入到框架内部执行。相当于 "注册回调函数"。

3.3 -> 文本对齐，自动换行，缩进，边距

1. 创建4个 QLabel，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->setText("这是一段文本");
    ui->label->setAlignment(Qt::AlignHCenter | Qt::AlignVCenter);

    // 设置自动换行
    ui->label_2->setText("这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本");
    ui->label_2->setWordWrap(true);

    // 设置缩进
    ui->label_3->setText("这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本");
    ui->label_3->setWordWrap(true);
    ui->label_3->setIndent(30);

    // 设置边距
    ui->label_4->setText("这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本这是一段超长的文本");
    ui->label_4->setWordWrap(true);
    ui->label_4->setMargin(55);

}

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

3. 运行程序，可以看到如下效果

• 第一个 label 垂直水平居中
• 第二个 label 设置了 wordWrap，能够自动换行
• 第三个 label 设置了 Indent，左侧和上方的边框有间距
• 第四个 label 设置了 margin，四个方向均有间距

3.4 -> 设置伙伴

1. 创建两个 label 和两个 radioButton

objectName 为默认

此处把 label 中的文本设置为 "快捷键 &A" 的形式。

其中 & 后面跟着的字符，就是快捷键。

可以通过 alt + A 的方式来触发该快捷键。

这里的快捷键和 QPushButton 的不同。需要搭配 alt 和单个字母的方式才能触发。

2. 编写 widget.cpp，设置 buddy 属性

当然也可以使用 Qt Designer 直接设置

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

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

    // 设置 label 和 radioButton 伙伴关系
    ui->label->setBuddy(ui->radioButton);
    ui->label_2->setBuddy(ui->radioButton_2);
}

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

3. 运行程序，可以看到，按下快捷键 alt + A 或者 alt + B，即可选中对应的选项

4 -> 总结

总而言之，QLabel 远不止是一个简单的标签。它是一个文本渲染器 、一个图像查看器 、一个富文本编辑器 ，甚至是一个动画窗口。它是 Qt 控件工具箱中最基础、最常用，也最被低估的组件之一。理解并善用 QLabel 的多功能特性，是打造出美观、信息丰富且用户友好的 Qt 应用程序的第一步。

---

感谢各位大佬支持！！！

互三啦！！！