QT之控件叠加显示

最新推荐文章于 2025-03-20 14:34:47 发布

yunke120

最新推荐文章于 2025-03-20 14:34:47 发布

阅读量2.4w

点赞数 22

分类专栏： QT 文章标签： QT

本文链接：https://blog.csdn.net/qq_39295354/article/details/104010241

版权

QT 专栏收录该内容

21 篇文章

订阅专栏

2021/5/26更新

新建一个窗体应用，添加一个Label,栅格布局。
在构造函数中添加以下代码段。

    QLabel *top = new QLabel;
    top->setStyleSheet("background-color:rgb(255,0,0);max-height: 30px;");
    top->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);


    QLabel *bottom = new QLabel;
    bottom->setStyleSheet("background-color:rgb(0,0,255);max-height: 30px;");
    bottom->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);

    QLabel *center_label = new QLabel;
    center_label->setText("HHFSIFHIFHFHH\nHDHSHDUHFUF\nHFDHUFHUFH\nJFJFIJDFIF\n");
    center_label->setAlignment(Qt::AlignCenter | Qt::AlignHCenter);
    center_label->setStyleSheet("background-color:rgb(0,255,0);");
    center_label->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);



    QLabel *left_Label = new QLabel;
    left_Label->setStyleSheet("background-color:rgb(255,255,0);max-width:30;");
    left_Label->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);

    QLabel *right_Label = new QLabel;
    right_Label->setStyleSheet("background-color:rgb(0,255,255);max-width:30;");
    right_Label->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);

    QVBoxLayout *v_Layout = new QVBoxLayout;
    v_Layout->addStretch();
    v_Layout->setMargin(0);
    v_Layout->addWidget(top,1);
    v_Layout->addWidget(center_label,5);
    v_Layout->addWidget(bottom,1);

    QHBoxLayout *h_Layout = new QHBoxLayout;
    h_Layout->setMargin(0);
    h_Layout->addStretch();
    h_Layout->addWidget(left_Label,1);
    h_Layout->addLayout(v_Layout,5);
    h_Layout->addWidget(right_Label,1);

    QGridLayout *g_Layout = new QGridLayout(ui->label);
    g_Layout->setMargin(0);
    g_Layout->addLayout(h_Layout,0,0);

3. 效果如下：

以下是原回答：

在项目中经常碰到这种情况，比如UI上的同一个区域既要显示图片又要显示文字时，但是一个label只能显示其中一个，这个时候就需要两个label叠加显示了，比如下面一个显示图片，上面一个显示文字。本文以label叠加显示为例，详细介绍一下控件叠加的方法：

1. 新建一个带ui的工程，在ui上拖上一个QFrame控件，再往QFrame控件中拖放一个QLabel控件，右键设置QFrame控件的布局为水平布局，如图所示：

接着修改布局的属性，如图所示:

点击保存，回到工程所在文件路径，右键记事本打开mainwindow.ui文件

找到QFrame,将其手动修改为QLabel

修改前:

修改后:

点击保存，打开Qt，会提示你文件已改变，直接 Yes and All 即可，改变后的ui如下，重点看圈住的部分，可以看到已经有了两个Label并且时叠加显示的，修改一下stylesheet让其显示的更直观

修改后：

这样就可以了，其他控件方法类似

2020.01.17更新

设置顶层Label透明

    ui->frame->setText("error type:red error");
    ui->frame->setAlignment(Qt::AlignBottom|Qt::AlignHCenter);
    ui->label->setText("1");
    ui->label->setAlignment(Qt::AlignCenter|Qt::AlignHCenter);
    ui->label->setStyleSheet("QLabel{font-size:90px;}");
    ui->label->setAttribute(Qt::WA_TranslucentBackground);
    //ui->label->setStyleSheet("background:transparent"); /* 设置顶层label透明，两个效果都可以 */