2. 程式人生 > 實用技巧 >Qt—QSlider 使用總結

Qt—QSlider 使用總結

阿新 • • 發佈：2020-08-07

轉載自[一去、二三裡]的Qt 之 QSlider

簡述

QSlider 部件提供了一個垂直或水平滑動條。

滑塊是一個用於控制有界值的典型部件。它允許使用者沿水平或垂直方向移動滑塊，並將滑塊所在的位置轉換成一個合法範圍內的值。

詳細描述

QSlider 很少有自己的函式，大部分功能在 QAbstractSlider 中。最有用的函式是 setValue()，用來設定滑塊的當前值；triggerAction() 來模擬點選的效果（對快捷鍵有用），setSingleStep()、setPageStep() 用來設定步長，setMinimum() 和 setMaximum() 用於定義滾動條的範圍。

QSlider 提供了一些方法來控制刻度標記。可以使用 setTickPosition() 來表示刻度標記的位置，使用 setTickInterval() 來指定刻度的間隔；當前設定的刻度位置和間隔可以分別使用 tickPosition() 和 tickInterval() 函式來查詢。

QSlider 繼承了一組全面的訊號：

訊號 描述
valueChanged() 當滑塊的值發生了改變，發射此訊號。tracking()確定在使用者互動時，是否發出此訊號。
sliderPressed() 當用戶按下滑塊，發射此訊號。
sliderMoved() 當用戶拖動滑塊，發射此訊號。
sliderReleased() 當用戶釋放滑塊，發射此訊號。

注意：QSlider只提供整數範圍。另外，儘管QSlider可以處理非常大的數字，但是對於使用者來說，難以準確使用很大範圍的滑塊。


滑塊接受Tab鍵的焦點，並同時提供了一個滑鼠滾輪和鍵盤介面。鍵盤介面如下：

  • Left/Right 移動水平滑塊一個步長。
  • Up/Down 移動垂直滑塊一個步長。
  • PageUp 上移一頁。
  • PageDown 下移一頁。
  • Home 移動至起始位置（最小值）。
  • End 移動至結束位置（最大值）

刻度位置

列舉 QSlider::TickPosition

這個列舉指定刻度線相對於滑塊和使用者操作的位置。

常量 值 描述
QSlider::NoTicks 0 不繪製任何刻度線
QSlider::TicksBothSides 3 在滑塊的兩側繪製刻度線
QSlider::TicksAbove 1 在（水平）滑塊上方繪製刻度線
QSlider::TicksBelow 2 在（水平）滑塊下方繪製刻度線
QSlider::TicksLeft TicksAbove 在（垂直）滑塊左側繪製刻度線
QSlider::TicksRight TicksBelow 在（垂直）滑塊右側繪製刻度線

基本使用

下面我們來看一個示例。

int nMin = 0;
int nMax = 200;
int nSingleStep = 10;

// 微調框
QSpinBox *pSpinBox = new QSpinBox(this);
pSpinBox->setMinimum(nMin);  // 最小值
pSpinBox->setMaximum(nMax);  // 最大值
pSpinBox->setSingleStep(nSingleStep);  // 步長

// 滑動條
QSlider *pSlider = new QSlider(this);
pSlider->setOrientation(Qt::Horizontal);  // 水平方向
pSlider->setMinimum(nMin);  // 最小值
pSlider->setMaximum(nMax);  // 最大值
pSlider->setSingleStep(nSingleStep);  // 步長

// 連線訊號槽（相互改變）
connect(pSpinBox, SIGNAL(valueChanged(int)), pSlider, SLOT(setValue(int)));
connect(pSlider, SIGNAL(valueChanged(int)), pSpinBox, SLOT(setValue(int)));

pSpinBox->setValue(10);

通過 setMinimum() 與 setMaximum() 函式，我們將取固定到一個合適的範圍（0 - 200），連線訊號槽後，當 QSpinBox 的值發生改變時，QSlider 的值也會發生相應變化；反之亦然。最後，我們使用 setValue() 將 QSpinBox 的值設定為 10，由於訊號槽已經連線，所以這時 QSlider 的值也會發生改變。


QSS

樣式一併奉上：

QSlider::groove:horizontal {
height: 6px;
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 rgb(124, 124, 124), stop: 1.0 rgb(72, 71, 71));
}
QSlider::handle:horizontal {
width: 1px;
background: rgb(0, 160, 230);
margin: -6px 0px -6px 0px;
border-radius: 9px;
}

刻度位置及間隔

為了演示效果，這裡我們不再採用QSS樣式控制。

QSlider *pSlider = new QSlider(this);
pSlider->setOrientation(Qt::Horizontal);  // 水平方向
pSlider->setMinimum(nMin);  // 最小值
pSlider->setMaximum(nMax);  // 最大值
pSlider->setSingleStep(nSingleStep); // 步長
// pSlider->setTickInterval(40);  // 設定刻度間隔
pSlider->setTickPosition(QSlider::TicksAbove);  //刻度在上方

