C++ Qt開發：Slider滑塊條元件

lyshark發表於2023-12-14
C++QTIDE元件

Qt 是一個跨平臺C++圖形介面開發庫，利用Qt可以快速開發跨平臺窗體應用程式，在Qt中我們可以透過拖拽的方式將不同元件放到指定的位置，實現圖形化開發極大的方便了開發效率，本章將重點介紹Slider滑塊條元件的常用方法及靈活運用。

當涉及到C++ Qt開發中的Slider滑塊條元件時，你可能會用到QSlider類。QSlider是一個用於選擇整數值的控制元件，常用於調整範圍內的數值，如音量、亮度等。在水平方向上的Slider通常被稱為水平滑塊（Horizontal Slider），而在垂直方向上的Slider被稱為垂直滑塊（Vertical Slider）。

水平滑塊（Horizontal Slider）特點

  • 方向： 在水平軸上移動，允許使用者透過拖動滑塊來選擇數值。
  • 應用場景： 適用於需要在水平方向上進行範圍選擇的情況，比如調整音量、進度等。

垂直滑塊（Vertical Slider）特點

  • 方向： 在垂直軸上移動，允許使用者透過拖動滑塊來選擇數值。
  • 應用場景： 適用於需要在垂直方向上進行範圍選擇的情況，比如調整亮度、高度等。

這兩種Slider都是在使用者介面中提供直觀、互動式的方式來選擇數值範圍的優秀元件，它們能夠很好地與Qt應用程式的其他部分整合。

以下是QSlider類的一些常用方法的說明和概述，以表格形式進行說明：

方法 描述
QSlider(Qt::Orientation, QWidget *parent = nullptr) 建構函式，建立一個滑塊控制元件。Qt::Orientation引數指定方向（Qt::Horizontal或Qt::Vertical）。
setMinimum(int min) 設定滑塊的最小值。
setMaximum(int max) 設定滑塊的最大值。
setSingleStep(int step) 設定使用者透過滑鼠或鍵盤按鍵時，滑塊的單步大小。
setPageStep(int step) 設定使用者透過點選滑塊軌道時，滑塊的頁面步長。
setValue(int value) 設定滑塊的當前值。
value() const 返回滑塊的當前值。
setTickInterval(int ti) 設定刻度間隔，以便顯示刻度標記。
setTickPosition(TickPosition position) 設定刻度標記的位置（NoTicks、TicksAbove、TicksBelow、TicksBothSides）。
sliderPosition() const 返回滑塊的位置，通常與value()相同，但可能在某些情況下不同（例如，未捕獲的移動）。
setTracking(bool enable) 啟用/禁用實時跟蹤。如果啟用，滑塊在拖動時會實時更新值；禁用時，只有在釋放滑鼠時才更新。
setTickInterval(int ti) 設定刻度間隔，以便顯示刻度標記。
setTickPosition(TickPosition position) 設定刻度標記的位置（NoTicks、TicksAbove、TicksBelow、TicksBothSides）。

這些方法提供了一些基本的控制和配置選項，以便根據應用程式的需求對QSlider進行調整。在使用這些方法時，你可以根據具體的場景和使用者體驗需求來靈活選擇引數值。

1.1 使用滑塊條事件

如下圖，我們首先建立一個頁面UI，在頁面中左側放置Vertical Slider垂直滑塊，底部放置Horizontal Slider水平滑塊，在水平滑塊的上方放置兩個lineEdit元件，在其右側是兩個調節按鈕。

不論是水平滑塊（Horizontal Slider）條還是垂直滑塊（Vertical Slider）條其都有一個valueChanged(int)的槽函式，該訊號用於接收滑塊條的引數改變情況，通常會返回到函式引數上，此時只需要在槽函式內對該引數進行捕捉處理即可，如下程式碼，透過捕捉滑塊進度並將其輸出到編輯框內；

// 垂直滑塊（Vertical Slider）條
void MainWindow::on_verticalSlider_valueChanged(int value)
{
    // 轉換整數為string
    QString myString = QString::number(value);
    // 設定到編輯框內
    ui->lineEdit->setText(myString);
}

