QLabel可以说是Qt中最常见的控件之一,主要用来显示文本文字、显示图片、显示gif动图、显示富文本信息。本文将从以下几个方面对QLabel进行介绍:
[1]显示及获取文本文字
[2]显示图片
[3]显示动图
[4]显示富文本信息
[5]常用属性设置
[6]信号事件
至于样式表(Qt Style Sheet)设置本文暂时不讲,后面会有专门一节对常用控件的样式表设置进行说明。
创建项目
现在开始在Qt Creator中创建项目QLabelTest,并在项目中讲解QLabel:
新建文件或项目----Application----Qt Widgets Application----[设置项目名称QLabelTest并设置创建路径]----基类选择QWidget----[完成]
创建完成后工程树结构如下:
在UI设计器中拖放一个QLabel到设计窗口:
接下来将结合此项目针对QLabel进行讲解。
显示及获取文本
QLabel在设计器中直接设置文本内容
QLabel可以直接在设计器中设置要显示的文本内容,如果你想用QLabel显示固定不变的内容,则只用此方法即可。
设置方法:
1.在设计器中选中QLabel
2.在右侧属性设置栏中找到text,直接设置想要设置的内容。
设置QLabel显示内容为"QLabelTest":
运行效果:
QLabel在代码中动态设置文本内容
接口函数:
setText(const QString &) //设置显示内容
接下来我们回到widget.cpp代码中,在构造函数中添加以下代码:
ui->label->setText("Hello World!");
运行效果:
QLabel获取当前文本内容
在widget.cpp中添加头文件QDebug,以用qDebug进行调试
在构造函数中添加以下调试代码:
qDebug() << ui->label->text();
在.pro文件中添加以下代码打开控制台:
CONFIG += console
运行效果:
显示图片
要想用QLable显示图片,需要将图片添加到项目的资源文件中,或直接根据图片相对或绝对路径名去拿到图片。在实际的项目中,如果你不希望资源文件被别人随意替换,并且你想要避免误操作导致资源文件缺失的问题的话,推荐直接将图片添加到项目资源文件中。本篇文章也用添加到资源文件的方式进行讲解。
显示图片分以下几步:
[1]新建资源文件(如果没有的话)
[2]将图片添加进资源文件
[3]调用setPixmap(const QPixmap &)接口函数显示(也可设置样式表直接显示,到后面专门讲)
新建资源文件:
文件----新建文件或项目----Qt----Qt Resource File----choose----设置名称(以名称为rcfile为例)----下一步----完成
创建完成后工程目录多了一个"rcfile.qrc"文件
将图片添加进资源文件
右键rcfile.qrc----Open in Editor 打开如下界面:
点击添加---添加前缀
直接使用默认的前缀就好:
再次点击添加---添加文件---选择目标图片文件---完成
添加完成后可以右键资源文件,复制资源文件路径。
调用接口函数显示图片
为了和前面的区分开,我们再拖放一个QLabel到设计器窗口中,并重命名为pixLabel
接下来在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的大小以获得比较好的显示效果):
显示动图
显示动图分以下几步:
[1]将动图添加进资源文件
[2]调用setMovie(QMovie *movie)接口显示gif图片
第一步将图片添加进资源文件的步骤这里不再重复讲述,添加完后的效果如下:
在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,选择"改变多信息文本"
将会打开如下界面:
在这里我们可以添加好看的字体,设置不同的字体颜色,添加超链接、图片等。
运行效果:
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源码在多信息文本编辑器中也可以看到。
在这里需要说明的是,要想让Qt按照html对QLabel的文本进行解析需要将"textFormat"属性设置为AutoText(默认)或RichText
常用属性设置
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)));
运行结果:
总结:
QLabel主要用来显示不变的文本、图片、动图等,基本上没有多少与用户的交互。这些在本文中都进行了详细的介绍,在实际的项目中常常还需要针对QLabel进行美化,如设置背景颜色、设置边框样式、透明度等这些内容属于Qt Style Sheet的相关知识。感兴趣的朋友可以在Qt帮助手册中查找设置方法,本人也会在后面专门开一节讲Qt样式表设置。