QLabel可以说是Qt中最常见的控件之一,主要用来显示文本文字、显示图片、显示gif动图、显示富文本信息。本文将从以下几个方面对QLabel进行介绍:

[1]显示及获取文本文字

[2]显示图片

[3]显示动图

[4]显示富文本信息

[5]常用属性设置

[6]信号事件

至于样式表(Qt Style Sheet)设置本文暂时不讲,后面会有专门一节对常用控件的样式表设置进行说明。

 

创建项目

现在开始在Qt Creator中创建项目QLabelTest,并在项目中讲解QLabel:

新建文件或项目----Application----Qt Widgets Application----[设置项目名称QLabelTest并设置创建路径]----基类选择QWidget----[完成]

创建完成后工程树结构如下:

ios label添加富文本点击事件_资源文件

在UI设计器中拖放一个QLabel到设计窗口:


ios label添加富文本点击事件_界面设计_02

接下来将结合此项目针对QLabel进行讲解。

 

显示及获取文本

QLabel在设计器中直接设置文本内容

QLabel可以直接在设计器中设置要显示的文本内容,如果你想用QLabel显示固定不变的内容,则只用此方法即可。

设置方法:

1.在设计器中选中QLabel

2.在右侧属性设置栏中找到text,直接设置想要设置的内容。

设置QLabel显示内容为"QLabelTest":

ios label添加富文本点击事件_资源文件_03


运行效果:

ios label添加富文本点击事件_Qt_04

QLabel在代码中动态设置文本内容

接口函数:

setText(const QString &) //设置显示内容

 

接下来我们回到widget.cpp代码中,在构造函数中添加以下代码:

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

运行效果:

ios label添加富文本点击事件_超链接_05

QLabel获取当前文本内容

在widget.cpp中添加头文件QDebug,以用qDebug进行调试

在构造函数中添加以下调试代码:

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

在.pro文件中添加以下代码打开控制台:

CONFIG += console

运行效果:

ios label添加富文本点击事件_资源文件_06

显示图片

要想用QLable显示图片,需要将图片添加到项目的资源文件中,或直接根据图片相对或绝对路径名去拿到图片。在实际的项目中,如果你不希望资源文件被别人随意替换,并且你想要避免误操作导致资源文件缺失的问题的话,推荐直接将图片添加到项目资源文件中。本篇文章也用添加到资源文件的方式进行讲解。

显示图片分以下几步:

[1]新建资源文件(如果没有的话)

[2]将图片添加进资源文件

[3]调用setPixmap(const QPixmap &)接口函数显示(也可设置样式表直接显示,到后面专门讲)

新建资源文件:

文件----新建文件或项目----Qt----Qt Resource File----choose----设置名称(以名称为rcfile为例)----下一步----完成

ios label添加富文本点击事件_ios label添加富文本点击事件_07

ios label添加富文本点击事件_界面设计_08

 

创建完成后工程目录多了一个"rcfile.qrc"文件

将图片添加进资源文件

右键rcfile.qrc----Open in Editor 打开如下界面:

ios label添加富文本点击事件_界面设计_09

 

点击添加---添加前缀

直接使用默认的前缀就好:

ios label添加富文本点击事件_资源文件_10

再次点击添加---添加文件---选择目标图片文件---完成

添加完成后可以右键资源文件,复制资源文件路径。

调用接口函数显示图片

为了和前面的区分开,我们再拖放一个QLabel到设计器窗口中,并重命名为pixLabel

ios label添加富文本点击事件_ios label添加富文本点击事件_11

 

接下来在widget.cpp的构造函数中添加以下代码:

//方式1:直接用路径名的方式,基准路径为当前项目的debug/release根路径
// QPixmap image("cat.png");

//方式2:使用添加进来的资源文件初始化pixmap(":/new/prefix1/Resource/cat.png"是直接复制得到的)
QPixmap pix = QPixmap(":/new/prefix1/Resource/cat.png");

//显示图片
ui->pixLabel->setPixmap(pix.scaled(ui->pixLabel->width(),ui->pixLabel->height(),Qt::KeepAspectRatio));

 

其中pix.scaled(ui->pixLabel->width(),ui->pixLabel->height(),Qt::KeepAspectRatio)的意思是按照pixLabel的大小等比例缩放图片的意思。

运行效果(可适当在设计器中调整QLabel的大小以获得比较好的显示效果):

ios label添加富文本点击事件_ios label添加富文本点击事件_12

 

显示动图

显示动图分以下几步:

[1]将动图添加进资源文件

[2]调用setMovie(QMovie *movie)接口显示gif图片

第一步将图片添加进资源文件的步骤这里不再重复讲述,添加完后的效果如下:

ios label添加富文本点击事件_界面设计_13

 

在UI设计器中新创建一个QLabel,并重命名为gifLabel,在widget.cpp的构造函数中添加以下代码(需要QMovie头文件):

//新建QMovie对象并用资源文件初始化
QMovie *mov = new QMovie(":/new/prefix1/Resource/timg.gif");
//播放动画
mov->start();
//setMoive
ui->gifLabel->setMovie(mov);

这样就达到了显示gif动图的效果

显示富文本信息

本文针对富文本的显示主要通过界面设计器进行介绍,然后再分析qt自动生成的代码。

1.在界面设计器中新添加一个QLabel,并重命名为“richLabel”,适当改变其大小

2.右键改Label,选择"改变多信息文本"

ios label添加富文本点击事件_资源文件_14

将会打开如下界面:

ios label添加富文本点击事件_ios label添加富文本点击事件_15

在这里我们可以添加好看的字体,设置不同的字体颜色,添加超链接、图片等。

