1、介绍和功能分析

本次学习的内容次要是实现控件的折叠和开展，相似抽屉控件，目前 Qt 自带的控件 QToolBox 具备这个性能，然而一次只能开展一个，所以针对本人的需要能够本人写一个相似的性能，这里实现的办法比拟多，其实原理也比较简单，就是点一次暗藏，再点一次显示的成果。

2、实现办法

目前实现的办法有两种，原理基本相同，办法一是应用 QPushButton 联合 SetVisible() 函数来实现点击后暗藏和显示的成果。其 UI 布局如下：

办法一应用点击 QPushButton 按钮来实现暗藏和显示 QWidget 的成果，再在 QPushButton 前减少辅助图标就实现了开展和收起的实际效果，其成果如下图：

办法二中次要通过 ToolBox 进行调用，将传入的 QWidget 传入到 ToolPage 中，ToolPage 主动填充到内容区，再将 ToolPage 增加到垂直布局中，ToolPage 分为标题栏（QPushButton）和内容区（QWidget），点击 QPushButton 后, 循环展开 / 折叠内容区。办法二与办法一实现原理雷同，只是办法二对 ToolBox 进行了再次封装，而后通过 ToolBox 间接调用。其 UI 布局如下：

3、代码实现

首先从新写一个抽屉的类来创立控件相干性能：

LockerButton.h

#ifndef LOCKER_BUTTON_H
#define LOCKER_BUTTON_H

#include <QWidget>
#include <QPushButton>

class QLabel;

class LockerButton : public QPushButton
{
    Q_OBJECT
public:
    explicit LockerButton(QWidget* parent = nullptr);

    // 设置按钮图标
    void SetImageLabel(const QPixmap &pixmap);

    // 设置按钮文字
    void SetTextLabel(QString text);

    // 返回图像 label 句柄
    QLabel* GetImageHandle();

    // 返回文字 label 句柄
    QLabel* GetTextHandle();

private:
    // 按钮图标
    QLabel* m_imageLabel;
    // 按钮文字
    QLabel* m_textLabel;
};

#endif // LOCKER_BUTTON_H

LockerButton 类继承于 PushButton 类，次要进行控件的图标和文字设置。

LockerButton.cpp

#include "LockerButton.h"

#include <QLabel>
#include <QVBoxLayout>
#include <QLineEdit>
#include <QDoubleValidator>

LockerButton::LockerButton(QWidget* parent)
    : QPushButton(parent)
{
    m_imageLabel = new QLabel;
    m_imageLabel->setFixedWidth(20);
    m_imageLabel->setScaledContents(true);
    m_imageLabel->setStyleSheet("QLabel{background-color:transparent;}");

    m_textLabel = new QLabel;
    m_textLabel->setStyleSheet("QLabel{background-color:transparent;}");

    QHBoxLayout* mainLayout = new QHBoxLayout;
    mainLayout->addWidget(m_imageLabel);
    mainLayout->addWidget(m_textLabel);
    mainLayout->setMargin(0);
    mainLayout->setSpacing(0);
    this->setLayout(mainLayout);
}

void LockerButton::SetImageLabel(const QPixmap &pixmap)
{m_imageLabel->setPixmap(pixmap);
}

void LockerButton::SetTextLabel(QString text)
{m_textLabel->setText(text);
}

QLabel* LockerButton::GetImageHandle()
{return m_imageLabel;}

QLabel* LockerButton::GetTextHandle()
{return m_textLabel;}

接下来是调用，参考网上大部分是通过代码去创立控件，这里我应用的是 PushButton 控件在 ui 上实现，在 Form 上拉一个 PushButton 控件，而后晋升为 LockerButton，如下图：

再接下来就是 Widget 的实现了

widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

namespace Ui {class Widget;}

class Widget : public QWidget
{
    Q_OBJECT

public:
    explicit Widget(QWidget *parent = 0);
    ~Widget();

private slots:
    void on_ckbPic_clicked(bool checked);

    void on_ckbVideo_clicked(bool checked);

private:
    Ui::Widget *ui;

        void initUI();
        int m_PicList;
        int m_VideoList;
};

#endif // WIDGET_H

widget.cpp

#pragma execution_character_set("utf-8")
#include "widget.h"
#include "ui_widget.h"
#include <QDebug>

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{ui->setupUi(this);
    initUI();}

