Qt学习笔记(二十一)：QToolBox 的常用方法

---

在界面上拉一个 Tool Box 控件，和三个按钮控件：

代码如下：

#include "widget.h"
#include "ui_widget.h"
#include <QGroupBox>
#include <QDebug>
#include <QMessageBox>
#include <QToolButton>
#include <QVBoxLayout>
#include <QToolBox>
#include <QLabel>
#include <QHBoxLayout>
#include <QPixmap>

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
    
    // 设置边框样式
    ui->toolBox->setFrameStyle(QFrame::Panel);
    
    // 设置图标和文本信息
    ui->toolBox->setItemIcon(0, QIcon(":/Image/OnePiece.png"));
    ui->toolBox->setItemText(0, "海贼王");
    
    // 获取控件上 toolbox 的第一个子页
    QWidget *widget = ui->toolBox->widget(0);
    
    // QGroupBox 一般用于分组，作为容器部件使用，在其中可以布置各种窗口部件；
    // 但是需要注意的是，内部必须使用布局控件进行布局
    QGroupBox *groupBox = new QGroupBox(this);
    
    // 创建两个 QToolButton 对象
    QToolButton *btn1 = CreateToolButton("路飞一号", ":/Image/Luffy.png");
    QToolButton *btn2 = CreateToolButton("路飞二号", ":/Image/LuffyQ.png");
    
    // 创建一个垂直布局控件
    QVBoxLayout *pLayout = new QVBoxLayout(groupBox);
    pLayout->addWidget(btn1);               
    pLayout->addWidget(btn2);             
    pLayout->addStretch();                  // 添加一个可拉伸的空间
    pLayout->setAlignment(Qt::AlignHCenter);// 设置居中显示  
    
    // 为控件上 toolbox 的第一个子页设置内容（内容是一个布局）
    widget->setLayout(pLayout);
}

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

// 创建 QToolButton 控件对象
QToolButton *Widget::CreateToolButton(QString text, QString icon)
{
    QToolButton *toolBtn = new QToolButton(this);
    toolBtn->setText(text);                                     // 设置文本
    toolBtn->setIcon(QIcon(icon));                              // 设置图标
    toolBtn->setIconSize(QSize(50, 50));                        // 设置图标大小
    toolBtn->setAutoRaise(true);                                // 设置自动提升
    toolBtn->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);   // 设置文本在图标下面显示
    return toolBtn;
}

// 添加
void Widget::on_btnAdd_clicked()
{
    // QGroupBox 一般用于分组，作为容器部件使用，在其中可以布置各种窗口部件；
    // 但是需要注意的是，内部必须使用布局控件进行布局
    QGroupBox *groupBox = new QGroupBox(this);
    
    // 创建几个 QToolButton 对象
    QToolButton *btn1 = CreateToolButton("蝴蝶一号", ":/Image/butterfly.png");
    QToolButton *btn2 = CreateToolButton("蝴蝶二号", ":/Image/down.png");
    QToolButton *btn3 = CreateToolButton("蝴蝶三号", ":/Image/up.png");
    
    // 创建一个垂直布局控件
    QVBoxLayout *pLayout = new QVBoxLayout(groupBox);
    pLayout->addWidget(btn1);               
    pLayout->addWidget(btn2);               // 将 QToolButton 对象添加到布局中
    pLayout->addWidget(btn3); 
    pLayout->addStretch();                  // 添加一个可拉伸的空间
    pLayout->setAlignment(Qt::AlignHCenter);// 设置居中显示  
    
    // 将分组好的部件添加到 toolBox 中
    ui->toolBox->addItem(groupBox, QIcon(":/Image/butterfly.png"), "蝴蝶");
}

// 插入：多层布局
void Widget::on_btnInsert_clicked()
{
    // QGroupBox 一般用于分组，作为容器部件使用，在其中可以布置各种窗口部件；
    // 但是需要注意的是，内部必须使用布局控件进行布局;
    QGroupBox *groupBox = new QGroupBox(this);

    // 创建一个用于显示图片的 QLabel
//    QLabel *labImage = new QLabel(this);
//    labImage->resize(50, 50);
//    labImage->setPixmap(QPixmap(":/Image/Luffy.png"));
//    labImage->setScaledContents(true); // 设置图片自动拉伸，以适应控件大小
    
    // 注意：上面用 QLabel 显示图片，当图片较大时，没有找到方法让图片缩小
    // 以适应 label 控件大小，上面的方法单独使用有效，但是放到布局中就无效了；
    // 所以还是使用 QToolButton 控件吧；
    QToolButton *btnImage = CreateToolButton("万里阳光号", ":/Image/sunny.png");
    
    // 创建一个用于显示文字的 QLabel 
    QLabel *labName = new QLabel(this);
    labName->setText("船长:路飞");
    labName->setFont(QFont("宋体", 16));
    
    // 创建一个用于显示文字的 QLabel
    QLabel *labDesc = new QLabel(this);
    labDesc->setText("口号:我是要成为海贼王的男人！");
    labDesc->setFont(QFont("宋体", 12));
    
    // 先创建一个垂直布局控件：将两个显示文字的 QLabel 放入垂直布局中
    QVBoxLayout *vLayout = new QVBoxLayout();
    vLayout->addWidget(labName); 
    vLayout->addWidget(labDesc);
    
    // 再创建一个水平布局控件：将显示图片的 QToolButton 和上面的 垂直布局控件 一起放入水平布局中
    QHBoxLayout *hLayout = new QHBoxLayout();
    hLayout->addWidget(btnImage);
    hLayout->addLayout(vLayout);
    
    // 最后再创建一个垂直布局控件：作为 groupBox 中的整体布局
    QVBoxLayout *pvLayout = new QVBoxLayout(groupBox);
    pvLayout->addLayout(hLayout);
    pvLayout->addStretch();
    pvLayout->setAlignment(Qt::AlignLeft);
    
    // 将分组好的部件插入到 toolBox 中
    ui->toolBox->insertItem(ui->toolBox->count(), groupBox, QIcon(":/Image/sunny.png"), "海贼船");
}

// 删除
void Widget::on_btnDelete_clicked()
{
    // 程序一启动时默认选中的是就 第一项
    int index = ui->toolBox->currentIndex();
    qDebug() << QString::number(index);
    if (index == -1)
    {
        QMessageBox::warning(this, "系统提示", "请选择需要删除的项！");
    }
    else
    {
        if (QMessageBox::question(this, "系统提示", QString("是否要删除第 %1 项？").arg(QString::number(index + 1))) == QMessageBox::Yes)
        {
            ui->toolBox->removeItem(index);
        }
    }
}

程序一启动的时候，就修改 Page 1，并为其添加数据，效果如下：

 

点击 “添加” 按钮，效果如下：

点击 “插入” 按钮，效果如下：