在Qt自帶的控件中，也存在抽屜控件：QToolBar。但是，該控件有個缺點：一次只能展開一個抽屜信息，無法實現(xiàn)多個展開。為此，實現(xiàn)了如下效果的程序：

下面對這種實現(xiàn)效果進(jìn)行講解~

功能講解

開發(fā)環(huán)境：VS2017 + Qt5.14.2 64位

實現(xiàn)的核心技術(shù)：

1：QScrollArea的應(yīng)用。

2：垂直布局的應(yīng)用。

根據(jù)展示效果可以發(fā)現(xiàn)：一個標(biāo)題下面對應(yīng)了一個顯示窗口，標(biāo)題的下拉按鈕控制了粉色窗口的顯示和隱藏。

接下來，由內(nèi)向外進(jìn)行實現(xiàn)。

自定義標(biāo)題widget

類名：QSingleTitleWidget

代表了每一個單獨的標(biāo)題窗口。包含了兩個控件：QLabel、QCheckBox，分別展示標(biāo)題名稱以及控制是否展示對應(yīng)的內(nèi)容窗口

標(biāo)題名稱控件的創(chuàng)建

QString qsLabelStyle = "QLabel{color:#333333; font-family:Microsoft YaHei UI; font-size:18px;} QLabel{background-color: transparent}";
m_labTitle = new QLabel(this);
m_labTitle->setGeometry(10, 0, 200, 60);
m_labTitle->setAlignment(Qt::AlignVCenter | Qt::AlignLeft);
m_labTitle->setStyleSheet(qsLabelStyle);
m_labTitle->show();

QCheckBox控件的創(chuàng)建

QString qsCheckStyle = "QCheckBox{color:#333333;font-family:Microsoft YaHei UI;font-size:14px;}"
"QCheckBox::indicator::checked{image:url(:/QMultipleToolBarWidget/image/jd_zk_s.png)}"
"QCheckBox::indicator::unchecked{image:url(:/QMultipleToolBarWidget/image/jd_sq_n.png)}"; 
m_check = new QCheckBox(this);
m_check->setGeometry(500, 5, 50, 60);
m_check->setStyleSheet(qsCheckStyle);
connect(m_check, &QCheckBox::clicked, this, &QSingleTitleWidget::OnCheckShowState);
m_check->show();
m_check->setChecked(false);

在標(biāo)題類（QSingleTitleWidget）中需要實現(xiàn)QCheckBox的響應(yīng)消息，通知外界該標(biāo)題類對應(yīng)的內(nèi)容類是顯示還是隱藏狀態(tài)。

"setChecked(false)"：默認(rèn)窗口一創(chuàng)建就讓粉色窗口處于隱藏狀態(tài)。

對于QCheckBox的消息的實現(xiàn)，如下：

void QSingleTitleWidget::OnCheckShowState(bool checked /*= false*/)
{
	emit Msg_SendShowState(m_nNum, checked);
}

其中，m_nNum是當(dāng)前標(biāo)題窗口的編號，在通知外界的同時也需要告訴外界，是哪個窗口發(fā)生了變化！

補充一點：在QSingleTitleWidget類中也可以不實現(xiàn)QCheckBox響應(yīng)消息，直接使用QWidget::mousePressEvent消息做處理，這里不再詳細(xì)說明！

自定義內(nèi)容Widget

類名：QSingleContentWidget

代表了每一個單獨的內(nèi)容窗口。僅有一個控件：QLabel，只是用于提示窗口的高度。

其實在實際開發(fā)中，可以展示更豐富的內(nèi)容，這里只是展示了不同高度。

創(chuàng)建顯示高度描述控件

QString qsLabelStyle = "QLabel{color:#333333; font-family:Microsoft YaHei UI; font-size:18px;} QLabel{background-color: transparent}";
m_labContent = new QLabel(this);
m_labContent->setStyleSheet(qsLabelStyle);
m_labContent->setAlignment(Qt::AlignVCenter | Qt::AlignLeft);
m_labContent->show();

設(shè)置具體的高度值

void QSingleContentWidget::SetContent(int nHeight)
{
	QString qsContent = QStringLiteral("當(dāng)前窗口高度是：") + QString::number(nHeight);
	m_labContent->setGeometry(10, 10, 540, nHeight-20);
	m_labContent->setText(qsContent);
}

以上1、2兩部分內(nèi)容分別描述了標(biāo)題widget、內(nèi)容widget，下面需要創(chuàng)建一個承載這些內(nèi)容的widget載體，將在QScrollArea中使用。

QScrollArea中widget實現(xiàn)

類名：QScrollAreaWidget

