Qt——实现仿侧边栏

---

前言

基于VS2019、Qt5.15.5，纯代码实现Qt相关功能。

---

效果

IMG_1700

一、How

用到了 QStackedLayout 类。理解：类似于建房子，一层放家具，二层放家具，从上往下看房子。请细品…

创建项目

二、Code

1.freqEnergyTab.h

#pragma once

#include <QtWidgets/QWidget>
#include "ui_freqEnergyTab.h"
#include <QPushButton>
#include <QVBoxLayout>
#include <QLabel>
#include <QStackedLayout>
#include <QSplitter>
#include <QGroupBox>
//#include "qcustomplot.h"
//#include "showFreqBand.h"

class freqEnergyTab : public QWidget
{
    Q_OBJECT

public:
    freqEnergyTab(QWidget* parent = nullptr);
    ~freqEnergyTab();

    //初始化
    void initWidget();
    void initConnectFunc();

private:
    Ui::freqEnergyTabClass ui;


    //Part one
    QWidget* bottomWidget = nullptr;
    QWidget* built_inTopWidget = nullptr;
    QVBoxLayout* vLayout = nullptr;
    QGroupBox* groupBox1 = nullptr;
    QGroupBox* groupBox2 = nullptr;
    QGroupBox* groupBox3 = nullptr;
    QGridLayout* gridLayout = nullptr;
    //-----------------------------------
    //Part two
    QWidget* topWidget = nullptr;
    QLabel* label = nullptr;
    QPushButton* button = nullptr;
    QHBoxLayout* hLayout = nullptr;
    QWidget* built_inLeftWidget = nullptr;
    QGroupBox* groupBox4 = nullptr;
    QSplitter* lowerSplitterLayout = nullptr;
    QGridLayout* gridLayout_a = nullptr;
    QGridLayout* gridLayout_b = nullptr;
    //-----------------------------------
    QStackedLayout* sBoxLayout = nullptr;   //层叠布局
    QVBoxLayout* layoutMain = nullptr;      //总布局

		// 清理资源的函数
    void cleanup();

private slots:
    void pushButton_clicked();


};

2.freqEnergyTab.cpp

#include "freqEnergyTab.h"
#include <qdebug.h>


freqEnergyTab::freqEnergyTab(QWidget* parent)
    : QWidget(parent)
{
    ui.setupUi(this);

    initWidget();
    initConnectFunc();

}

freqEnergyTab::~freqEnergyTab()
{
    cleanup(); // 调用清理资源的函数
}
void freqEnergyTab::initWidget()
{
    
    //Part one
    bottomWidget = new QWidget(this);                   // 在this上创建 bottomWidget

    built_inTopWidget = new QWidget(bottomWidget);      //创建bottomWidget的上层空widget
    built_inTopWidget->setMinimumHeight(30);            //设置最小最大高度是为了不让它在垂直方向拉伸
    built_inTopWidget->setMaximumHeight(30);

    vLayout = new QVBoxLayout();                        //创建垂直布局，包含这四个新创建的对象
    vLayout->addWidget(built_inTopWidget);
    
    groupBox1 = new QGroupBox("groupBox1",bottomWidget);
    groupBox2 = new QGroupBox("groupBox2",bottomWidget);
    groupBox3 = new QGroupBox("groupBox3",bottomWidget);
    vLayout->addWidget(groupBox1);
    vLayout->addWidget(groupBox2);
    vLayout->addWidget(groupBox3);
    bottomWidget->setLayout(vLayout);
    //----------------------------------------------------------------------------------
    //Part two
    topWidget = new QWidget(this);                      // 在this上 创建顶层widget

    label = new QLabel("Date");                         // 创建topWidget的上层标签和按钮
    button = new QPushButton("<<");                     // 
    button->setFixedSize(100, 30);                      // 设置按钮的固定大小为宽100，高30

    hLayout = new QHBoxLayout();                        // 创建水平布局 包含这两个对象
    hLayout->addWidget(label);
    hLayout->addWidget(button);
    hLayout->setContentsMargins(0, 0, 0, 0);            // 设置布局的边距

    built_inLeftWidget = new QWidget(topWidget);        // 创建topWidget的下层空widget对象
    groupBox4 = new QGroupBox("groupBoxside",topWidget);//  创建topWidget的下层groupBox4对象
    groupBox4->hide();                                  // 初始化先隐藏
    groupBox4->setStyleSheet("background-color: lightBlue;");
    groupBox4->setMinimumWidth(300);
    groupBox4->setMaximumWidth(300);

    lowerSplitterLayout = new QSplitter();              //创建水平分隔器包含topWidget的下层的两个对象
    lowerSplitterLayout->addWidget(built_inLeftWidget);
    lowerSplitterLayout->addWidget(groupBox4);

    gridLayout_a = new QGridLayout();                   //创建网格布局将刚刚的两个布局添加进来
    gridLayout_a->addLayout(hLayout, 0, 0, 1, 1);
    gridLayout_a->addWidget(lowerSplitterLayout, 1, 0, 1, 1);

    
    topWidget->setLayout(gridLayout_a);
    //----------------------------------------------------------------------------------

    sBoxLayout = new QStackedLayout();  //层叠布局--包含bottomWidget topWidget
    sBoxLayout->setStackingMode(QStackedLayout::StackAll);
    sBoxLayout->addWidget(bottomWidget);                //按顺序添加，先添加谁，谁就在下层，应该有个函数可以设置
    sBoxLayout->addWidget(topWidget);
    sBoxLayout->setCurrentIndex(1);
    
    this->setLayout(sBoxLayout);
    //QGridLayout* layoutMain = new QGridLayout();       //总布局。问题：为什么不能用QGridLayout？
    //layoutMain->addLayout(sBoxLayout);                 //由于它们的布局方式不同，QGridLayout 不能直接包含 QStackedLayout，因为它们的布局方式不兼容。
    //this->setLayout(layoutMain);
}
void freqEnergyTab::initConnectFunc()
{
    connect(button, &QPushButton::clicked, this, &freqEnergyTab::pushButton_clicked); // 连接按钮的点击信号与槽函数
}
void freqEnergyTab::pushButton_clicked()
{
    if (groupBox4->isHidden())
    {
        groupBox4->show();
        button->setText(">>");
    }
    else
    {
        groupBox4->hide();
        button->setText("<<");
    }
}
void freqEnergyTab::cleanup()
{
    // 清理资源
   
}

3.main.cpp

#include "freqEnergyTab.h"
#include <QtWidgets/QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    freqEnergyTab w;
    w.show();
    return a.exec();
}

4.解决方案资源管理器

---

总结

Go on!