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_HLockerButton类继承于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_Hwidget.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、源码学习
最初附上源码学习，能够在仓库按需自取，仓库中代码仅供学习应用。
抽屉折叠开展性能实现源码
发表回复