從零開始學Qt（23）：QTabWidget動态顯示和隐藏Tab卡片

Qt樣式表（Qt Style Sheet，QSS）是一種強大的機制，可以自定義widget的幾乎任何外觀。本文利用樣式表，對于QTabWidget元件，實作動态顯示和隐藏Tab的功能。下面對具體步驟進行介紹。

利用視窗設計器設定樣式

Qt Designer是預覽樣式表的優秀工具。右鍵單擊設計器中的QTabWidget，然後選擇“Change styleSheet...”設定樣式表。

在Qt 4.2及更高版本中，Qt Designer還包括一個樣式表文法高亮顯示和驗證器。驗證器在“Edit Style Sheet”對話框的左下角訓示文法是否有效。

當你單擊“OK”或“Apply”時，Qt Designer将自動顯示新樣式的widget。這裡設定了Tab的高度和寬度。

編寫動态樣式代碼

先編寫一個setQss函數，其功能是分别設定enable和disabled的卡片的屬性。對于disabled的卡片，這裡的關鍵是設定其寬度為0，同時顔色為透明。

void Widget::setQss()
{
ui->tabWidget->setStyleSheet("QTabBar::tab:enabled{width:130;height:40}"
                                                  "QTabBar::tab:disabled{width:0;height:40;color:transparent;}");
}           

編寫按鈕響應代碼

分别為顯示（btnDisp）按鈕和隐藏（btnHide）按鈕添加啟用和禁用某個Tab的代碼，然後調用setQss()函數設定樣式即可。

void Widget::on_btnDisp_clicked()
{
    int id = ui->spinBox->value();
    ui->tabWidget->setTabEnabled(id,true);
    setQss();
}

void Widget::on_btnHide_clicked()
{
    int id = ui->spinBox->value();
    ui->tabWidget->setTabEnabled(id,false);
    setQss();
}           

預覽效果：

啟動程式後的界面如下圖：

點選“隐藏”按鈕，Tab 1卡片消失不見了（spinBox中的值為0，表示第一個Tab）。點選“顯示”按鈕，Tab 1将重新出現。

關于QSS的詳細介紹見我之前的文章：

從零開始學Qt（20）：QSS詳解（1）- Qt樣式表是什麼？

從零開始學Qt（21）：QSS詳解（2）- QSS文法

從零開始學Qt（22）：QSS詳解（3）- 盒子模型