【Qt学习】Qlabel 的核心属性与代码实例

news2024/9/22 21:34:34

文章目录

1. 介绍
2. 显示文本
3. 显示图片
4. 设置文本对齐方式
5. 设置自动换行、边距、缩进
6. 设置伙伴

1. 介绍

在Qt学习的专题中，我们以及多次使用过QLabel，作用就是用于显示文本和图片；

QLabel有以下核心属性：

好的，以下是QLabel的核心属性以表格形式列举出来：

属性	描述
Text	`QLabel`显示的文本内容。可以使用`setText()`方法设置文本。
Pixmap	`QLabel`显示的图片。可以使用`setPixmap()`方法设置图片。
Alignment	文本或图片在`QLabel`中的对齐方式。可以使用`setAlignment()`方法设置对齐方式。
Word Wrap	是否启用文本自动换行功能。可以使用`setWordWrap()`方法设置是否自动换行。
Margin	`QLabel`的边距，即文本或图片与`QLabel`边框之间的距离。可以使用`setMargin()`方法设置边距。
Size Constraint	`QLabel`的尺寸约束。可以使用`setSizePolicy()`方法设置尺寸约束。
ToolTip	鼠标悬停在`QLabel`上时显示的提示信息。可以使用`setToolTip()`方法设置提示信息。
Accessible Name	`QLabel`的无障碍名称，用于辅助技术。可以使用`setAccessibleName()`方法设置无障碍名称。

2. 显示文本

我们用简单的代码展示QLabel：
代码示例

我们在ui界面创建3个Label控件：

在这里插入图片描述

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
	ui->label_1->setTextFormat(Qt::PlainText);
	ui->label_1->setText("这是一段纯文本");
	
	ui->label_2->setTextFormat(Qt::RichText);
	ui->label_2->setText("<b> 这是一段富文本 </b>");
	
	ui->label_3->setTextFormat(Qt::MarkdownText);
	ui->label_3->setText("## 这是一段 markdown 文本");、
}

效果如下：

在这里插入图片描述

3. 显示图片

此前我们使用过QPushButton设置图片，实际上并非最优解，QLabel设置图片的效果实际更上一层：

同理我们在ui界面添加一个Label控件，并添加资源文件，将图片导入到资源文件中：

在这里插入图片描述
代码示例

此时着手编写代码：

首先进行：加载图片+将图片设置到QLabel对象+将label铺满屏幕：

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

    // 将QLabel 铺满窗口（等大）
    QRect windowRect = this->geometry(); // 提取窗口geometry属性
    ui->label->setGeometry(0, 0, windowRect.width(), windowRect.height());
    // 加载图片
    QPixmap pixmap(":/Embarrass_smile.png");
    ui->label->setPixmap(pixmap);
    // 启动自动拉伸
    ui->label->setScaledContents(true);
}

随后在widget.h文件中声明resizeEvent函数（用于使图片跟随窗口变化而变化）

void resizeEvent(QResizeEvent *event);

后在widget.cpp文件中实现该函数：

// 当调整窗口大小时，Label跟随调整
void Widget::resizeEvent(QResizeEvent *event)
{
    qDebug() << event->size();
    ui->label->setGeometry(0, 0, event->size().width(), event->size().height());
}

效果展示：

请添加图片描述

4. 设置文本对齐方式

对于一个QLabel控件，我们可以直接在属性面板中在alignment进行文本对齐方式的设置：

在这里插入图片描述
也可以通过代码的方式进行设置：

// 水平居中 垂直居中
ui->label->setAlignment(Qt::AlignHCenter | Qt::AlignVCenter);

5. 设置自动换行、边距、缩进

我们首先创建四个Label控件，并将其QFrame中的frameshape属性该位Box：

在这里插入图片描述
随后根据前面介绍提到的属性，进行换行、边距、缩进的设置：

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

    // QLabel设置 对齐方式
    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->setIndent(50);

    // 设置缩进
    ui->label_4->setText("一段长的测试文本：正确的，直接的，中肯的，雅致的，客观的，完整的，立体的，全面的，合理的，辩证的，形而上学的，雅俗共赏的，一针见血的，直击要害的，批判性的，针对性的，创造性的，发散性的，具有独特意义的，客观的，合理的，明晰的，真实的，辩证的，深刻的，通达的，优美的，巧妙的，精辟的，雅正的，机智的，全面的，明白晓畅的，不偏不倚的，恰如其分的，滴水不漏的，不容质疑的，切中要害的，淋漓尽致的，深谙事理的，真知灼见的，发蒙振聩的，微言大义的，金声玉振的。");
    ui->label_4->setMargin(50);
}