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

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

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

一、步骤

  1. 创建一个类,继承自QToolBox;
  2. 创建若干QToolButton,并设置好图标;
  3. 创建布局QVBoxLayout,将创建的QToolButton加入到布局中;
  4. 创建QGroupBox,将它设为布局的父窗体;
  5. 将QGroupBox加入到QToolBox中。

二、运行结果

学习QT之工具盒类_#include


学习QT之工具盒类_ico_02


学习QT之工具盒类_ide_03

三、详细代码

​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();
}