網站首頁 編程語言 正文
最近要用到滑動條,Qt自帶的QSlider雖然能滿足需求,但是操作起來有很多不舒服的地方,于是在它的基礎上改了改,分享給大家使用。
先放效果圖
在QSlider的基礎上,改變了樣式,繪制了刻度,增加了取整功能,只需要微調就能適應各種需求。
1、頭文件
需要包含下面的東西
#include <QSlider>
#include <QtCore>
#include <QStylePainter>
#include <QStyleOptionSlider>
#include <QMouseEvent>
2、聲明
需要繼承QSlider,并重寫兩個鼠標事件mousePressEvent和mouseReleaseEvent,使用paintEvent用來繪制刻度線,使用信號發送選中的數值。
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、構造函數
首先在構造函數中配置控件的相關屬性,在此宏定義的幾個數值:nMin和nMax代表取值范圍,nSingleStep代表步長,nTick代表刻度間隔,nWidth和nHeight控制控件的大小。
通過設置Orientation為Horizontal,使控件為橫向。
#include "myslider.h"
int nMin = 0;
int nMax = 100;
int nSingleStep = 10;
int nTick = 10; //修改刻度個數改此數值
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控制劃過區域的樣式。
需要注意的是,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這些值,所以在釋放時對當前值四舍五入,然后讓滑塊移動到相應的位置。最后發出信號傳遞數值。
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;
//利用算得的百分比得到具體數字
int value = per*(this->maximum() - this->minimum()) + this->minimum();
//設定滑動條位置
this->setValue(value);
//滑動條移動事件等事件也用到了mousePressEvent,加這句話是為了不對其產生影響,是的Slider能正常相應其他鼠標事件
QSlider::mousePressEvent(event);
emit sliderValue(per);
}
7、繪制刻度
前文提到了qss和QSlider刻度的沖突,所以這里我們直接使用paintEvent畫線。
修改宏定義的參數值,刻度的數量也會隨之變動。
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、實際使用
拖動或點擊滑動條都會發出信號,傳遞滑塊對應的值。
所以在要使用的地方建立信號槽,就可以接收對應滑動條傳來的值并加以處理。
FaceThreshSlider = new MySlider(this);
connect(FaceThreshSlider, SIGNAL(sliderValue(float)), this, SLOT(setSlideThresh(float)));
原文鏈接:https://blog.csdn.net/nchu_zhangyiqing/article/details/122490710
相關推薦
- 2023-02-27 Golang設計模式中抽象工廠模式詳細講解_Golang
- 2022-06-13 python語法?之垃圾回收機制_python
- 2022-11-30 簡易的redux?createStore手寫實現示例_React
- 2024-01-15 spring boot jpa 執行test測試,發現執行未報錯但是事務會自動回滾
- 2022-07-17 Python?OpenGL基本配置方式_python
- 2022-04-09 安裝Mongodb 提示:找不到msvcp140.dll
- 2022-05-11 為什么 MyBatis 里,Mapper 中的方法不能被重載
- 2024-04-03 objectMapper(字符串轉對象)
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支