QT使用stackLayout实现层叠布局

QT使用stackLayout实现层叠布局

---

前言

为了实现层叠布局样式使用stackLayout分离背景和frontend显示，分层显示叠加布局。

---

一、实现代码如下所示

使用代码实现，布局无法实现只能使用代码实现此布局。

    QPixmap image(":/icons/Icons/Control_Bar/icon_Fire.png");
    QWidget *backgroundWidget = new QWidget;
    QLabel * severaltext = new QLabel;
    QLabel * icon = new QLabel;
    icon->setPixmap(image);
    icon->setFixedSize(42,42);
    QFont severalFont;
    severalFont.setFamily("Honeywell Cond");
    severalFont.setBold(true);
    severalFont.setPixelSize(14);
    severaltext->setText("SEVERAL ALARM");
    severaltext->setStyleSheet("color:rgb(255,255,255)");
    severaltext->setFont(severalFont);
    severaltext->setAlignment(Qt::AlignCenter);

    QHBoxLayout* iconLayout = new QHBoxLayout;
    iconLayout->addItem(new QSpacerItem(40, 20, QSizePolicy::Expanding, QSizePolicy::Minimum));
    iconLayout->addWidget(icon);
    iconLayout->addItem(new QSpacerItem(40, 20, QSizePolicy::Expanding, QSizePolicy::Minimum));

    backgroundWidget->setMinimumSize(QSize(0, 68));
    backgroundWidget->setMaximumSize(QSize(268, 68));
    backgroundWidget->setStyleSheet("background-color:rgba(64,64,64)");
    QVBoxLayout* backLayout = new QVBoxLayout(backgroundWidget);
    backLayout->addLayout(iconLayout);
    backLayout->addWidget(severaltext);
    backLayout->setAlignment(Qt::AlignCenter);
    backLayout->setContentsMargins(0, 0, 0, 0);

    QWidget *frontenddWidget = new QWidget;
    frontenddWidget->setMinimumSize(QSize(0, 68));
    frontenddWidget->setMaximumSize(QSize(268, 68));
    frontenddWidget->setStyleSheet("background-color:rgba(255,255,255,0)");

    QHBoxLayout* frotendLayout = new QHBoxLayout(frontenddWidget);
    m_severalUp   = new QPushButton(this);
    m_severalUp->setMinimumSize(QSize(0, 68));
    m_severalUp->setMaximumSize(QSize(140, 68));
    QIcon upIcon(":/icons/Icons/Control_Bar/Icon_SEVERAL ALARMS_UP.png");
    m_severalUp->setIcon(upIcon);
    m_severalUp->setStyleSheet("color:rgb(255,255,255); padding-right: 70px; border: none;");
    m_severalUp->setFocusPolicy(Qt::NoFocus);

    m_severalDown = new QPushButton(this);
    m_severalDown->setMinimumSize(QSize(0, 68));
    m_severalDown->setMaximumSize(QSize(150, 68));
    m_severalDown->setStyleSheet("color:rgb(255,255,255)");
    QIcon downIcon(":/icons/Icons/Control_Bar/Icon_SEVERAL ALARMS_DOWN.png");
    m_severalDown->setIcon(downIcon);
    m_severalDown->setStyleSheet("color:rgb(255,255,255); padding-left: 70px; border: none;");
    m_severalDown->setFocusPolicy(Qt::NoFocus);

    frotendLayout->addWidget(m_severalUp);
    frotendLayout->addWidget(m_severalDown);
    frotendLayout->setContentsMargins(0, 0, 0, 0);
    frotendLayout->setSpacing(8);
    frotendLayout->setAlignment(Qt::AlignCenter);

    QStackedLayout * stackLayout = new QStackedLayout;
    stackLayout->addWidget(backgroundWidget);
    stackLayout->addWidget(frontenddWidget);
    stackLayout->setStackingMode(QStackedLayout::StackAll);

    m_severalMainLayout= new QVBoxLayout;
    m_severalMainLayout->addLayout(stackLayout);
    setLayout(m_severalMainLayout);

可以将其代码加入新建的工程显示，运行可以显示处两个widget叠加的效果。

总结

此内容是一次应用背景叠加的实现记录，作为后续遇到需要实现此功能的方案可作为参考。