Qt抽屉效果实现-优快云博客

工具盒类又称为QToolBox。QToolBox提供了一种列状的层叠窗体，而QToolButton提供了一种快速访问命令或者选择项的按钮，通常在工具条中使用。

抽屉效果是软件界面设计中的一种常用形式，可以以一种动态直观的方式在大小有限的界面上扩展出更多的功能。

以下通过一个QQ好友列表的实例来详细说明工具盒类的使用：

一、步骤

创建一个类，继承自QToolBox；
创建若干QToolButton，并设置好图标；
创建布局QVBoxLayout，将创建的QToolButton加入到布局中；
创建QGroupBox，将它设为布局的父窗体；
将QGroupBox加入到QToolBox中。

二、运行结果

在这里插入图片描述

三、详细代码

drawer.h

#ifndef DRAWER_H
#define DRAWER_H

#include <QToolBox>
#include <QToolButton>

class Drawer : public QToolBox
{
    Q_OBJECT
public:
    Drawer(QWidget *parent=0,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

drawer.cpp

#include "drawer.h"
#include <QGroupBox>
#include <QVBoxLayout>

Drawer::Drawer(QWidget *parent,Qt::WindowFlags f)
    : QToolBox(parent,f)
{
    setWindowTitle(tr("My QQ"));
    toolBtn1_1 = new QToolButton;                       //实例化一个QToolButton
    toolBtn1_1->setText(tr("张三"));                    //设置按钮的名字
    toolBtn1_1->setIcon(QPixmap("11.png"));            //设置按钮的图标
    toolBtn1_1->setIconSize(QPixmap("11.png").size()); //设置按钮的大小，本例将其设置为与图标大小相同
    toolBtn1_1->setAutoRaise(true);                    //当鼠标离开时，按钮自动恢复为弹起状态
    toolBtn1_1->setToolButtonStyle(Qt::ToolButtonTextBesideIcon); //注（1）
    toolBtn1_2 = new QToolButton;
    toolBtn1_2->setText(tr("李四"));
    toolBtn1_2->setIcon(QPixmap("12.png"));
    toolBtn1_2->setIconSize(QPixmap("12.png").size());
    toolBtn1_2->setAutoRaise(true);
    toolBtn1_2->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);
    toolBtn1_3 = new QToolButton;
    toolBtn1_3->setText(tr("王五"));
    toolBtn1_3->setIcon(QPixmap("13.png"));
    toolBtn1_3->setIconSize(QPixmap("13.png").size());
    toolBtn1_3->setAutoRaise(true);
    toolBtn1_3->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);
    toolBtn1_4 = new QToolButton;
    toolBtn1_4->setText(tr("赵六"));
    toolBtn1_4->setIcon(QPixmap("14.png"));
    toolBtn1_4->setIconSize(QPixmap("14.png").size());
    toolBtn1_4->setAutoRaise(true);
    toolBtn1_4->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);
    toolBtn1_5 = new QToolButton;
    toolBtn1_5->setText(tr("周天一"));
    toolBtn1_5->setIcon(QPixmap("15.png"));
    toolBtn1_5->setIconSize(QPixmap("15.png").size());
    toolBtn1_5->setAutoRaise(true);
    toolBtn1_5->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);
    QGroupBox *groupBox1 = new QGroupBox;              //创建一个QGroupBox类实例，在本例中对应一个抽屉
    QVBoxLayout *layout1 = new QVBoxLayout(groupBox1); //创建一个垂直布局，用来设置抽屉内各个按钮的布局
    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);
    //插入一个占位符
    layout1->addStretch();                            //在按钮之后插入一个占位符，使得所有按钮能够靠上对齐，并且在整个抽屉大小发送变化是保证按钮的大小不发生变化
    toolBtn2_1 = new QToolButton;
    toolBtn2_1->setText(tr("狗剩"));
    toolBtn2_1->setIcon(QPixmap("21.png"));
    toolBtn2_1->setIconSize(QPixmap("21.png").size());
    toolBtn2_1->setAutoRaise(true);
    toolBtn2_1->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);
    toolBtn2_2 = new QToolButton;
    toolBtn2_2->setText(tr("铁蛋"));
    toolBtn2_2->setIcon(QPixmap("22.png"));
    toolBtn2_2->setIconSize(QPixmap("22.png").size());
    toolBtn2_2->setAutoRaise(true);
    toolBtn2_2->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);
    QGroupBox *groupBox2 = new QGroupBox;
    QVBoxLayout *layout2 = new QVBoxLayout(groupBox2);
    layout2->setMargin(10);
    layout2->setAlignment(Qt::AlignHCenter);
    layout2->addWidget(toolBtn2_1);
    layout2->addWidget(toolBtn2_2);
    toolBtn3_1 = new QToolButton;
    toolBtn3_1->setText(tr("传销"));
    toolBtn3_1->setIcon(QPixmap("31.png"));
    toolBtn3_1->setIconSize(QPixmap("31.png").size());
    toolBtn3_1->setAutoRaise(true);
    toolBtn3_1->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);
    toolBtn3_2 = new QToolButton;
    toolBtn3_2->setText(tr("中介"));
    toolBtn3_2->setIcon(QPixmap("32.png"));
    toolBtn3_2->setIconSize(QPixmap("32.png").size());
    toolBtn3_2->setAutoRaise(true);
    toolBtn3_2->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);
    QGroupBox *groupBox3 = new QGroupBox;
    QVBoxLayout *layout3 = new QVBoxLayout(groupBox3);
    layout3->setMargin(10);
    layout3->setAlignment(Qt::AlignHCenter);
    layout3->addWidget(toolBtn3_1);
    layout3->addWidget(toolBtn3_2);
    //将准备好的抽屉插入ToolBox中
    this->addItem((QWidget *)groupBox1,tr("我的好友"));
    this->addItem((QWidget *)groupBox2,tr("我的兄弟"));
    this->addItem((QWidget *)groupBox3,tr("黑名单"));
}

注（1）：设置按钮的ToolButtonStyle属性。ToolButtonStyle属性主要用于描述按钮的文字和图标的显示方式。QT定义了五种ToolButtonStyle类型，可以通过需要选择显示的方式。

ToolButtonStyle	说明
Qt::ToolButtonIconOnly	只显示图标
Qt::ToolButtonTextOnly	只显示文字
Qt::ToolButtonTextBesideIcon	文字显示在图标旁边
Qt::ToolButtonTextUnderIcon	文字显示在图标下面
Qt::ToolButtonFollowStyle	遵循Style标准

main.cpp

#include <QApplication>
#include "drawer.h"

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Drawer drawer;
    drawer.show();

    return a.exec();
}