2. 使用QLabel显示文本和图片

任务目标

在Qt Widgets窗口中创建三个QLabel，分别用于显示纯文本、富文本（HTML格式）和本地图片，并演示水平与垂直对齐方式的设置方法。

环境依赖

需要Qt 5或Qt 6开发环境，以及C++编译器。图片显示功能依赖Qt GUI模块，无需额外第三方库。

关键完整代码

#include <QApplication>
#include <QWidget>
#include <QLabel>
#include <QVBoxLayout>
#include <QPixmap>

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    // 创建主窗口
    QWidget window;
    window.setWindowTitle("QLabel显示文本和图片");
    window.resize(400, 350);

    // 1. 纯文本标签
    QLabel *textLabel = new QLabel("Hello, Qt!");
    textLabel->setAlignment(Qt::AlignCenter);          // 水平+垂直居中

    // 2. 富文本标签（HTML格式）
    QLabel *richLabel = new QLabel();
    richLabel->setText("<h2 style='color:#2a6df4;'>富文本标题</h2>"
                       "<p>支持 <b>加粗</b>、<i>斜体</i> 和 <span style='color:red;'>彩色文字</span></p>");
    richLabel->setAlignment(Qt::AlignLeft | Qt::AlignVCenter);  // 水平靠左，垂直居中

    // 3. 图片标签（加载本地图片）
    QLabel *imageLabel = new QLabel();
    QPixmap pixmap(":/images/qt_logo.png");   // 使用资源文件路径
    if (pixmap.isNull()) {
        // 若资源加载失败，尝试相对路径（便于直接运行验证）
        pixmap.load("qt_logo.png");
    }
    imageLabel->setPixmap(pixmap);
    imageLabel->setAlignment(Qt::AlignRight | Qt::AlignBottom);  // 水平靠右，垂直靠下
    imageLabel->setScaledContents(false);      // 保持图片原始尺寸

    // 布局管理
    QVBoxLayout *layout = new QVBoxLayout(&window);
    layout->addWidget(textLabel);
    layout->addWidget(richLabel);
    layout->addWidget(imageLabel);

    window.show();
    return app.exec();
}

运行与验证

项目配置（.pro文件）：

QT += core gui
greaterThan(QT_MAJOR_VERSION, 4): QT += widgets
TARGET = qlabel_demo
TEMPLATE = app
SOURCES += main.cpp
RESOURCES += resources.qrc   # 若使用资源文件

图片准备：将任意一张PNG图片命名为qt_logo.png放在可执行文件同目录下（或通过Qt资源系统resources.qrc注册）。

编译运行：

qmake
make   # Windows下使用 mingw32-make 或 nmake
./qlabel_demo   # 运行

通过条件：

1. 窗口显示三行内容：第一行纯文本居中显示；第二行HTML富文本靠左显示，包含蓝色标题和红色文字；第三行图片靠右下角显示。
2. 调整窗口大小时，三个标签的相对位置随对齐方式变化（例如图片始终贴右下角）。
3. 若图片未显示，检查qt_logo.png路径是否正确，程序不会崩溃但标签区域为空白。

关键说明

• setAlignment()接受Qt::AlignmentFlag组合值，水平标志（AlignLeft/AlignHCenter/AlignRight）与垂直标志（AlignTop/AlignVCenter/AlignBottom）用|连接。
• 富文本通过setText()传入HTML子集实现，QLabel自动识别并渲染。
• 图片默认按原始尺寸显示，若需缩放可调用setScaledContents(true)。