Roson讲Qt #2 QLabel

素颜马尾好姑娘i 2022-09-06 10:21 202阅读 0赞

**目录**

1.什么是QLable

2.使用QLabel

2.1设置文本

2.2获取文本

2.3设置字体

2.4 设置文字颜色

2.5 设置背景颜色

2.6 设置背景图片

方法1

方法2

方法3

2.7设置自动换行

2.8设置文本对齐方式

--------------------

# 1.什么是QLable #

QLabel小部件提供文本或图像显示。

QLabel用于显示文本或图像。没有提供用户交互功能。可以以各种方式配置标签的可视化外观，并且可以使用它为另一个小部件指定焦点助记键。  
QLabel可以包含以下任何一种内容类型:

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:bottom;width:331pt;">Content</td> 
 <td style="vertical-align:bottom;width:323pt;">Setting</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">Plain text</td> 
 <td style="vertical-align:bottom;">给setText()传递一个QString。</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">Rich text</td> 
 <td style="vertical-align:bottom;">将包含富文本的QString传递给setText()。</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">A pixmap</td> 
 <td style="vertical-align:bottom;">将QPixmap传递给setPixmap()。</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">A movie</td> 
 <td style="vertical-align:bottom;">将QMovie传递给setMovie()。</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">A number</td> 
 <td style="vertical-align:bottom;">向setNum()传递一个int或double值，它将数字转换为纯文本。</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">Nothing</td> 
 <td style="vertical-align:bottom;">与空的纯文本相同。这是默认值。规定明确的()。</td> 
 </tr> 
 </tbody> 
</table>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70][]

# 2.使用QLabel #

## 2.1设置文本 ##

ui.label->setText("Hello World");

![20210820133718771.png][]

## 2.2获取文本 ##

qDebug()<<ui.label->text();

## 2.3设置字体 ##

ui.label->setFont(QFont("微软雅黑",20));

![20210820133806818.png][]

## 2.4 设置文字颜色 ##

ui.label->setStyleSheet("color:rgb(255,0,0)");

![20210820133935339.png][]

## 2.5 设置背景颜色 ##

ui.label->setStyleSheet("background-color:rgb(111,163,190)");

![20210820134054806.png][]

## 2.6 设置背景图片 ##

要显示的图片为：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 1][]

先把它添加到资源文件中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 2][]

### 方法1 ###

ui.label->setPixmap(QPixmap(":/QtWidgetsApplication8/star.jpeg"));

![20210820134208359.png][]

上面的写法，会导致图片无法全部显示出来，因为图片尺寸很大，label很小。需要用下面这种写法对图片进行缩放后再显示。

ui.label->setPixmap(QPixmap(":/QtWidgetsApplication8/star.jpeg").scaled(
    ui.label->size()));

![20210820134252812.png][]

###  方法2 ###

ui.label->setStyleSheet("color:white;background-image:url(:/QtWidgetsApplication8/star.jpeg)");

![20210820134909227.png][]

###  方法3 ###

ui.label->setStyleSheet("color:white;border-image:url(:/QtWidgetsApplication8/star.jpeg)");

![2021082013500794.png][]

## 2.7设置自动换行 ##

ui.label->setText("Hello World!When passing a QString to the constructor or calling setText(),");

![2021082013512420.png][]

可以看到上面文字显示不全，而且只能显示一行。如果需要自动换行，需要用下面的方法：

ui.label->setText("Hello World!When passing a QString to the constructor or calling setText(),");
    ui.label->setWordWrap(true);

![20210820135203909.png][]

## 2.8设置文本对齐方式 ##

ui.label->setAlignment(Qt::AlignCenter);

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 3][]

水平对齐方式

<table style="width:418pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:bottom;width:138pt;">Constant</td> 
 <td style="vertical-align:bottom;width:49pt;">Value</td> 
 <td style="vertical-align:bottom;width:231pt;">Description</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">Qt::AlignLeft</td> 
 <td style="vertical-align:bottom;">0x0001</td> 
 <td style="vertical-align:bottom;">Aligns with the left edge.</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">Qt::AlignRight</td> 
 <td style="vertical-align:bottom;">0x0002</td> 
 <td style="vertical-align:bottom;">Aligns with the right edge.</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">Qt::AlignHCenter</td> 
 <td style="vertical-align:bottom;">0x0004</td> 
 <td style="vertical-align:bottom;">Centers horizontally in the available space.</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">Qt::AlignJustify</td> 
 <td style="vertical-align:bottom;">0x0008</td> 
 <td style="vertical-align:bottom;">Justifies the text in the available space.</td> 
 </tr> 
 </tbody> 
</table>

垂直对齐方式

<table style="width:418pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:bottom;width:138pt;">Constant</td> 
 <td style="vertical-align:bottom;width:49pt;">Value</td> 
 <td style="vertical-align:bottom;width:231pt;">Description</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">Qt::AlignTop</td> 
 <td style="vertical-align:bottom;">0x0020</td> 
 <td style="vertical-align:bottom;">Aligns with the top.</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">Qt::AlignBottom</td> 
 <td style="vertical-align:bottom;">0x0040</td> 
 <td style="vertical-align:bottom;">Aligns with the bottom.</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">Qt::AlignVCenter</td> 
 <td style="vertical-align:bottom;">0x0080</td> 
 <td style="vertical-align:bottom;">Centers vertically in the available space.</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:bottom;">Qt::AlignBaseline</td> 
 <td style="vertical-align:bottom;">0x0100</td> 
 <td style="vertical-align:bottom;">Aligns with the baseline.</td> 
 </tr> 
 </tbody> 
</table>

Qt::AlignCenter是“AlignVCenter | AlignHCenter”得到的值。表示水平方向和垂直方向都要居中。

垂直对齐方式和水平对齐方式可以用或运算符号来关联使用，达到同时控制两个方向对齐方式的目的。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70]: /images/20220829/099dc38ff8744724a3756c128243bd77.png
[20210820133718771.png]: /images/20220829/b724e718bf1345aea26f2c4387966136.png
[20210820133806818.png]: /images/20220829/e3478b004d9443a1ba84a8224cb4bdc3.png
[20210820133935339.png]: /images/20220829/cf5b2101fd494836bb11c97f665a14b9.png
[20210820134054806.png]: /images/20220829/27f9b56da6494b23af1bfab7df541517.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 1]: /images/20220829/cd8ab9298cb340c08b9b5bacb4e36ba2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 2]: /images/20220829/752049e67fe54dbf9f158c70256c2afd.png
[20210820134208359.png]: /images/20220829/e90ad7722e3449788634d72b3eb60bfd.png
[20210820134252812.png]: /images/20220829/410d98d4d3a34720b4cb56a0f6c038b4.png
[20210820134909227.png]: /images/20220829/ae5d31dcd800401390e8ca200f6ef6d0.png
[2021082013500794.png]: /images/20220829/2c2b3dce7e30457fa017449d595614a4.png
[2021082013512420.png]: /images/20220829/1dd9c23276ad452fad29f546e7ed48c7.png
[20210820135203909.png]: /images/20220829/3356fa018c304742a2eb33a0ebb47204.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 3]: /images/20220829/142c32af99d243d59782306c339ca045.png