Qt中有时需要对文本进行重叠处理，比如在电商网站上，当鼠标悬浮在商品图片上时，需要在图片上方显示该商品的名称和价格等信息。那么该如何实现文字重叠效果呢？

幻想之境的探索

于 2023-08-15 10:28:52 发布

阅读量451

点赞数 1

CC 4.0 BY-SA版权

文章标签： qt 命令模式开发语言

本文链接：https://blog.youkuaiyun.com/ByteWhizX/article/details/132293359

QT 专栏收录该内容

63 篇文章 ¥59.90 ¥99.00

订阅专栏

在Qt中，为实现如电商网站商品信息显示的文本重叠效果，可以通过创建 QLabel 并设置其样式为背景透明。利用setStyleSheet()设置QSS样式，调整文字颜色、背景透明度、边框等。在resizeEvent()中更新QLabel的位置和大小，以适应窗口变化。此方法可为基础，扩展更多复杂效果。

Qt中有时需要对文本进行重叠处理，比如在电商网站上，当鼠标悬浮在商品图片上时，需要在图片上方显示该商品的名称和价格等信息。那么该如何实现文字重叠效果呢？

首先，在Qt中创建一个新的窗口类（例如MainWidget），然后在这个类的构造函数里创建一个 QLabel 控件，用于承载要显示的文本。然后，设置 Label 的样式为背景透明，这样文字就可以显示在图片上方并且不会遮盖底部图片。

接下来，通过 setStyleSheet() 函数设置 QLabel 的样式，使其实现文字的重叠效果。这里可以使用 QSS 语法来实现，具体代码如下：

QString qss = "QLabel{"
              "color:white;"
              "background-color:rgba(0,0,0,0.6);"
              "border-radius:5px;"
              "padding:2px;"
              "}";
m_label->setStyleSheet(qss);

上面的代码中，我们将 QLabel 的文字颜色设置为白色，背景色设置为半透明黑色，并设置圆角边框以及内边距。

最后，在窗口的 resizeEvent() 函数中，根据窗口大小重新设置 QLabel 的位置和大小。具体代码如下：

void MainWidget::resizeEvent(QResizeEvent *event)
{
    Q_UNUSED(event);
    QRect rect = ui->label_pic->geometry();

了解本专栏