Qt 是一個(gè)跨平臺(tái)C++圖形界面開(kāi)發(fā)庫(kù)，利用Qt可以快速開(kāi)發(fā)跨平臺(tái)窗體應(yīng)用程序，在Qt中我們可以通過(guò)拖拽的方式將不同組件放到指定的位置，實(shí)現(xiàn)圖形化開(kāi)發(fā)極大的方便了開(kāi)發(fā)效率，本章將重點(diǎn)介紹Slider滑塊條組件的常用方法及靈活運(yùn)用。

當(dāng)涉及到C++ Qt開(kāi)發(fā)中的Slider滑塊條組件時(shí)，你可能會(huì)用到QSlider類(lèi)。QSlider是一個(gè)用于選擇整數(shù)值的控件，常用于調(diào)整范圍內(nèi)的數(shù)值，如音量、亮度等。在水平方向上的Slider通常被稱(chēng)為水平滑塊（Horizontal Slider），而在垂直方向上的Slider被稱(chēng)為垂直滑塊（Vertical Slider）。

水平滑塊（Horizontal Slider）特點(diǎn)

• 方向： 在水平軸上移動(dòng)，允許用戶(hù)通過(guò)拖動(dòng)滑塊來(lái)選擇數(shù)值。
• 應(yīng)用場(chǎng)景： 適用于需要在水平方向上進(jìn)行范圍選擇的情況，比如調(diào)整音量、進(jìn)度等。

垂直滑塊（Vertical Slider）特點(diǎn)

• 方向： 在垂直軸上移動(dòng)，允許用戶(hù)通過(guò)拖動(dòng)滑塊來(lái)選擇數(shù)值。
• 應(yīng)用場(chǎng)景： 適用于需要在垂直方向上進(jìn)行范圍選擇的情況，比如調(diào)整亮度、高度等。

這兩種Slider都是在用戶(hù)界面中提供直觀、交互式的方式來(lái)選擇數(shù)值范圍的優(yōu)秀組件，它們能夠很好地與Qt應(yīng)用程序的其他部分集成。

以下是QSlider類(lèi)的一些常用方法的說(shuō)明和概述，以表格形式進(jìn)行說(shuō)明：

這些方法提供了一些基本的控制和配置選項(xiàng)，以便根據(jù)應(yīng)用程序的需求對(duì)QSlider進(jìn)行調(diào)整。在使用這些方法時(shí)，你可以根據(jù)具體的場(chǎng)景和用戶(hù)體驗(yàn)需求來(lái)靈活選擇參數(shù)值。

1.1 使用滑塊條事件

如下圖，我們首先創(chuàng)建一個(gè)頁(yè)面UI，在頁(yè)面中左側(cè)放置Vertical Slider垂直滑塊，底部放置Horizontal Slider水平滑塊，在水平滑塊的上方放置兩個(gè)lineEdit組件，在其右側(cè)是兩個(gè)調(diào)節(jié)按鈕。

不論是水平滑塊（Horizontal Slider）條還是垂直滑塊（Vertical Slider）條其都有一個(gè)valueChanged(int)的槽函數(shù)，該信號(hào)用于接收滑塊條的參數(shù)改變情況，通常會(huì)返回到函數(shù)參數(shù)上，此時(shí)只需要在槽函數(shù)內(nèi)對(duì)該參數(shù)進(jìn)行捕捉處理即可，如下代碼，通過(guò)捕捉滑塊進(jìn)度并將其輸出到編輯框內(nèi)；

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

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

當(dāng)用戶(hù)點(diǎn)擊頁(yè)面中的設(shè)置按鈕時(shí)，此時(shí)在后端只需要調(diào)用verticalSlider或horizontalSlider滑塊條的setValue屬性即可實(shí)現(xiàn)對(duì)滑塊條的賦值。

// 設(shè)置垂直滑塊（Vertical Slider）條進(jìn)度
void MainWindow::on_pushButton_clicked()
{
    // 字符串轉(zhuǎn)整數(shù)
    int x = ui->lineEdit->text().toUInt();
    // 設(shè)置數(shù)值到滑塊條
    ui->verticalSlider->setValue(x);
}

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

運(yùn)行代碼，讀者可自行測(cè)試滑塊條的取值與設(shè)置功能，如下圖所示；

1.2 滑塊條與信號(hào)綁定

滑塊條同樣可以與信號(hào)綁定，在某些時(shí)候我們希望只需要變動(dòng)滑塊條的位置就能實(shí)現(xiàn)特定的功能，此時(shí)就需要對(duì)特定的滑塊條綁定信號(hào)與槽函數(shù)，如下圖所示，我們?cè)谧髠?cè)調(diào)色板位置放置四個(gè)滑塊條用于調(diào)整顏色參數(shù)，在右側(cè)放置一個(gè)textEdit編輯框，當(dāng)讀者滑動(dòng)滑塊時(shí)右側(cè)則出現(xiàn)相對(duì)應(yīng)的顏色。

首先，我們以第一個(gè)紅色Horizontal Slider滑塊條為例，通過(guò)右鍵選中轉(zhuǎn)到槽，選擇valueChaged(int)這個(gè)槽函數(shù)，并實(shí)現(xiàn)如下邏輯，在代碼中我們分別讀入四個(gè)進(jìn)度條的默認(rèn)值，并率先設(shè)置到textEdit組件上，接著就是對(duì)textEdit底色的設(shè)置。

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

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

接著，我們?cè)?code>MainWindow構(gòu)造函數(shù)上分別綁定三個(gè)信號(hào)，將 SliderGreen，SliderBlue，SliderAlpha 與第一個(gè)滑塊條 SliderRead 關(guān)聯(lián)起來(lái)，并全部綁定到on_SliderRed_valueChanged槽函數(shù)上，此時(shí)的實(shí)現(xiàn)效果為，當(dāng)其他三個(gè)選擇條數(shù)值改變時(shí)，同樣會(huì)觸發(fā)on_SliderRed_valueChanged槽函數(shù)執(zhí)行變色。

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)));
}

至此，讀者可自行拖拽滑塊條以獲得不同的配色方案，如下圖所示，這里需要提醒讀者默認(rèn)滑塊條是0-99而顏色的長(zhǎng)度為0-255讀者需要自行調(diào)整滑塊條的顏色值，以獲取更多的配色方案。

到此這篇關(guān)于Qt實(shí)現(xiàn)Slider滑塊條組件的示例代碼的文章就介紹到這了,更多相關(guān)Qt Slider滑塊條內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論