// 水平滑塊（Horizontal Slider）條
void MainWindow::on_horizontalSlider_valueChanged(int value)
{
    // 轉換整數為string
    QString myString = QString::number(value);
    // 設定到編輯框內
    ui->lineEdit_2->setText(myString);
}

當使用者點選頁面中的設定按鈕時，此時在後端只需要呼叫verticalSlider或horizontalSlider滑塊條的setValue屬性即可實現對滑塊條的賦值。

// 設定垂直滑塊（Vertical Slider）條進度
void MainWindow::on_pushButton_clicked()
{
    // 字串轉整數
    int x = ui->lineEdit->text().toUInt();
    // 設定數值到滑塊條
    ui->verticalSlider->setValue(x);
}

// 設定水平滑塊（Horizontal Slider）條
void MainWindow::on_pushButton_2_clicked()
{
    int x = ui->lineEdit_2->text().toUInt();
    ui->horizontalSlider->setValue(x);
}

執行程式碼，讀者可自行測試滑塊條的取值與設定功能，如下圖所示；

1.2 滑塊條與訊號繫結

滑塊條同樣可以與訊號繫結，在某些時候我們希望只需要變動滑塊條的位置就能實現特定的功能，此時就需要對特定的滑塊條繫結訊號與槽函式，如下圖所示，我們在左側調色盤位置放置四個滑塊條用於調整顏色引數，在右側放置一個textEdit編輯框，當讀者滑動滑塊時右側則出現相對應的顏色。

首先，我們以第一個紅色Horizontal Slider滑塊條為例，透過右鍵選中轉到槽，選擇valueChaged(int)這個槽函式，並實現如下邏輯，在程式碼中我們分別讀入四個進度條的預設值，並率先設定到textEdit元件上，接著就是對textEdit底色的設定。

// 變色槽函式
void MainWindow::on_SliderRed_valueChanged(int value)
{
    Q_UNUSED(value);
     QColor color;
     int R=ui->SliderRed->value();      // 讀取SliderRed的當前值
     int G=ui->SliderGreen->value();    // 讀取 SliderGreen 的當前值
     int B=ui->SliderBlue->value();     // 讀取 SliderBlue 的當前值
     int alpha=ui->SliderAlpha->value();// 讀取 SliderAlpha 的當前值
     color.setRgb(R,G,B,alpha);         // 使用QColor的setRgb()函式獲得顏色

     QPalette pal=ui->textEdit->palette(); // 獲取textEdit原有的 palette
     pal.setColor(QPalette::Base,color);   // 設定palette的基色（即背景色）
     ui->textEdit->setPalette(pal);        // 設定為textEdit的palette,改變textEdit的底色
}

接著，我們在MainWindow建構函式上分別繫結三個訊號，將 SliderGreen，SliderBlue，SliderAlpha 與第一個滑塊條 SliderRead 關聯起來，並全部繫結到on_SliderRed_valueChanged槽函式上，此時的實現效果為，當其他三個選擇條數值改變時，同樣會觸發on_SliderRed_valueChanged槽函式執行變色。

MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    QObject::connect(ui->SliderRed,SIGNAL(valueChanged(int)),this,SLOT(on_SliderRed_valueChanged(int)));
    QObject::connect(ui->SliderGreen,SIGNAL(valueChanged(int)),this,SLOT(on_SliderRed_valueChanged(int)));
    QObject::connect(ui->SliderBlue,SIGNAL(valueChanged(int)),this,SLOT(on_SliderRed_valueChanged(int)));
    QObject::connect(ui->SliderAlpha,SIGNAL(valueChanged(int)),this,SLOT(on_SliderRed_valueChanged(int)));
}

至此，讀者可自行拖拽滑塊條以獲得不同的配色方案，如下圖所示，這裡需要提醒讀者預設滑塊條是0-99而顏色的長度為0-255讀者需要自行調整滑塊條的顏色值，以獲取更多的配色方案。

相關文章