該類是一個承載多個標(biāo)題、內(nèi)容的widget，也是直接由外部調(diào)用的類。

假設(shè)：傳入一個std::vector<int>的容器，容器的多少大小代表的是標(biāo)題的個數(shù)，int值是隨機生成的高度值。

但是，到了真正業(yè)務(wù)應(yīng)用中時，這里的int沒準(zhǔn)就是一個結(jié)構(gòu)體，或者是一個數(shù)據(jù)指針，無論是什么，處理方式都是一樣的。

對外開放接口：

void QScrollAreaWidget::SetScrollAreaData(std::vector<int> vetWidget)
{
    //數(shù)據(jù)處理
}

根據(jù)vetWidget的大小創(chuàng)建出對應(yīng)的數(shù)據(jù)組（一個標(biāo)題、一個內(nèi)容）

直接上全部代碼~

int nTop = 0;
for (int i = 0; i < vetWidget.size(); i++)
{
	//創(chuàng)建：標(biāo)題
	QSingleTitleWidget *widgetTitle = new QSingleTitleWidget(this);
	widgetTitle->setFixedSize(560, 60);
	widgetTitle->SetTitleContent(i);
	bool bShowState = i == 0 ? true : false;
	widgetTitle->SetShowState(bShowState);
	widgetTitle->show();
	connect(widgetTitle, &QSingleTitleWidget::Msg_SendShowState, this, &QScrollAreaWidget::MsgReceivedTitleControlShowState);
	m_vetTitleWidget.push_back(widgetTitle);
	m_layout.addWidget(widgetTitle);
	nTop += 60 + 5;

	//創(chuàng)建：內(nèi)容
	QSingleContentWidget *widgetContent = new QSingleContentWidget(this);
	widgetContent->setFixedSize(QSize(560, vetWidget[i]));
	widgetContent->SetContent(vetWidget[i]);
	if (bShowState == true)
	{
		widgetContent->show();
		nTop += vetWidget[i] + 5;
	}
	else
	{
		widgetContent->hide();
	}
	m_mapContentWidget.insert(std::make_pair(i, widgetContent));
	m_layout.addWidget(widgetContent);

}
m_layout.addStretch(0);
m_layout.setSpacing(5);
this->setLayout(&m_layout);

m_nTotalHeight = nTop;

this->setFixedSize(QSize(560, nTop));

代碼講解：

1：創(chuàng)建標(biāo)題類：QSingleTitleWidget、創(chuàng)建內(nèi)容類：QSingleContentWidget。

這兩個類是一對一對應(yīng)的。其中，這里有個小邏輯處理，當(dāng)編號是0時（也就是第一組數(shù)據(jù)時）默認(rèn)處于顯示狀態(tài)。

采用了三目運算符，方便簡單：bool bShowState = i == 0 ? true : false;

并且，在創(chuàng)建QSingleContentWidget類時，根據(jù)是否顯示狀態(tài)來控件該類是否顯示。

2：消息處理

之前在QSingleTitleWidget類中發(fā)送了一個QCheckBox的消息，在這里就運用到該消息了。

Msg_SendShowState參數(shù)值=true時，代表展示QSingleContentWidget類內(nèi)容；反之，隱藏QSingleContentWidget類的內(nèi)容。

3：垂直布局應(yīng)用

每創(chuàng)建一個新的widget，需要將widget添加到布局中：m_layout.addWidget(widgetTitle);

最后，需要在當(dāng)前類中綁定布局：this->setLayout(&m_layout);

4：nTop值的意義

每創(chuàng)建一個類都需要對nTop進(jìn)行追加，主要是為了擴(kuò)大QScrollArea子窗口widget的大小，其實在使用布局后不使用也沒有關(guān)系，但是為了能夠讓我們控制widget的高度，最好主動進(jìn)行設(shè)置。

QScrollArea子窗口的提升

從Qt Designer中拖出來的QScrollArea控件，默認(rèn)會自帶一個widget子控件，上述3下的功能就是對子控件的重寫，那么該如何綁定呢？

選中提升后，出現(xiàn)下面頁面

紅框里面就是需要提升的類文件以及類名。

注意：設(shè)置了提升的類名稱后，默認(rèn)頭文件會自動添加，但是該頭文件是不區(qū)分大小寫！這里一定要改成與實際的頭文件名稱保持一致！

剛開始做的時候未區(qū)分大小寫，結(jié)果找了半天才找到原因，這也跟Qt版本有關(guān)系，最好與我們提升的類一一對應(yīng)！

到此這篇關(guān)于Qt實現(xiàn)小功能之復(fù)雜抽屜效果詳解的文章就介紹到這了,更多相關(guān)Qt復(fù)雜抽屜效果內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！