Qt自定義控件之可伸縮組合框（GroupBox）控件

摘要

本文基於QGroupBox擴展了一種可以伸縮的組合框，正常狀態下，組合框處於收縮狀態，內部的控件是隱藏的；需要的時候，可以將組合框進行伸展，並將內部控件顯示出來。

正文

實現的代碼比較簡單，主要有以下幾點：

1、該組合框繼承於QGroupBox;

2、通過QSS將QGroupBox的默認Check圖標替換;

3、通過QGroupBox的setFlat函數顯示隱藏垂直邊框

4、使用時，設置父窗口的layout的SizeConstraint為SetFixedSize，否則否則在ExtendedGroupBox收縮時，無法動態調整大小。

代碼如下：

QSS樣式：

QGroupBox#ExtendedGroupBox::indicator 
{
    width: 8px;
    height: 8px;
}

QGroupBox#ExtendedGroupBox::indicator:unchecked 
{
    image: url(:/icons/uncheck.png);
}

QGroupBox#ExtendedGroupBox::indicator:checked 
{
    image: url(:/icons/check.png);
}

 

#ifndef EXTENDED_GROUP_BOX_H_
#define EXTENDED_GROUP_BOX_H_

#include <QGroupBox>
#include <QVector>

class ExtendedGroupBox : public QGroupBox
{
    Q_OBJECT

public:
    enum State
    {
        STATE_NORMAL,
        STATE_EXPAND
    };

public:
    ExtendedGroupBox(QWidget *parent = nullptr, State state = STATE_NORMAL);
    ExtendedGroupBox(const QString &title, QWidget *parent = nullptr, State state = STATE_NORMAL);

private Q_SLOTS:
    void onChecked(bool checked);

public:
    void addWidget(QWidget *widget);
    State getState() const;

private:
    QVector<QWidget*> children_;
    State state_;
};


#endif//EXTENDED_GROUP_BOX_H_

#include "ExtendedGroupBox.h"

ExtendedGroupBox::ExtendedGroupBox(QWidget *parent /*= nullptr*/, State state /*= STATE_NORMAL*/)
    : QGroupBox(parent)
{
    setObjectName("ExtendedGroupBox");
    setCheckable(true);
    state_ = state;
    if (state_ == STATE_NORMAL)
    {
        //隱藏垂直邊框
        setFlat(true);
        setChecked(false);
    }
    connect(this, SIGNAL(clicked(bool)), this, SLOT(onChecked(bool)));
}

ExtendedGroupBox::ExtendedGroupBox(const QString &title, QWidget *parent /*= nullptr*/, State state /*= STATE_NORMAL*/)
    : QGroupBox(title, parent)
{
    setObjectName("ExtendedGroupBox");
    setCheckable(true);
    state_ = state;
    if (state_ == STATE_NORMAL)
    {
        //隱藏垂直邊框
        setFlat(true);
        setChecked(false);
    }
    connect(this, SIGNAL(clicked(bool)), this, SLOT(onChecked(bool)));
}

void ExtendedGroupBox::addWidget(QWidget *widget)
{
    if (widget != nullptr)
    {
        if (state_ == STATE_NORMAL)
        {
            widget->setVisible(false);
        }
        children_.push_back(widget);
    }
}

void ExtendedGroupBox::onChecked(bool checked)
{
    if (checked)
    {
        //顯示垂直邊框
        setFlat(false);
        for (auto iter = children_.begin(); iter != children_.end(); ++iter)
        {
            (*iter)->setVisible(true);
        }
        state_ = STATE_EXPAND;
    }
    else
    {
        //隱藏垂直邊框
        setFlat(true);
        for (auto iter = children_.begin(); iter != children_.end(); ++iter)
        {
            (*iter)->setVisible(false);
        }
        state_ = STATE_NORMAL;
    }
}

ExtendedGroupBox::State ExtendedGroupBox::getState() const
{
    return state_;
}

#include "ExtendedGroupBox.h"

#include <QDialog>
#include <QVBoxLayout>
#include <QHBoxLayout>
#include <QFormLayout>
#include <QCheckBox>
#include <QProgressBar>
#include <QFile>

#include <QtWidgets/QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QFile file(":/stylesheets/style.qss");
    bool s = file.open(QFile::ReadOnly);
    a.setStyleSheet(file.readAll());
    file.close();

    QDialog w;
    QVBoxLayout *vbox_layout = new QVBoxLayout();

    //設置窗口的layout的SizeConstraint為SetFixedSize，
    //否則在ExtendedGroupBox收縮時，無法動態調整大小。
    vbox_layout->setSizeConstraint(QLayout::SetFixedSize);
    w.setLayout(vbox_layout);

    QGroupBox *setting_group_box = new QGroupBox(("Setting"));
    QHBoxLayout *setting_layout = new QHBoxLayout();
    setting_group_box->setLayout(setting_layout);

    QCheckBox *check_box1 = new QCheckBox(("CheckBox1"));
    QCheckBox *check_box2 = new QCheckBox(("CheckBox2"));
    QCheckBox *check_box3 = new QCheckBox(("CheckBox3"));
    setting_layout->addWidget(check_box1);
    setting_layout->addWidget(check_box2);
    setting_layout->addWidget(check_box3);

    ExtendedGroupBox *advanced_setting_group_box = new ExtendedGroupBox(("Advanced Setting"), &w, ExtendedGroupBox::STATE_NORMAL);
    QHBoxLayout *advanced_setting_layout = new QHBoxLayout();
    advanced_setting_group_box->setLayout(advanced_setting_layout);

    QCheckBox *check_box4 = new QCheckBox(("CheckBox4"));
    QCheckBox *check_box5 = new QCheckBox(("CheckBox5"));
    QCheckBox *check_box6 = new QCheckBox(("CheckBox6"));
    advanced_setting_layout->addWidget(check_box4);
    advanced_setting_layout->addWidget(check_box5);
    advanced_setting_layout->addWidget(check_box6);

    //將子控件添加到ExtendedGroupBox中
    advanced_setting_group_box->addWidget(check_box4);
    advanced_setting_group_box->addWidget(check_box5);
    advanced_setting_group_box->addWidget(check_box6);

    vbox_layout->addWidget(setting_group_box);
    vbox_layout->addWidget(advanced_setting_group_box);

    w.show();
    return a.exec();
}

運行截圖：