[QT基础系列]标签QLabel

标签QLabel

QLabel 是 Qt 中的标签类，通常用于显示提示性的文本，也可以显示图像

文本

可以获取和设置按钮上显示的文本

// 获取和设置显示的文本
QString text() const;
void setText(const QString &text);

对齐方式

用于设置标签中的内容在水平和垂直两个方向上的对齐方式，比如左对齐、右对齐、上对齐、下对齐、水平居中、垂直居中等。

// 获取和设置文本的对齐方式
Qt::Alignment alignment() const;
void setAlignment(Qt::Alignment);

其中，Qt::Alignment 是一个宏，常用取值如下：

Qt::AlignLeft（0x0001） 水平方向-左对齐
Qt::AlignRight（0x0002） 水平方向-右对齐
Qt::AlignHCenter（0x0004） 水平方向-居中对齐
Qt::AlignTop（0x0020）垂直方向-上对齐
Qt::AlignBottom（0x0040）垂直方向-下对齐
Qt::AlignVCenter（0x0080）垂直方向-居中对齐
Qt::AlignCenter（AlignVCenter | AlignHCenter） 垂直方向和水平方向-居中对齐

上面的每一个宏，都代表 16 进制中的一位，可以进行或（|）操作，来同时设置多个对齐方式。

该属性，既可以在 Qt 设计师右侧的属性窗口中修改，也可以在代码中动态地获取和修改

换行

使能换行时，那么标签在缩放时，如果文字可以显示在下一行，就会自动换行

// 获取和设置文本是否允许换行
// 换行时：在 word-breaks处，不会将一个完整的单词显示在两行
bool wordWrap() const; // 判断是否允许换行 
void setWordWrap(bool on); // 设置是否允许换行 

图像

可以获取和设置标签上显示的图像

// 获取和设置显示的图像
const QPixmap *pixmap() const; 
void setPixmap(const QPixmap &pixmap);

案例

该案例演示，如何设置和获取标签文本，文本对齐方式，文本换行，以及显示图片

为标签添加背景色

在标签右侧的属性窗口中，点击 styleSheet 属性右侧的 “…”，即可打开如下窗口，可以设置标签的各种样式：

为标签添加图片

首先添加资源文件，并添加两个图标文件

然后在标签右侧的属性窗口中，点击 pixmap 属性右侧的小三角，选择 “选择资源”，即可打开如下窗口，选择图片资源：

代码

void Widget::on_btnGetText_clicked()
{
    QMessageBox::information(this, "标签演示", ui->lbTime->text());
}

void Widget::on_btnSetText_clicked()
{
    ui->lbTime->setText(QTime::currentTime().toString());
}

void Widget::on_btnAlignLeft_clicked()
{
    ui->lbAlign->setAlignment(Qt::AlignLeft | Qt::AlignVCenter);
}

void Widget::on_btnAlignCenter_clicked()
{
    ui->lbAlign->setAlignment(Qt::AlignCenter);
}

void Widget::on_btnAlignRight_clicked()
{
    ui->lbAlign->setAlignment(Qt::AlignRight | Qt::AlignVCenter);
}

void Widget::on_btnDisableWrap_clicked()
{
    ui->lbWrap->setWordWrap(false);
}

void Widget::on_btnEnableWrap_clicked()
{
    ui->lbWrap->setWordWrap(true);
}

int index = 0;
void Widget::on_btnToggleImage_clicked()
{
    QPixmap px;

    // 将图标文件加载到 QPixmap
    if(index == 0) {
        px.load(QString(":/icon/strawberry.ico"));
        index++;
    } else {
        px.load(QString(":/icon/apple.ico"));
        index = 0;
    }

    // 把图片设置到标签上
    ui->lbImage->setPixmap(px);

    // 不要缩放，否则拉伸导致失真
    ui->lbImage->setScaledContents(false);

    // 图片在标签中居中显示（水平和垂直方向均居中）
    ui->lbImage->setAlignment(Qt::AlignCenter);
}