由於我們的取值範圍是：0 - 200，步長為 10。所以，在繪製刻度的時候，一共有 21 個刻度點（從 0 開始，每隔步長 10 繪製一個點，到 200 處結束）。


擴充套件：各種樣式表設定

樣式表1


/* 首先是設定主體 */
QSlider{
border-color: #bcbcbc;
}
QSlider::groove:horizontal {                                
border: 1px solid #999999;                             
height: 1px;                                           
margin: 0px 0;                                         
left: 5px; right: 5px; 
}
/* 設定中間的那個滑動的鍵 */
QSlider::handle:horizontal {                               
border: 0px ;                           
border-image:  url(:/NiceTalk/Images/Setting/volume_nor.png);
width: 15px;                                           
margin: -7px -7px -7px -7px;                  
} 
/* 還沒有滑上去的地方 */
QSlider::add-page:horizontal{
background: qlineargradient(spread:pad, x1:0, y1:1, x2:0, y2:0, stop:0 #bcbcbc, 	stop:0.25 #bcbcbc, stop:0.5 #bcbcbc, stop:1 #bcbcbc); 
}
/* 已經劃過的從地方 */
QSlider::sub-page:horizontal{                               
background: qlineargradient(spread:pad, x1:0, y1:1, x2:0, y2:0, stop:0 #439cf3, 	stop:0.25 #439cf3, stop:0.5 #439cf3, stop:1 #439cf3);                     
}

樣式表2

其實，豎直的和水平的一模一樣，只是變了名稱而已。


QSlider{
border-color: #cbcbcb;
}
QSlider::groove:vertical {  
background: #cbcbcb;  
width: 6px;  
border-radius: 1px;  
padding-left:-1px;  
padding-right:-1px;  
padding-top:-1px;  
padding-bottom:-1px;  
} 
QSlider::sub-page:vertical {  
background: #cbcbcb;  
border-radius: 2px;  
} 
QSlider::add-page:vertical {  
background: qlineargradient(x1:0, y1:0, x2:0, y2:1,   
    stop:0 #439cf4, stop:1 #439cf4);  
background: qlineargradient(x1: 0, y1: 0.2, x2: 1, y2: 1,  
    stop: 0 #439cf4, stop: 1 #439cf4);  
width: 10px;  
border-radius: 2px;  
}
QSlider::handle:vertical   
{     
border-image: url(:/NiceTalk/Images/Setting/volume_nor.png);
margin: -2px -7px -2px -7px; 
height: 17px;
}

樣式表3


QSlider::groove:horizontal {
border: 0px solid #bbb;
}
QSlider::sub-page:horizontal {
background: rgb(235,97,0);
border-radius: 0px;
margin-top:8px;
margin-bottom:8px;
}
QSlider::add-page:horizontal {
background: rgb(255,255, 255);
border: 0px solid #777;
border-radius: 2px;
margin-top:8px;
margin-bottom:8px;
}
QSlider::handle:horizontal {
background: rgb(255,153,102);
border: 1px solid rgb(255,153,102);
width: 14px;
height:10px;
border-radius: 7px;
margin-top:2px;
margin-bottom:2px;
}
QSlider::handle:horizontal:hover {
background: rgb(255,128,6);
border: 1px solid rgba(102,102,102,102);
border-radius: 7px;
}
QSlider::sub-page:horizontal:disabled {
background: #bbb;
border-color: #999;
}
QSlider::add-page:horizontal:disabled {
background: #eee;
border-color: #999;
}
QSlider::handle:horizontal:disabled {
background: #eee;
border: 1px solid #aaa;
border-radius: 4px;
}

樣式表4


/* 以下是槽 */
QSlider::groove:horizontal{
    background:#aaaaaa;
    height:24px;
    border-radius:10px;
}
/* 設定中間的那個滑動的鍵 */
QSlider::handle:horizontal{
    width: 42px;
    margin-top: -9px;
    margin-bottom:-9px;
    border-radius: 18px;
    background: #f8f8f8;
}
/* 已經劃過的從地方 */
QSlider::sub-page:horizontal{
    border-radius:10px;
    background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #5599FF, stop:1 #498ff8);
}

擴充套件：滑鼠點選進行滑動條滑塊定位

方法一：使用事件過濾器。

// 滑鼠點選進行滑動條滑塊定位
bool Device::eventFilter(QObject *obj, QEvent *event)
{
    if(obj==pSlider_l)
    {
        if (event->type()==QEvent::MouseButtonPress)
        {
            QMouseEvent *mouseEvent = static_cast<QMouseEvent *>(event);
            if (mouseEvent->button() == Qt::LeftButton)
            {
               int dur = pSlider_l->maximum() - pSlider_l->minimum();
               int pos = pSlider_l->minimum() + dur * ((double)mouseEvent->x() / pSlider_l->width());
               if(pos < (pSlider_l->sliderPosition())||pos > (pSlider_l->sliderPosition()))
                {
                  pSlider_l->setValue(pos);
                }
            }
        }
    }
 
    return QObject::eventFilter(obj,event);
}

方法二：自定義滑鼠點選事件。

// 方法是滑鼠點選事件
void XSlider::mousePressEvent(QMouseEvent *e)
{
	// 向上父控制元件傳遞滑鼠事件；否則，滑鼠其他事件會失靈
	QSlider::mousePressEvent(e);
	// 百分比
	double p = (double)e->pos().x() / (double)width();
	int val = p*(maximum()-minimum())+minimum();
	this->setValue(val);
}

參考：

Qt中QSlider的樣式表設定

【Qt】QSlider點選定位的提高使用度的實現

qt中QScrollBar/QSlider滑鼠點選滑條不能到達所點選的位置，只移動step距離修改


相關推薦

Qt—QSlider 使用總結

轉載自[一去、二三裡]的Qt 之 QSlider 簡述 QSlider 部件提供了一個垂直或水平滑動條。

Qt—QLabel 使用總結

轉載自一去丶二三裡的Qt 之 QLabel 簡述 QLabel(標籤控制元件) 提供了一個文字或影象的顯示，沒有提供使用者互動功能。

Qt—QPushButton 使用總結

設定位置和大小 // 重新設定按鈕的位置 pBtnTest->move(100, 50); // 重新設定按鈕的大小

Qt 不規則窗體總結

一、取消窗體標題欄 1.FramelessWindowHint 無邊框，設定FramelessWindowHint後，帶來主要問題是無法移動視窗以及無法使用滑鼠拖拽縮放視窗大小。

Qt新增連結庫總結

Qt新增連結庫總結 一 前言：在Qt工程開發過程中，經常會碰到整合第三方庫的情況，不論是靜態庫還是動態庫。由於Qt本身不完善等特性，整合過程中經常會出現各種各樣的問題。針對遇到過的問題記錄如下備忘，同時也希望

Qt淺談之一：記憶體洩露（總結）

本文轉載自烏托邦2號的Qt淺談之一：記憶體洩露（總結） 一、簡介 Qt 記憶體管理機制：Qt 在內部能夠維護物件的層次結構。對於可視元素，這種層次結構就是子元件與父元件的關係；對於非可視元素，則是一個物件與另一

Qt訊號與槽使用方法最完整總結

在圖形介面程式設計中（參考《C++最好的圖形庫是什麼？》），元件之間如何實現通訊是核心的技術內容。Qt 使用了訊號與槽的機制，非常的高效、簡單、易學，方便開發者的使用。本文詳細的介紹了Qt 當中訊號與槽的概

Qt QSS QSlider樣式

本文章主要學習QSlider樣式 準備下面幾張背景圖片： 調小圖示、調大圖示、QSlider位置圖示

結對專案總結 -- 基於Qt開發的win10桌面應用

擔任角色 在這次結對專案中，由於採用了我的個人專案作為參考，所以我繼續擔任後端開發的角色。

Qt動畫使用總結

自己開發了一個股票智慧分析軟體，功能很強大，需要的點選下面的連結獲取：

Qt—QLineEdit使用總結

以上是Qt官方文件對QLineEdit的簡要說明，下面根據個人經驗，對一些常用的方法作說明：

qt小用法總結

1.Qt工程新增svn配置。 (1)流程 圖 1流程 (2)配置中放入 svn.exe 執行檔案驗證資訊無需勾選。

Qt+Creator快速入門-----第十九章（程序和執行緒）學習總結

程序 Qt的QProcess類用來啟動一個外部程式並與其進行通訊。 要啟動一個程序，可以使用start()函式，然後將程式名稱和執行這個程式所要使用的命令列引數作為該函式的引數。

Qt專案升級到Qt6經驗總結

1 直觀總結 增加了很多輪子，同時原有模組拆分的也更細緻，估計為了方便拓展個管理。

Qt學習目錄及總結

1、Qt簡介 　　Qt5模組簡介：   Qt Widgets：視窗有關的類； Qt Webkit：網路相關的類；

關於Qt資料庫相關開發的一些經驗總結

尊重原創版權: https://www.gewuweb.com/hot/11399.html 關於Qt資料庫相關開發的一些經驗總結

【Qt】關於大屏開發的總結和一個大屏顯示（原型）

（一）開篇 本文主要分享關於【大屏顯示】軟體UI開發的一些心得以及分享一個實際的大屏軟體原型。

總結幾個Qt版本的冷知識

Qt4.8.7是Qt4的終結版本，是Qt4系列版本中最穩定最經典的（很多嵌入式板子還是用Qt4.8），其實該版本是和Qt5.5差不多時間釋出的。參考連結 https://www.qt.io/blog/2015/05/26/qt-4-8-7-released https://blog.qt.i

總結：iOS中多執行緒的經典崩潰

前言 iOS崩潰是讓iOS開發人員比較頭痛的事情，app崩潰了，說明程式碼寫的有問題，這時如何快速定位到崩潰的地方很重要。除錯階段是比較容易找到出問題的地方的，但是已經上線的app並分析崩潰報告就比較麻煩了。

javascript繼承總結

前置 所有的物件都是__proto__屬性,指向其建構函式的原型物件 所有的函式物件都有prototype屬性表示原型物件,作用:共享例項物件的屬性和方法.