Qt5基于QToolBox实现类似QQ抽屉效果

Qt5基于QToolBox实现类似QQ抽屉效果

QToolBox提供了一种列状的层叠窗口。QToolButton提供一种快速访问命令和选择项的按钮。通常在工具条中使用。抽屉效果是软件设计中的一种常见的形式。可以以一种动态直观的方式在大小有限的界面上扩展出更多的功能。在本Demo中定义了一个类，这个继承自QToolBox。设计Qt中主要的类有QToolButton QVBoxLayout。
具体的代码如下：
头文件代码：

#ifndef DRAWER_H
#define DRAWER_H

#include <QWidget>
#include <QToolBox>
#include <QToolButton>
class Drawer : public QToolBox
{
    Q_OBJECT
public:
    explicit Drawer(QWidget *parent = nullptr,Qt::WindowFlags f = 0);
private:
    QToolButton* toolBtn1_1;
    QToolButton* toolBtn1_2;
    QToolButton* toolBtn1_3;
    QToolButton* toolBtn1_4;
    QToolButton* toolBtn1_5;
    QToolButton* toolBtn2_1;
    QToolButton* toolBtn2_2;
    QToolButton* toolBtn3_1;
    QToolButton* toolBtn3_2;
};

#endif // DRAWER_H

源文件代码

#include "drawer.h"
#include <QGroupBox>
#include <QVBoxLayout>
Drawer::Drawer(QWidget *parent,Qt::WindowFlags f ) : QToolBox(parent,f)
{
    setWindowTitle(tr("我的QQ界面"));

    toolBtn1_1= new QToolButton(this);
    toolBtn1_1->setText(tr("张三"));
    toolBtn1_1->setIcon(QPixmap(":/new/prefix1/qq/1.bmp"));
    toolBtn1_1->setIconSize(QPixmap(":/new/prefix1/qq/1.bmp").size());
    toolBtn1_1->setAutoRaise(true);
    toolBtn1_1->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);

    toolBtn1_2= new QToolButton(this);
    toolBtn1_2->setText(tr("李四"));
    toolBtn1_2->setIcon(QPixmap(":/new/prefix1/qq/2.bmp"));
    toolBtn1_2->setIconSize(QPixmap(":/new/prefix1/qq/2.bmp").size());
    toolBtn1_2->setAutoRaise(true);
    toolBtn1_2->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);

    toolBtn1_3= new QToolButton(this);
    toolBtn1_3->setText(tr("小闫"));
    toolBtn1_3->setIcon(QPixmap(":/new/prefix1/qq/3.bmp"));
    toolBtn1_3->setIconSize(QPixmap(":/new/prefix1/qq/3.bmp").size());
    toolBtn1_3->setAutoRaise(true);
    toolBtn1_3->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);

    toolBtn1_4= new QToolButton(this);
    toolBtn1_4->setText(tr("王五"));
    toolBtn1_4->setIcon(QPixmap(":/new/prefix1/qq/4.bmp"));
    toolBtn1_4->setIconSize(QPixmap(":/new/prefix1/qq/4.bmp").size());
    toolBtn1_4->setAutoRaise(true);
    toolBtn1_4->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);

    toolBtn1_5= new QToolButton(this);
    toolBtn1_5->setText(tr("小孙"));
    toolBtn1_5->setIcon(QPixmap(":/new/prefix1/qq/5.bmp"));
    toolBtn1_5->setIconSize(QPixmap(":/new/prefix1/qq/5.bmp").size());
    toolBtn1_5->setAutoRaise(true);
    toolBtn1_5->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);

    QGroupBox* group1 = new QGroupBox;
    QVBoxLayout* layout1 = new QVBoxLayout(group1);
    layout1->setMargin(10);
    layout1->setAlignment(Qt::AlignHCenter);
    layout1->addWidget(toolBtn1_1);
    layout1->addWidget(toolBtn1_2);
    layout1->addWidget(toolBtn1_3);
    layout1->addWidget(toolBtn1_4);
    layout1->addWidget(toolBtn1_5);

    toolBtn2_1= new QToolButton(this);
    toolBtn2_1->setText(tr("小王"));
    toolBtn2_1->setIcon(QPixmap(":/new/prefix1/qq/6.bmp"));
    toolBtn2_1->setIconSize(QPixmap(":/new/prefix1/qq/6.bmp").size());
    toolBtn2_1->setAutoRaise(true);
    toolBtn2_1->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);

    toolBtn2_2= new QToolButton(this);
    toolBtn2_2->setText(tr("小郑"));
    toolBtn2_2->setIcon(QPixmap(":/new/prefix1/qq/7.bmp"));
    toolBtn2_2->setIconSize(QPixmap(":/new/prefix1/qq/7.bmp").size());
    toolBtn2_2->setAutoRaise(true);
    toolBtn2_2->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);

    QGroupBox* group2 = new QGroupBox;
    QVBoxLayout* layout2 = new QVBoxLayout(group2);
    layout2->addWidget(toolBtn2_1);
    layout2->addWidget(toolBtn2_2);

    toolBtn3_1= new QToolButton(this);
    toolBtn3_1->setText(tr("小张"));
    toolBtn3_1->setIcon(QPixmap(":/new/prefix1/qq/8.bmp"));
    toolBtn3_1->setIconSize(QPixmap(":/new/prefix1/qq/8.bmp").size());
    toolBtn3_1->setAutoRaise(true);
    toolBtn3_1->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);

    toolBtn3_2= new QToolButton(this);
    toolBtn3_2->setText(tr("小李"));
    toolBtn3_2->setIcon(QPixmap(":/new/prefix1/qq/9.bmp"));
    toolBtn3_2->setIconSize(QPixmap(":/new/prefix1/qq/9.bmp").size());
    toolBtn3_2->setAutoRaise(true);
    toolBtn3_2->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);

    QGroupBox* group3 = new QGroupBox;
    QVBoxLayout* layout3 = new QVBoxLayout(group3);
    layout3->addWidget(toolBtn3_1);
    layout3->addWidget(toolBtn3_2);

    //将准备好的抽屉插入到ToolBox
    this->addItem((QWidget*)group1,tr("我的好友"));
    this->addItem((QWidget*)group2,tr("陌生人"));
    this->addItem((QWidget*)group3,tr("黑名单"));
}

QToolButton共分为三个组。每个组中都使用了垂直布局。

QVBoxLayout* layout3 = new QVBoxLayout(group3);
layout3->addWidget(toolBtn3_1);
layout3->addWidget(toolBtn3_2);

然后将QToolButton添加到布局中。最后要使用int QToolBox::addItem(QWidget *w, const QString &text)函数将每个组都添加到QToolBox中。

 this->addItem((QWidget*)group1,tr("我的好友"));
 this->addItem((QWidget*)group2,tr("陌生人"));
 this->addItem((QWidget*)group3,tr("黑名单"))

运行效果：