2021/5/26更新

  1. 新建一个窗体应用,添加一个Label,栅格布局。
  2. 在构造函数中添加以下代码段。
    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透明,两个效果都可以 */

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