Qt学习笔记:QLabel同时显示图片和文字

环境

系统:Windows10 64位 家庭中文版
Qt版本:5.6.0 msvc2013 64位
编译器:Visual Studio 2013 专业版

前言

QLabel是Qt自带的一个显示用控件,可以用来显示图片和文本。其使用也非常方便:用setPixmap(const QPixmap &)接口来设置要显示的图片,用setText(const QString &)接口来设置要显示的文本。然而在使用过程中,我发现QLabel的setPixmap(const QPixmap &)和setText(const QString &)是互斥的,即两个同时设置时,只有一个生效(最后设置的那个生效)。
示例代码及现象如下:

    m_pLblPixmap = new QLabel(this);
    m_pLblPixmap->resize(200, 200);
    m_pLblPixmap->move(0, 0);
    m_pLblPixmap->setAlignment(Qt::AlignCenter);
    m_pLblPixmap->setScaledContents(true);
    //我这边两个接口都调用,但是最后调用的setPixmap覆盖了setText
    m_pLblPixmap->setText("This is pixmap");
    m_pLblPixmap->setPixmap(QPixmap(":/image/bg.jpg"));

    m_pLblText = new QLabel(this);
    m_pLblText->resize(200, 200);
    m_pLblText->move(m_pLblPixmap->x() + m_pLblPixmap->width() + 2, 0);
    m_pLblText->setAlignment(Qt::AlignCenter);
    m_pLblText->setScaledContents(true);
    //我这边两个接口都调用,但是最后调用的setText覆盖了setPixmap
    m_pLblText->setPixmap(QPixmap(":/image/bg.jpg"));
    m_pLblText->setText("This is text");

Qt学习笔记:QLabel同时显示图片和文字_第1张图片

解决方法

用样式表设置背景图片,用setText(const QString &)设置文本,示例代码及现象如下:

    m_pLblStyleSheet = new QLabel(this);
    m_pLblStyleSheet->resize(200, 200);
    m_pLblStyleSheet->move(m_pLblText->x() + m_pLblText->width() + 2, 0);
    m_pLblStyleSheet->setScaledContents(true);
    m_pLblStyleSheet->setAlignment(Qt::AlignCenter);
    //这个不会适应图片,可能出现图片显示不全或者无法充满整个QLabel
//    m_pLblStyleSheet->setStyleSheet(QString("background-image:url(:/image/bg.jpg)"));
    //这个会自动适应图片,我这里还设置了文本的颜色
    m_pLblStyleSheet->setStyleSheet(QString("border-image:url(:/image/bg.jpg);color:rgb(128,128,128);"));
    m_pLblStyleSheet->setText("This is style sheet");

Qt学习笔记:QLabel同时显示图片和文字_第2张图片

你可能感兴趣的:(Qt)