利用currentindexchanged實現網頁動態切換導航欄選項

一、currentindexchanged介紹

在開發網頁的過程中，經常需要實現導航菜單的切換，currentindexchanged事件就是用來處理這個功能的。該事件是屬於QTabWidget控制項的，作用是監測Tab選項的變化並且根據當前Tab選項顯示不同的內容。

二、currentindexchanged的使用

currentindexchanged事件主要包括兩部分：一是實現選項卡選中與非選中的顏色變化；二是在不同Tab選項下，顯示不同的內容。

//選項卡選中與非選中顏色變化代碼示例
QTabWidget{
    background-color:rgb(255,255,255)
}
QTabWidget::tab-bar{
    alignment:center
}
QTabBar::tab{
    background-color:rgb(200,200,200)
}
QTabBar::tab:selected{
    background-color:rgb(255,0,0)
}

輔助上面的代碼，我們可以在實現了選中與非選中顏色變化的基礎上，添加函數來實現在不同選項下顯示不同的內容，如下代碼示例：

//選項顯示不同內容示例
void MainWindow::on_tabWidget_currentChanged(int index)
{
    switch(index){
        case 0:{ui->textBrowser->setText(tr("這是第一個選項"));break;}
        case 1:{ui->textBrowser->setText(tr("這是第二個選項"));break;}
        case 2:{ui->textBrowser->setText(tr("這是第三個選項"));break;}
        case 3:{ui->textBrowser->setText(tr("這是第四個選項"));break;}
        default:break;
    }
}

三、currentindexchanged的注意事項

在使用currentindexchanged事件時，需要注意：一是事件函數必須在調用之前設置connect連接；二是函數參數代表的是珂能夠被關閉 （選項卡） 的選項（從0開始計算），而非當前選項（這個要注意）。

四、示例代碼

下面是一個完整的使用currentindexchanged事件的示例：

//頭文件部分
#include 
#include 
#include 
#include 

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private:
    Ui::MainWindow *ui;

private slots:
    void on_tabWidget_currentChanged(int index);
};

//cpp源文件部分
MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    connect(ui->tabWidget,SIGNAL(currentChanged(int)),this,SLOT(on_tabWidget_currentChanged(int)));
}

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

void MainWindow::on_tabWidget_currentChanged(int index)
{
    switch(index){
        case 0:{ui->textBrowser->setText(tr("這是第一個選項"));break;}
        case 1:{ui->textBrowser->setText(tr("這是第二個選項"));break;}
        case 2:{ui->textBrowser->setText(tr("這是第三個選項"));break;}
        case 3:{ui->textBrowser->setText(tr("這是第四個選項"));break;}
        default:break;
    }
}

//樣式文件示例
QTabWidget{
    background-color:rgb(255,255,255)
}
QTabWidget::tab-bar{
    alignment:center
}
QTabBar::tab{
    background-color:rgb(200,200,200)
}
QTabBar::tab:selected{
    background-color:rgb(255,0,0)
}