Widget::~Widget()
{delete ui;}

void Widget::initUI()
{this->resize(300, 600);
    m_PicList = 0;
    m_VideoList = 0;

    ui->btnPic->SetTextLabel("图像");
    ui->btnPic->SetImageLabel(QPixmap(":/image/Collapse.png"));
    ui->btnPic->setStyleSheet("#btnPic{background-color:transparent}"
                              "#btnPic:hover{background-color:rgba(195,195,195,0.4)}"
                              "#btnPic:pressed{background-color:rgba(127,127,127,0.4)}");
    ui->btnVideo->SetTextLabel("视频");
    ui->btnVideo->SetImageLabel(QPixmap(":/image/Collapse.png"));
    ui->btnVideo->setStyleSheet("#btnVideo{background-color:transparent}"
                                "#btnVideo:hover{background-color:rgba(195,195,195,0.4)}"
                                "#btnVideo:pressed{background-color:rgba(127,127,127,0.4)}");
    QLabel* PicLabel = ui->btnPic->GetTextHandle();
    PicLabel->setStyleSheet("QLabel{color:rgba(183,71,42,1)}");
    PicLabel->setFont(QFont("图像", 10, QFont::Black));
    QLabel* VideoLabel = ui->btnVideo->GetTextHandle();
    VideoLabel->setStyleSheet("QLabel{color:rgba(183,71,42,1)}");
    VideoLabel->setFont(QFont("视频", 10, QFont::Black));
    ui->widget_Pic->setVisible(false);
    ui->widget_Video->setVisible(false);
    ui->btnPic->setEnabled(false);
    ui->btnVideo->setEnabled(false);

    connect(ui->btnPic, &LockerButton::clicked, [this](bool) {if (m_PicList % 2)
        {ui->btnPic->SetImageLabel(QPixmap(":/image/Collapse.png"));
            //m_sizeList 偶数屏蔽 Size 列表界面，奇数显示 Size 列表界面
            ui->widget_Pic->setVisible(false);
        }
        else
        {ui->btnPic->SetImageLabel(QPixmap(":/image/Expand.png"));
            ui->widget_Pic->setVisible(true);
        }
        m_PicList++; });

    connect(ui->btnVideo, &LockerButton::clicked, [this](bool) {if (m_VideoList % 2)
        {ui->btnVideo->SetImageLabel(QPixmap(":/image/Collapse.png"));
            ui->widget_Video->setVisible(false);
        }
        else
        {ui->btnVideo->SetImageLabel(QPixmap(":/image/Expand.png"));
            ui->widget_Video->setVisible(true);
        }
        m_VideoList++; });
}

void Widget::on_ckbPic_clicked(bool checked)
{if(checked)
    {qDebug()<<"复选框被选中";
        ui->btnPic->setEnabled(true);
        m_PicList++;
        ui->widget_Pic->setVisible(true);
        ui->btnPic->SetImageLabel(QPixmap(":/image/Expand.png"));
    }
    else
    {qDebug()<<"复选框被勾销";
        ui->btnPic->setEnabled(false);
        m_PicList++;
                ui->widget_Pic->setVisible(false);
                ui->btnPic->SetImageLabel(QPixmap(":/image/Collapse.png"));
    }
}

void Widget::on_ckbVideo_clicked(bool checked)
{if(checked)
    {qDebug()<<"复选框被选中";
        ui->btnVideo->setEnabled(true);
        m_VideoList++;
        ui->widget_Video->setVisible(true);
        ui->btnVideo->SetImageLabel(QPixmap(":/image/Expand.png"));
    }
    else
    {qDebug()<<"复选框被勾销";
        ui->btnVideo->setEnabled(false);
        m_VideoList++;
        ui->widget_Video->setVisible(false);
        ui->btnVideo->SetImageLabel(QPixmap(":/image/Collapse.png"));
    }
}

这里只介绍 LockerButton 的实现，故其余的控件实现代码都没增加。这里应用第一种办法实现抽屉折叠性能，这里第二种办法根本的实现原理差不多，我这里贴出原博主的博客，能够去其博客学习具体实现办法。
Qt 实战 12. 可自在开展的 ToolBox

4、源码学习

最初附上源码学习，能够在仓库按需自取，仓库中代码仅供学习应用。
抽屉折叠开展性能实现源码