ios label添加富文本点击事件_Qt_16

运行效果:

ios label添加富文本点击事件_ios label添加富文本点击事件_17

3.源码分析:

自动生成的源码在Debug目录下的"ui_widget.h"文件内,用文本编辑器打开找到了如下代码:

richLabel->setText(QApplication::translate("Widget", "<html><head/><body><p><span style=\" font-size:14pt; font-weight:600; font-style:italic;\">\345\244\232\344\277\241\346\201\257\346\265\213\350\257\225\346\226\207\346\234\254</span></p><p><span style=\" font-size:14pt; font-weight:600; font-style:italic; color:#c60a1d;\">\347\272\242\350\211\262\345\255\227\344\275\223</span></p><p><span style=\" font-size:14pt; font-weight:600; font-style:italic; color:#000000;\">\345\233\276\347\211\207:</span></p><p><img src=\":/new/prefix1/Resource/timg.gif\"/></p><p><a href=\"www.baidu.com\"><span style=\" text-decoration: underline; color:#0000ff;\">\350\277\231\346\230\257\350\266\205\351\223\276\346\216\245\357\274\214\346\214\207\345\220\221\347\231\276\345\272\246</span></a></p><p><br/></p></body></html>", nullptr));

可以看到QLabel显示富文本的实现方式是直接对html代码进行解析,html源码在多信息文本编辑器中也可以看到。

ios label添加富文本点击事件_超链接_18

在这里需要说明的是,要想让Qt按照html对QLabel的文本进行解析需要将"textFormat"属性设置为AutoText(默认)或RichText

ios label添加富文本点击事件_界面设计_19

 

常用属性设置

QLabel的常用属性设置主要针对文本格式对齐方式内容与边距的宽度超链接是否可用浏览器打开用户交互相关,下面对这些属性依次进行介绍。

设置文本格式:

setTextFormat(Qt::TextFormat) 设置文本格式:

Qt::PlainText 只显示纯文本格式(如果是HTML格式的内容,则会直接显示HTML源码)

Qt::RichText 显示富文本信息(HTML)

Qt::AutoText 自动模式,如果文本信息可能是富文本,将会以富文本的方式解析

针对此项,一般情况下默认(Qt::AutoText)就好。如果明确其内容格式,则可以进行相应设置。

设置内容对其方式:

setAlignment(Qt::Alignment)

Qt::AlignLeft 水平方向左对齐(默认)

Qt::AlignRight 水平方向右对齐

Qt::AlignHCenter 水平方向居中对其

Qt::AlignJustify 水平方向合理利用可用空间

Qt::AlignTop 垂直方向顶端对齐

Qt::AlignBottom 垂直方向底端对齐

Qt::AlignVCenter 垂直方向居中

Qt::AlignBaseline 与基线对齐

设置内容与边距的宽度

setMargin(int)

设置是否用外部浏览器打开超链接(当点击QLabel超链接时)

setOpenExternalLinks(bool open)

与用户输入交互相关设置

setTextInteractionFlags(Qt::TextInteractionFlags flags)

Qt::NoTextInteraction 与用户没有任何交互(与下面的项冲突)

Qt::TextSelectableByMouse 用鼠标可选

Qt::TextSelectableByKeyboard 用键盘可选

Qt::LinksAccessibleByMouse 超链接用鼠标可点击

Qt::LinksAccessibleByKeyboard 超链接用键盘可点击

Qt::TextEditable 文本可编辑

Qt::TextEditorInteraction 用鼠标、键盘可选、可编辑

Qt::TextBrowserInteraction 用鼠标可选、超链接可通过鼠标、键盘点击

 

以上的这些属性设置可以再界面设计器进行设置,也可以在代码中进行设置。由于比较简单,这里不进行演示。

 

信号

QLabel专有的信号事件只有以下两个(不讨论继承的信号),且都是针对于超链接的:

//鼠标点击超链接事件:
void linkActivated(const QString &link)
//鼠标放到超链接上事件
void linkHovered(const QString &link)

接下来以我们最后创建的richLabel为例进行说明

分别编写上面两个信号对应的槽函数:

槽函数声明:

//在widget.h中添加以下代码,进行槽函数声明
public slots:
    void LinkActivated(QString link);
    void LinkHovered(QString link);

具体方法实现:

//在widget.cpp函数中编写槽函数
void Widget::LinkActivated(QString link)
{
    qDebug() << "LinkActivated " << link;
}
void Widget::LinkHovered(QString link)
{
    qDebug() << "LinkHovered " << link;
}

信号与槽的绑定(在构造函数中):

其中参数1是信号的发送者,参数2是具体的信号(需要声明传参类型),参数3是信号的接受者,参数4是具体的槽函数(同样需要声明传参类型)。其中LinkHovered会在鼠标放到超链接和离开超链接时分别触发一次,这一点在实际的项目中需要注意。

connect(ui->richLabel,SIGNAL(linkActivated(QString)),this,SLOT(LinkActivated(QString)));
connect(ui->richLabel,SIGNAL(linkHovered(QString)),this,SLOT(LinkHovered(QString)));

运行结果:

ios label添加富文本点击事件_超链接_20

总结:

QLabel主要用来显示不变的文本、图片、动图等,基本上没有多少与用户的交互。这些在本文中都进行了详细的介绍,在实际的项目中常常还需要针对QLabel进行美化,如设置背景颜色、设置边框样式、透明度等这些内容属于Qt Style Sheet的相关知识。感兴趣的朋友可以在Qt帮助手册中查找设置方法,本人也会在后面专门开一节讲Qt样式表设置。