Qt折叠展开对话框的创建方法

目录

1、功能描述

2、实现方法

3、效果展示

---

1、功能描述

在某些时候，我们希望将详细信息折叠起来，只显示基本信息，如下图所示：

当用户点击“详细”时，就展开详细信息，如下图所示：

2、实现方法

（1）、自定义一个类ExtensionDialog继承QDialog，如果使用Qt Creator创建时取消“生成表格”复选框，即不要生成.ui文件，如果使用VS+Qt创建的话，会自动生成.ui文件，那就手动删掉.ui文件。

（2）、ExtensionDialog类头文件代码

#ifndef EXTENSIONDIALOG_H
#define EXTENSIONDIALOG_H
#include <QDialog>

class ExtensionDialog : public QDialog
{
    Q_OBJECT

public:
    ExtensionDialog(QWidget *parent = nullptr);
    ~ExtensionDialog();

private slots:
    void showDetailInfo();//显示详细信息槽函数

private:
    void createBaseInfo();//创建基础信息部分
    void createDetailInfo();//创建详细信息部分

private:
    QWidget* baseWidget;//基础信息放置容器
    QWidget* detailWidget;//详细信息放置容器
};
#endif // EXTENSIONDIALOG_H

（3）、ExtensionDialog类源文件代码

#include "extensiondialog.h"
#include<QVBoxLayout>
#include<QLabel>
#include<QPushButton>
#include<QComboBox>
#include<QGridLayout>
#include<QDialogButtonBox>
#include<QLineEdit>
#include<QHBoxLayout>

ExtensionDialog::ExtensionDialog(QWidget *parent)
    : QDialog(parent)
{
    QFont font=QFont(tr("微软雅黑"),10);
    this->setFont(font);//设置对话框字体
    Qt::WindowFlags flags=Qt::Dialog|Qt::WindowCloseButtonHint;
    this->setWindowFlags(flags);//设置窗口状态
    this->setWindowTitle(tr("Extension Dialog"));//设置窗口标题
    this->createBaseInfo();//创建基础信息部分
    this->createDetailInfo();//创建详细信息部分

    QVBoxLayout*   pLayout=new QVBoxLayout(this);//垂直布局
    pLayout->addWidget(baseWidget);//添加基础信息部分到布局
    pLayout->addWidget(detailWidget);//添加详细信息部分到布局
    pLayout->setSizeConstraint(QLayout::SetFixedSize);//固定布局的大小，很重要！
    pLayout->setSpacing(10);//设置基础部分和详细部分的间隔大小
}

ExtensionDialog::~ExtensionDialog()
{
}

void ExtensionDialog::showDetailInfo()
{
    if(detailWidget->isHidden())//如果详细信息部分被影藏
    {
        detailWidget->show();//则显示详细信息
    }
    else//如果详细信息部分已经在显示
    {
        detailWidget->hide();//则隐藏详细信息
    }
}

void ExtensionDialog::createBaseInfo()//创建基础信息部分
{
    QGridLayout* leftLayout=new QGridLayout();

    //姓名
    QLabel* nameLabel=new QLabel(tr("Name:"));
    QLineEdit* nameLineEdit=new QLineEdit(tr("Maria"));
    leftLayout->addWidget(nameLabel,0,0);
    leftLayout->addWidget(nameLineEdit,0,1);

    //性别
    QLabel* sexLabel=new QLabel(tr("Sex:"));
    QComboBox* sexComboBox=new QComboBox();
    sexComboBox->insertItem(0,tr("Female"));
    sexComboBox->insertItem(1,tr("male"));
    leftLayout->addWidget(sexLabel);
    leftLayout->addWidget(sexComboBox);

    //确定、详细按钮组
    QPushButton* OKBtn=new QPushButton(tr("确定"));
    QPushButton* DetailBtn=new QPushButton(tr("详细"));
    QDialogButtonBox* btnBox=new QDialogButtonBox(Qt::Vertical);//对话框按钮组
    btnBox->addButton(OKBtn,QDialogButtonBox::ActionRole);//往对话框按钮组中添加按钮
    btnBox->addButton(DetailBtn,QDialogButtonBox::ActionRole);//往对话框按钮组中添加按钮

    baseWidget=new QWidget();//基础信息容器
    QHBoxLayout*mainLayout=new QHBoxLayout(baseWidget);//水平布局
    mainLayout->addLayout(leftLayout);//往水平布局左侧添加leftLayout布局
    mainLayout->addWidget(btnBox);//往水平布局右侧添加对话框按钮组btnBox

    connect(DetailBtn,SIGNAL(clicked()),this,SLOT(showDetailInfo()));
}

void ExtensionDialog::createDetailInfo()//创建详细信息部分
{
    detailWidget=new QWidget();//详细信息容器
    QGridLayout* mainLayout=new QGridLayout(detailWidget);//网格布局

    //年龄
    QLabel* ageLabel=new QLabel(tr("Age:"));
    QLineEdit* ageLineEdit=new QLineEdit(tr("30"));
    mainLayout->addWidget(ageLabel,0,0);
    mainLayout->addWidget(ageLineEdit,0,1);

    //电话
    QLabel* phoneLabel=new QLabel(tr("Phone:"));
    QLineEdit* phoneLineEdit=new QLineEdit(tr("15972966705"));
    mainLayout->addWidget(phoneLabel,1,0);
    mainLayout->addWidget(phoneLineEdit,1,1);

    //邮箱
    QLabel* emailLabel=new QLabel(tr("Email:"));
    QLineEdit* emailLineEdit=new QLineEdit(tr("1240902430@qq.com"));
    mainLayout->addWidget(emailLabel,2,0);
    mainLayout->addWidget(emailLineEdit,2,1);
}

（4） 、main函数调用ExtensionDialog

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

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    ExtensionDialog w;
    w.show();
    return a.exec();
}

3、效果展示

折叠前：

展开后：