Qt如何自定義滑動條
最近要用到滑動條,Qt自帶的QSlider雖然能滿足需求,但是操作起來有很多不舒服的地方,于是在它的基礎上改了改,分享給大家使用。
先放效果圖
在QSlider的基礎上,改變了樣式,繪制了刻度,增加了取整功能,只需要微調就能適應各種需求。
1、頭文件
需要包含下面的東西
#include <QSlider> #include <QtCore> #include <QStylePainter> #include <QStyleOptionSlider> #include <QMouseEvent>
2、聲明
需要繼承QSlider,并重寫兩個鼠標事件mousePressEvent和mouseReleaseEvent,使用paintEvent用來繪制刻度線,使用信號發(fā)送選中的數(shù)值。
class MySlider : public QSlider { Q_OBJECT public: MySlider(QWidget *parent = nullptr); ~MySlider(); signals: void sliderValue(float); private: void mousePressEvent(QMouseEvent *event); void mouseReleaseEvent(QMouseEvent *event); void paintEvent(QPaintEvent *ev); };
3、構造函數(shù)
首先在構造函數(shù)中配置控件的相關屬性,在此宏定義的幾個數(shù)值:nMin和nMax代表取值范圍,nSingleStep代表步長,nTick代表刻度間隔,nWidth和nHeight控制控件的大小。
通過設置Orientation為Horizontal,使控件為橫向。
#include "myslider.h" int nMin = 0; int nMax = 100; int nSingleStep = 10; int nTick = 10; //修改刻度個數(shù)改此數(shù)值 int nWidth = 200; int nHeight = 50; MySlider::MySlider(QWidget *parent): QSlider (parent) { setOrientation(Qt::Horizontal); setFixedSize(nWidth,nHeight); setMinimum(nMin); setMaximum(nMax); setSingleStep(nSingleStep); setTickInterval(nTick); setTickPosition(QSlider::TicksAbove);
4、設置樣式表
QSlider::groove控制背景樣式,QSlider::handle控制滑塊樣式,QSlider::sub-page控制劃過區(qū)域的樣式。
需要注意的是,qss和QSlider自帶的刻度線并不兼容,使用qss就不能顯示自帶的刻度線了,但是后文我提供了解決方法。
setStyleSheet("QSlider::groove:horizontal{height:12px; left:0px; right:0px; border:0px; border-radius:6px; background:rgb(242,242,242);} \ QSlider::handle:horizontal{width:24px; background:#1644B0; border-radius:12px; margin:-6px 0px;} \ QSlider::sub-page:horizontal{background:#4C85FB; border:0px; border-radius:6px;}"); }
5、重寫鼠標點擊事件
之所以要這么做,是因為QSlider的點擊效果是一格一格地移動,我希望滑塊能直接跳到指定位置,所以需要用到setValue。
void MySlider::mousePressEvent(QMouseEvent * event) { int pointPos = ((double)event->pos().x()) / (this->width() * (nMax - nMin) + nMin); if(pointPos != 0){ if(abs(pointPos - this->value()) > nTick){ this->setValue(pointPos); } } else{ QSlider::mousePressEvent(event); } }
6、重寫鼠標釋放事件
因為希望取值可以取幾個固定的值,此處限定只能取0, 0.1, 0.2… 1這些值,所以在釋放時對當前值四舍五入,然后讓滑塊移動到相應的位置。最后發(fā)出信號傳遞數(shù)值。
void MySlider::mouseReleaseEvent(QMouseEvent *event) { //獲取當前點擊位置 int currentX = event->pos().x(); //獲取當前點擊的位置占整個Slider的百分比 float per = currentX *1.0 /this->width(); //限制邊界 if(per > 1) per = 1; else if(per < 0) per = 0; //按步長取整 per = (float)(qRound(per * 100 / nTick) * nTick) / 100; //利用算得的百分比得到具體數(shù)字 int value = per*(this->maximum() - this->minimum()) + this->minimum(); //設定滑動條位置 this->setValue(value); //滑動條移動事件等事件也用到了mousePressEvent,加這句話是為了不對其產生影響,是的Slider能正常相應其他鼠標事件 QSlider::mousePressEvent(event); emit sliderValue(per); }
7、繪制刻度
前文提到了qss和QSlider刻度的沖突,所以這里我們直接使用paintEvent畫線。
修改宏定義的參數(shù)值,刻度的數(shù)量也會隨之變動。
void MySlider::paintEvent(QPaintEvent *) { QStylePainter p(this); QStyleOptionSlider opt; initStyleOption(&opt); // 獲取滑塊的大小 QRect handle = style()->subControlRect(QStyle::CC_Slider, &opt, QStyle::SC_SliderHandle, this); // draw tick marks // do this manually because they are very badly behaved with style sheets int interval = tickInterval(); if (interval == 0) { interval = pageStep(); } if (tickPosition() != NoTicks) { for (int i = minimum(); i <= maximum(); i += interval) { int x = round((double)((double)((double)(i - this->minimum()) / (double)(this->maximum() - this->minimum())) * (double)(this->width() - handle.width()) + (double)(handle.width() / 2.0))) - 1; int h = 4; p.setPen(QColor("#a5a294")); if (tickPosition() == TicksBothSides || tickPosition() == TicksAbove) { int y = this->rect().top(); p.drawLine(x, y, x, y + h); } if (tickPosition() == TicksBothSides || tickPosition() == TicksBelow) { int y = this->rect().bottom(); p.drawLine(x, y, x, y - h); } } } // draw the slider (this is basically copy/pasted from QSlider::paintEvent) opt.subControls = QStyle::SC_SliderGroove; p.drawComplexControl(QStyle::CC_Slider, opt); // draw the slider handle opt.subControls = QStyle::SC_SliderHandle; p.drawComplexControl(QStyle::CC_Slider, opt); }
8、實際使用
拖動或點擊滑動條都會發(fā)出信號,傳遞滑塊對應的值。
所以在要使用的地方建立信號槽,就可以接收對應滑動條傳來的值并加以處理。
FaceThreshSlider = new MySlider(this); connect(FaceThreshSlider, SIGNAL(sliderValue(float)), this, SLOT(setSlideThresh(float)));
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。